Web Design Concepts

Using Text & Graphics Effectively

Audience for your site

Identify the audience for each site

http://www.yahooligans.com

http://www.fidelity.com/

http://www.noaa.gov/

Design Demands

Client needs Organization-centered

Technology Technology-centered

User User-center

Conservative v. Dynamic Layout

Headline (San Serif) v. Body (Serif)

HeadlineBody 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.

HeadlineBody 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

SubheadBody 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.

SubheadBody 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

Oshkosh Power

Typographic Contrast - Style

Oshkosh Power

Oshkosh Power

Typographic Contrast - Weight

Oshkosh Power

Oshkosh Power

Typographic Contrast - Spacing

Oshkosh P o w e r

Oshkosh Power

Typographic Contrast - Background

Oshkosh Power

Oshkosh Power

Typographic Contrast - Color

Code RedBlue Moon

Code RedBlue 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 BurnettTechnologyTechnology

Catches The Eye.Catches The Eye.

Brand Wins The Brand Wins The Heart.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 640-800 pixels File Size (in kbytes)

Most sites 35-45K bytes Graphics will skew the performance