wiki_webpagedesign

//Robin Williams// retu​rn

One of the elements of ** good web design ** is a lack of the elements that make bad web design. If you stay away from everything listed on the page about [|dorky web pages,] you've probably got a pretty nice web site. In addition, keep these concepts in mind:

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
 * Navigation is consistent throughout web site
 * Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on
 * Frames, if used, are not obtrusive
 * A large site has an index or site map

**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 800 x 600 pixel space
 * All of the other pages have the immediate visual impact within 800 x 600 pixels
 * Good use of graphic elements (photos, subheads, pull quotes) to break up large areas of text
 * Every web page in the site looks like it belongs to the same site; there are repetitive elements that carry throughout the pages



Below are features that can make a web design look dorky. These are not just my personal opinions, but are ideas I have collected from speaking to groups around the country. Examples of many of these features and more detailed explanations of the problems and solutions are in my book, //The Non-Designer's Web Book,// written with [|John Tollett].

Backgrounds
 * Default gray color
 * Color combinations of text and background that make the text hard to read
 * Busy, distracting backgrounds that make the text hard to read

Text
 * Text that is too small to read
 * 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

Links
 * Default blue links Blue link borders around graphics
 * Links that are not clear about where they will take you 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 . (If you're not going to underline your links, please make darned sure that each link is perfectly clearly a link!
 * Don't make me wander around . with my mouse checking to see if randomly colored text is a link!)
 * Dead links (links that don't work anymore)

Graphics
 * Large graphic files that take forever to load
 * Meaningless or useless graphics
 * Thumbnail images that are nearly as large as the full-sized images they link to Graphics with no alt labels
 * Missing graphics, especially missing graphics with no alt labels
 * Graphics that don't fit on the screen (assuming a screen of 800 x 600 pixels)

Tables
 * Borders turned on in tables
 * Tables used as design elements, especially with extra large (dorky) borders

Blinking and animations
 * Anything that blinks, especially text Multiple things that blink
 * Rainbow rules (lines) Rainbow rules that blink or animate "Under construction" signs, especially of little men working
 * Animated "under construction" signs Animated pictures for email
 * Animations that never stop
 * Multiple animations that never stop

Junk
 * Counters on pages -- who cares Junky advertising
 * Having to scroll sideways (800 x 600 pixels)
 * Too many little pictures of meaningless awards on the first page
 * Frame scroll bars in the middle of a page
 * Multiple frame scroll bars in the middle of a page

Navigation
 * Unclear navigation; over 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

General Design
 * Entry page or home page that does not fit within standard browser window (800 x 600 pixels)
 * Frames that make you scroll sideways
 * No focal point on the page
 * Too many focal points on the page
 * Navigation buttons as the only visual interest, especially when they're large (and dorky)
 * Cluttered, not enough alignment of elements
 * Lack of contrast (in color, text, to create hierarchy of information, etc.)
 * Pages that look okay in one browser but not in another