1. Web Design Concepts Using Text & Graphics Effectively

2. Audience for your site Identify the audience for each site http://www.yahooligans.com http://www.fidelity.com/ http://www.noaa.gov/

3. Design Demands Client needs  Organization-centered Technology  Technology-centered User  User-center

4. Conservative v. Dynamic Layout

5. Headline (San Serif) v. Body (Serif) Headline Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text.

6. Headline / Body Size Contrast Headline Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text. Headline Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text.

7. Headlines (Fewer & Larger) Headline Text Description Words Headline Headline Text Description

8. Subheads As Bookmarks Subhead Body text body text body text body text body text body text. Body text body text body text body text body text body text. Subhead Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text.

9. Graphic Direction Body text body text body text body text body text body text. Body text body text body text body text body text body text. Body text body text body text body text body text body text.

10. Graphic Cropping (Visual Impact)

11. Clutter v. White Space

12. Typographic Contrast - Size Oshkosh Power Oshkosh Power

13. Typographic Contrast - Typeface Oshkosh Power

14. Typographic Contrast - Style Oshkosh Power

15. Typographic Contrast - Weight Oshkosh Power

16. Typographic Contrast - Spacing Oshkosh P o w e r

17. Typographic Contrast - Background Oshkosh Power

18. Typographic Contrast - Color Code Red Blue Moon Code Red Blue Moon

19. Branding Signifies Goods/Services  Name  Slogan  Symbol  Design Something That Won’t Come Off in the Wash

20. Branding Functional — Objective, Logical, Practical  Communicate  Recognition & Recall  Differentiate

21. Branding Emotional — Subjective, Emotive, Creative  Personality  Add Value  Attractive

22. Branding General  Leo Burnett Technology Catches The Eye. Brand Wins The Heart. Nike v. Adidas Logitech Michelin v. Firestone FedEx

23. Branding Web Principles  Consistency Logo Navigation Color Scheme  Banana Republic v. Barnes & Noble

24. Case Study Andrew Starling 1/7/2002 Comparison of “Ten Best Web Design Sites”  Nielsen/NetRatings 12/2001  Jupiter Media Metrix 12/2001

25. Ten “Best Web Design” Sites AOL Time Warner Yahoo! MSN Microsoft eBay Amazon Lycos About-Primedia Google Walt Disney Internet Group

26. Popular Design Considerations Home Page  Most effort – represents the company  Consistency with inner pages Main font  Verdana  Arial  Times Roman

27. Popular Design Considerations - 2 Background color  Mainly white with a touch of blue Color Scheme  Blue Text Link Style  Blue underlined (HTML default)  Microsoft and MSN without underlining (confusing) *12/2001

28. Popular Design Considerations - 3 Top Navbar for Site Sections  Horizontal on top of page  Eight at most Some with multiple decks Left Hand Column of Links (vertical list)  No consensus: About half of the 10 sites Right Hand Column of Links (vertical list)  No consensus: About half of the sites

29. Popular Design Considerations - 4 Home Link on the Home Page  Pointless  Consistency with inner pages prevails Home Page Title  Be brief Client-side JavaScript  All use JavaScript => Still popular CSS  Most use

30. Popular Design Considerations - 5 Page Width (pixels)  Width around to 640-800 pixels File Size (in kbytes)  Most sites 35-45K bytes  Graphics will skew the performance