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 Layout NAVIGATION BAR Across the top and/or vertical left. Remains constant on every page. Buttons not too large, type not too small. BANNER The graphic that spans across the top and unifies the page. Often contains headline LOGO Logo upper left (84%) or upper center (16%). Never at bottom of a scrolled page or on the right. COLUMNS 2 or 3 short columns and short paragraphs divided by space. (Long text is hard to read horizontally or vertically).
Layout Terms NAVIGATION BAR Under Banner is common BANNER IMAGES The 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 BANNER Retailers 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 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.
A funny way to remember 4 good design principles C.R.A.P. Formula A 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. R. REPETITION Menu bars (1 ex) Color bars (2 ex) Colors (throughout) A. ALIGNMENT Even images P. PROXIMITY (Unity / Separation) Mastheads and menu bars unify the page C. CONTRAST Type hierarchies Masthead shapes (curves) Curvilinear / rectilinear Color contrasts
Banner Techniques
Banner Images Curvilinear to contrast with rectilinear shapes Alignment of images w/ columns Breakout borders (head) Photos with people R. REPETITION Menu bars (1 ex) Color bars (2 ex) Colors (throughout) A. ALIGNMENT Even images P. PROXIMITY (Unity / Separation) Mastheads and menu bars unify the page C. CONTRAST Type hierarchies Masthead shapes (curves) Curvilinear / rectilinear Color contrasts
Banner Images Curvilinear to contrast with rectilinear shapes Alignment of images w/ columns Breakout borders (head) Photos with people R. REPETITION Menu bars (1 ex) Color bars (2 ex) Colors (throughout) A. ALIGNMENT Even images P. PROXIMITY (Unity / Separation) Mastheads and menu bars unify the page C. CONTRAST Type hierarchies Masthead shapes (curves) Curvilinear / rectilinear Color contrasts
Masthead Images Curvilinear to contrast with rectilinear shapes Alignment of images w/ columns Breakout borders (head) Photos with people R. REPETITION Menu bars (1 ex) Color bars (2 ex) Colors (throughout) A. ALIGNMENT Even images P. PROXIMITY (Unity / Separation) Mastheads and menu bars unify the page C. CONTRAST Type hierarchies Masthead shapes (curves) Curvilinear / rectilinear Color contrasts
Critique This
R. REPETITION Menu bars (1 ex) Color bars (2 ex) Colors (throughout) A. ALIGNMENT Even images P. PROXIMITY (Unity / Separation) Mastheads and menu bars unify the page C. CONTRAST Type hierarchies Masthead shapes (curves) Curvilinear / rectilinear Color contrasts
Graphics Techniques
Graphics Photos 3D effects Icons / Bullets R. REPETITION Menu bars (1 ex) Color bars (2 ex) Colors (throughout) A. ALIGNMENT Even images P. PROXIMITY (Unity / Separation) Mastheads and menu bars unify the page C. CONTRAST Type hierarchies Masthead shapes (curves) Curvilinear / rectilinear Color contrasts
Graphics Organic / traditional elements R. REPETITION Menu bars (1 ex) Color bars (2 ex) Colors (throughout) A. ALIGNMENT Even images P. PROXIMITY (Unity / Separation) Mastheads and menu bars unify the page C. CONTRAST Type hierarchies Masthead shapes (curves) Curvilinear / rectilinear Color contrasts
Splash Page Cons Viewers don’t like splash pages. Becomes an obstacle hiding what they really want (content).
QUESTIONS? © 2007 Juliet Davis