Embed Size (px)
Citation preview
Web Design
What is eye-tracking?
• Studies use a camera to track the eyes of an Internet viewer and find out what layout is most effective and “usable.”
Here’s what we know. . . .
Effective LayoutNAVIGATION BAR
Across the top and/or vertical left. Remains constant on every page. Buttons not too large, type not too small.
BANNERThe graphic that spans across the top and unifies the page. Often contains headline
LOGOLogo upper left (84%) or upper center (16%).Never at bottom of a scrolled page or on the right.
COLUMNS2 or 3 short columns and short paragraphs divided by space. (Long text is hard to read horizontally or vertically).
Layout Terms
NAVIGATION BARUnder Banner is common
BANNER IMAGESThe banner spans across the top, contains the logo, and usually contains an image that is organic and curved, to contrast with the rectangles on the page.
TYPE HIERARCHY
Small body text type (no larger than 12 point usually. Larger subheadings
CONTENT IMAGES / TEXT
Short columns and short paragraphs divided by space include image and text side by side.
Variations
LARGE BANNERRetailers and visual marketers go large
VARIATION Left Menu, Top Navigation Bar, Small Banner, Large Billboard
Why do logos almost never appear in the upper right
or bottom areas of a page?
What would happen if the logo were here?
Most people do not keep their browser windows fully open. The right and bottom get cut off.
Student Portfolio Web Sites
• The following examples are from recent student web sites.
• Make sure your home page tells what you are offering (e.g., what kind of designer you are) and positions you as a professional, not as a student or hobbyist.
C.R.A.P. FormulaA funny way to remember 4 good
design principles
C.R.A.P.
R. REPETITION (3 ex)
A. ALIGNMENT (1 ex)
P. PROXIMITY
C. CONTRAST (1 ex)
These are examples of good ways to incorporate the web design principles.
Banner Techniques
Banner Images
Curvilinear to contrast with rectilinear shapes
Alignment of images w/ columns
Breakout borders (head)
Photos with people
BannerImages
Curvilinear to contrast with rectilinear shapes
Alignment of images w/ columns
Breakout borders (head)
Photos with people
MastheadImages
Curvilinear to contrast with rectilinear shapes
Alignment of images w/ columns
Breakout borders (head)
Photos with people
Critique This
Graphics Techniques
Graphics
Photos
3D effects
Icons / Bullets
Graphics
Organic / traditional elements
Splash Page Cons
• Viewers don’t like splash pages.
• Becomes an obstacle hiding what they really want (content).
QUESTIONS?
© 2007 Juliet Davis
