Date post: | 17-Jan-2018 |
Category: |
Documents |
Upload: | tracey-fox |
View: | 219 times |
Download: | 0 times |
11
Basic Web site DesignBasic Web site Design
PMEHS Web DesignPMEHS Web Design
Dr. KerbyDr. Kerby
22
Designing for the UserDesigning for the UserWho is your audience ...Who is your audience ...
Who will read these pages?Who will read these pages?• Young people?Young people?• Old people?Old people?• Muscians?Muscians?• Politicians?Politicians?• Athletes?Athletes?
What is the purpose of the site?What is the purpose of the site?
33
Consistent, Unified LookConsistent, Unified Look
ColorsColors GraphicsGraphics LayoutLayout
• NavigationNavigation
44
Color scheme examples:Color scheme examples: Army Web site Nick Jr. Web site
55
AlignmentAlignment ConsistentConsistent
• Horizontal ORHorizontal OR• VerticalVertical
Left (easier to read)Left (easier to read) RightRight Center (eyes draw down the center)Center (eyes draw down the center)
66
White SpaceWhite Space Types:Types:
• Active – separates content/imagesActive – separates content/images• Passive – blank areas that result in incomplete Passive – blank areas that result in incomplete
or mismatched shapesor mismatched shapes Well placed white space makes a Web Well placed white space makes a Web
page easier to follow/read.page easier to follow/read. Recommended - 2:1Recommended - 2:1 Lycos Web page
77
White space sampleWhite space sampleBanner
Navigation
Text blockImage
Footer
Active White Space
Passive White Space
88
Organize long lists of information Organize long lists of information and links.and links.
Microsoft Web site
Or use a navigation bar . . .Or use a navigation bar . . . Adobe Web site
99
Organize NavigationOrganize Navigation
User friendlyUser friendly Group like links togetherGroup like links together Give links specific namesGive links specific names
1010
Use of ColorUse of Color Red – stimulates emotion Green – inspires involvement or interaction Gray – indicates lack of commitment or
neutrality Blue – shows calm and conservative Yellow – shows cheerfulness and hope for
the future, restlessness and change, feelings of anxiety
Purple – implies mystical quality Black – indicates power and sophistication
1111
Online ResourcesOnline Resources Usability First Web page design tipsUsability First Web page design tips Web evaluation form for secondary Web evaluation form for secondary
gradesgrades Ten Good Deeds in Web DesignTen Good Deeds in Web Design
1212
Web site Design Rubric CRITERIA YES
(2 pts.)
ATTEMPTED (1 point)
NO (0
pts.) Page: is easy to read: consider white space, background, text/link colors/size, moving parts
is attractive: balanced layout between text and graphics has a reasonable load time contains correct spelling, grammar, punctuation, accuracy is written well, clear/understandable, organized (good headings/subheadings)
contains working links contains good navigation between pages contains working images observes copyrights and citations Total Points of Possible 18
1313
Ten Good Deeds in Web Ten Good Deeds in Web DesignDesign
1.1. Place Name and Logo on every pagePlace Name and Logo on every page2.2. Provide a search box if Web site has Provide a search box if Web site has
over 100 pages.over 100 pages.3.3. Clear headings and page titles.Clear headings and page titles.4.4. Use grouping and sections to make Use grouping and sections to make
pages easy to scan.pages easy to scan.
1414
5.5. Use hypertext links for navigation.Use hypertext links for navigation.6.6. Use thumbnails for catalogue Use thumbnails for catalogue
pages.pages.7.7. Create relevant thumbnails.Create relevant thumbnails.8.8. Write clear link titles.Write clear link titles.9.9. Add accessibility to users with Add accessibility to users with
disabilities.disabilities.10.10. Design sites in a way viewer will Design sites in a way viewer will
expect.expect.
1515
Ten Good Mistakes in Web Ten Good Mistakes in Web DesignDesign
Original Top Ten MistakesOriginal Top Ten Mistakes Top Ten New MistakesTop Ten New Mistakes The REALLY Bad Web Page guideThe REALLY Bad Web Page guide
1616
Basic Web site DesignBasic Web site Design
PMEHS Web DesignPMEHS Web Design
Mrs. KerbyMrs. Kerby