| |
From “The Non-Designer’s Web
Book” (by Robin Williams and John Tollett) |
|
Good design checklist: |
|
 |
| |
Text |
| |
Background does not interrupt the text |
| |
Text is big enough to read, but not too big |
| |
The hierarchy of information is perfectly clear |
| |
Columns of text are narrower than in a book to make reading
easier on the screen |
|
|
| |
Navigation |
| |
Navigation buttons and bars are easy to understand
and use |
| |
Frames, if used, are not obtrusive |
| |
A large site has an index or site map |
| |
The navigation bar or buttons give the visitor a clue
as to where they are, what page of the site they are currently
on |
|
|
| |
Links |
| |
Link colors coordinate with page colors |
| |
Links are underlined so they are instantly clear to the
visitor |
|
|
| |
Graphics |
| |
Buttons are not big and dorky |
| |
Every graphic has an alt label |
| |
Every graphic link has a matching text link |
| |
Graphics and backgrounds use browser-safe colors |
| |
Animated graphics turn off by themselves |
|
|
| |
General design |
| |
Pages download quickly |
| |
First page and home page fit into 640x460 space |
| |
All other pages have the most important stuff in 640x460 |
| |
Good use of graphic elements to break up large areas
of text |
| |
Every web page in the site looks like it belongs to
the same site |
|
|
| |
Not-so-good design checklist: |
|
|
| |
Backgrounds |
| |
Gray default background color |
| |
Color combination of text and background that make the
text hard to read |
| |
Busy, distracting backgrounds that make the text hard
to read |
|
|
| |
Text |
| |
Text crowding against the left edge |
| |
Text that stretches all the way across the page |
| |
Centered type over flush left body copy |
| |
Paragraphs of type in all caps |
| |
Paragraphs of type in bold |
| |
Paragraphs of type in italic |
| |
Paragraphs of type in all caps, bold and italic all at
once |
| |
Underlined text that is not a link |
| |
Text that is too small to read |
|
|
| |
Links |
| |
Default blue links |
| |
Blue link borders around graphics |
| |
Links that are not clear about where they will take you
to |
| |
Links in body copy that distract readers and lead them
off to remote, useless pages |
| |
Text links that are not underlined so you don’t
know they are links |
| |
Dead links (links that don’t work anymore) |
|
|
| |
Graphics |
| |
Large graphic files that take forever to download |
| |
Meaningless or useless graphic files |
| |
Thumbnail images that are nearly as large as the full-sizes
images they link to |
| |
Graphics with aliasing around the edges (jagged edges) |
| |
Graphics with no alt tables |
| |
Missing graphics, especially missing graphics with no
alt labels |
| |
Graphics that don’t fit on the screen |
|
|
| |
Tables |
| |
Borders turned on in tables |
| |
Tables used as design elements, especially with extra
large borders |
|
|
| |
Blinking and animations |
| |
Anything that blinks, especially text |
| |
Multiple things that blink |
| |
Rainbow rules |
| |
Rainbow rules that blink or animate |
| |
“Under construction” signs, especially of
little men working |
| |
Animated “under construction” signs |
| |
Animated pictures for e-mail |
| |
Animations that never stop |
| |
Multiple animation that never stop |
|
|
| |
Junk |
| |
Counters on pages |
| |
Junky advertising |
| |
Having to scroll sideways |
| |
Too many little pictures on the first page of awards that
don’t mean anything |
|
|
| |
Navigation |
| |
Unclear navigation; overly complex navigation |
| |
Complicated frames, too many frames, unnecessary scroll
bars in frames |
| |
Orphan pages (no links back to where they came from, no
identification) |
| |
Useless page titles that don’t explain what the
page is about |
|
|
| |
Frames |
| |
Frame scroll bars in the middle of a web page |
| |
Multiple frame scroll bars in the middle of a web page |
| |
Narrow frames that make you scroll sideways |
|
|
| |
General design |
| |
Entry page or home page that does not fit within standard
browser window (640x460 pixels) |
| |
No focal point on the page |
| |
Too many focal points on a page |
| |
Navigation buttons as the only visual interest |
| |
Cluttered, not enough alignment |
| |
Lack of contract in color, text, hierarchy of info, etc. |
| |
Pages that look OK in one browser, but not in another |
|
| |
