1. Basic Web site Design
PMEHS Web Design
Dr. Kerby

2. Designing for the User Who is your audience ...
Who will read these pages?
Young people?
Old people?
Muscians?
Politicians?
Athletes?
Children: theme of basic colors with simple graphics and layout
What is the purpose of the site?

3. Consistent, Unified Look
Colors
Graphics
Layout
Navigation
Same set of colors; navigation in same place on each page

4. Color scheme examples:
Army Web site
Nick Jr. Web site

5. Alignment Consistent Left (easier to read) Right
Horizontal OR
Vertical
Left (easier to read)
Right
Center (eyes draw down the center)

6. White Space
Types:
Active – separates content/images
Passive – blank areas that result in incomplete or mismatched shapes
Well placed white space makes a Web page easier to follow/read.
Recommended - 2:1
Lycos Web page

7. White space sample Banner Active White Space Passive White Space Image
Navigation
Text block
Image
Footer

8. Organize long lists of information and links.
Microsoft Web site
Or use a navigation bar . . .
Adobe Web site

9. Organize Navigation User friendly Group like links together
Give links specific names

10. Use 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

11. Online Resources Usability First Web page design tips
Web evaluation form for secondary grades
Ten Good Deeds in Web Design

13. Ten Good Deeds in Web Design
Place Name and Logo on every page
Provide a search box if Web site has over 100 pages.
Clear headings and page titles.
Use grouping and sections to make pages easy to scan.

14. Use hypertext links for navigation.
Use thumbnails for catalogue pages.
Create relevant thumbnails.
Write clear link titles.
Add accessibility to users with disabilities.
Design sites in a way viewer will expect.

15. Ten Good Mistakes in Web Design
Original Top Ten Mistakes
Top Ten New Mistakes
The REALLY Bad Web Page guide

16. Basic Web site Design
PMEHS Web Design
Mrs. Kerby