1. Web Design

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

3. 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).

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

5. Variations
LARGE BANNER Retailers and visual marketers go large

7. VARIATION Left Menu, Top Navigation Bar, Small Banner, Large Billboard

8. Why do logos almost never appear in the upper right or bottom areas of a page?

9. What would happen if the logo were here?

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

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

14. A funny way to remember 4 good design principles
C.R.A.P. Formula
A funny way to remember 4 good design principles

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

16. Banner Techniques

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

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

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

20. Critique This

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

22. Graphics Techniques

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

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

25. Splash Page Cons Viewers don’t like splash pages.
Becomes an obstacle hiding what they really want (content).

29. QUESTIONS?
© 2007 Juliet Davis