DocB's WebDesign Clinics

Purpose/Audience

Tone/Message

Layout/Design

Site Storyboard

Templates

Great Content

Great Graphics

Multimedia

Universal Design

Quality Control

Reach the World

WebDesign Clinic#3:
Page Layout & Consistent Design Elements

Now that you've decided on a 'tone' for your site (Clinic #2), decisions about page layout and graphic elements become easier.

Page layout: People read web pages differently from print materials: they 'scan' and take 'bites'; they don't like to scroll. Provide bite-sized sections prominently marked and separated, and be consistent across the site (on each page, similar design and layout, similar items in the same place, similar graphics serving similar functions.) Suggestions:

pages just a few screens long with lots of white space
graphics to set off important ideas
paragraphs recast as lists or tables
design for 800x600 and 1024x768 monitors (we used to suggest 640x480, but almost everyone uses higher resolutions now). The more flexible the design, the more browsers it will "fit".

Background: You can choose a white, a colored, or a patterned background for your pages. A white background increases legibility and makes the page elements stand out. Colored and patterned backgrounds can enhance a mood; just don't sacrifice readability, even at lower resolutions.
PLEASE, if you use a background image, set the background color to match the image anyway, to assure that 'no image loading' users can still see your text.

Logo: Design a 'logo' for your site, an identifying graphic that symbolizes your company or message. On the main page, try a large version of this logo as part of a title banner across the top. On 'sub-pages', try a smaller version; the pervasive presence of the logo integrates your site.

Dividers: Either use <HR> or design a graphic rule to set off bite-sized sections of your page (watch the bandwidth!). Both the color and the graphic can reflect the tone of your page, elegant or whimsical, etc.

Navigation aids: You can use the graphical scheme of your dividers to create small, similar buttons to help users get around your site (back, next, home, etc.), or use text links.
Place a 'navigation bar' of buttons or text links on every page in the same place, or put it in an unchanging frame (IMHO, this is one of the few valid uses for frames <G>). Or use an image map. Don't forget to provide text alternatives for 'no image loading' users.

Now that you've made the layout and basic design decisions to tie your site together, you're ready to create a 'storyboard' of your site, a well-planned and easily navigated hierarchy of pages devoted to your message. Coming up NEXT!

NEXT: WebDesign Clinic#4: The Storyboard: Planning a Site Structure