Download Web Design Concepts

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


Technology


Organization-centered
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
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.
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. 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
Oshkosh Power
Typographic Contrast - Style
Oshkosh Power
Oshkosh Power
Typographic Contrast - Weight
Oshkosh Power
Oshkosh Power
Typographic Contrast - Spacing
Oshkosh Power
Oshkosh P o w e r
Typographic Contrast - Background
Oshkosh Power
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

Nike v. Adidas

Logitech

Michelin v. Firestone

FedEx
Technology
Catches The Eye.
Brand Wins The
Heart.
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


Color Scheme


Mainly white with a touch of blue
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


Left Hand Column of Links (vertical list)


Some with multiple decks
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



Home Page Title


Be brief
Client-side JavaScript


Pointless
Consistency with inner pages prevails
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