Interface Design for Educators

Control "misslife.wav" Mathew Broderick from Ferris Bueller's Day Off

Plug in help

Web Page Design Layout

Design Basics

Principles of good web design include: Contrast, Repetition, Alignment, and Proximity ( Williams & Tollett, 1994).

Visual and functional continuity in the organization of a Web site, its graphic design, and typography are essential to convince your audience that your site offers them timely, accurate, and useful information. A careful systematic approach to page design can simplify navigation, reduce user errors, and make it easier for readers to take advantage of the information and features of the site (Lynch & Horton, 2001).

Contrast

Control where a reader's eye goes

Select primary and secondary focal points

Use bold, size, italics, color rhetorically

Contrasts in color should be reassuring and attractive, not jarring

 

Repetition

Repetition of color, fonts, images, within a page and from page-to-page ties a site together

The combination of repetition and variation creates sophistication without confusion .

Use consistent file and link names throughout

 

Alignment

Choose one alignment and stick to it

Avoid centering

Move elements away from the edge of the screen

 

Proximity

Consider the relationship of elements

Don't spread elements around to "fill" the page; "white" space is okay

 

Web Site Layout Evaluation

The benchmarks suggested by (Williams and Tollett, 1994) for contrast, repetition, alignment, and proximity were closely evaluated in three travel web sites using an evaluation template. Expedia and Travelocity both achieved positive scoring on the evaluation in all four areas. Orbitz web site, however, fell short in the proximity, alignment, and repetition due to their overzealous lists in color and what they thought might have been pizzazz.

The results are shown in the Sample Website Layout Evaluation completed on the Website Layout Evaluation Template.

References

Williams, R. and Tollett, R. (1994) The Non-Designer's Web Book. Atlanta : Peachpit Press.

Lynch, P. and Horton, S. (2001) Web Style Guide. New Haven and London : Yale University Publishers.