Web Design Concepts Using Text & Graphics Effectively

Audience for your site Identify the audience for each site

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

Conservative v. Dynamic Layout

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.

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.

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

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.

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.

Graphic Cropping (Visual Impact)

Clutter v. White Space

Typographic Contrast - Size Oshkosh Power Oshkosh Power

Typographic Contrast - Typeface Oshkosh Power

Typographic Contrast - Style Oshkosh Power

Typographic Contrast - Weight Oshkosh Power

Typographic Contrast - Spacing Oshkosh P o w e r

Typographic Contrast - Background Oshkosh Power

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

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

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

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

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

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

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

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

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

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

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

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

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