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

2. 2 Designing for the User Who is your audience...  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?

3. 3 Consistent, Unified Look  Colors  Graphics  Layout NavigationNavigation

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

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

6. 6 White Space  Types: Active – separates content/imagesActive – separates content/images Passive – blank areas that result in incomplete or mismatched shapesPassive – 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 Lycos Web page Lycos Web page

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

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

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

10. 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. 11 Online Resources  Usability First Web page design tips Usability First Usability First  Web evaluation form for secondary grades Web evaluation form Web evaluation form  Ten Good Deeds in Web Design Ten Good Deeds Ten Good Deeds

12. 12

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

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

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

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