Website Layout Evaluation Template
Instructions: Add the site name and URL in row 1 columns 2, 3, and 4. Add additional columns for additional sites. The four principles and their elements are in column 1. Answer yes or no as appropriate. Explain as necessary to provide an evaluation.
Quick Jump to Sample Completed Evaluation.
Website Layout Evaluation Template
Website Principle Elements |
|
|
|
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 |
Sample Website Layout Evaluation Completed for Orbitz, Travelocity, and Expedia
Website Principle Elements |
Orbitz www.orbitz.com |
Travelocity www.travelocity.com |
Expedia www.expedia.com |
Contrast |
|
|
|
control where a reader's eye goes |
Yes |
Yes |
Yes |
select primary and secondary focal points |
Yes; multiple |
Yes; multiple |
Yes; multiple |
use bold, size, italics, color rhetorically |
Yes |
Yes |
Yes |
contrasts in color should be reassuring and attractive, not jarring |
Yes |
Yes |
Yes |
Repetition |
|
|
|
repetition of color, fonts, images, within a page and from page-to-page ties a site together |
Yes |
Yes |
Yes |
the combination of repetition and variation creates sophistication without confusion |
Somewhat; Big Blue research box really gets your attention |
Yes |
Yes |
use consistent file and link names throughout |
Too many extra words and some of those words are repeated such as “deal” |
Yes |
Yes |
Alignment |
|
|
|
choose one alignment and stick to it |
Two alignments giving the site a two-site appearance rather than one |
Yes |
Yes |
avoid centering |
Yes |
Yes |
Yes |
move elements away from the edge of the screen |
Hugs the left side a bit too much |
Yes |
Yes |
Proximity |
|
|
|
consider the relationship of elements |
No |
Yes |
Yes |
don't spread elements around to "fill" the page; "white" space is okay |
No; not much space without a menu, text, and graphic |
Yes |
No, used dark blue for the space |
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.