Guideline 5
Design Pages That Are Easy To Use And Attractive

Page Organization
Two-Column Grid below the Banner
Three-Column Grid below the Banner

Almost all web pages are created by using a table that form grids.  See sample grids:
492-493

Like your newsletter, pay attention to visual cues that help readers see information that is related.  Use cells/tables to construct hierarchies and organizational patterns.
  • use larger type for the more major item
  • put the larger item further to the left by indenting less major ones
  • use bold for the more major items
  • use more prominent color for the more major items

What is Loading Time?

  • the time it takes to transmit a site's web page files across the Internet from the server that hosts the site to a reader's computer
  • the time it takes the reader's computer to interpret the files into what the reader sees in his or her browser window

Limit the Time

  • where possible use text rather than images
  • limit the number of images you use
  • keep images small and practicable
  • compress files
  • reuse same images on different pages
  • break large tables into smaller ones

Make Text Easy to See

  • use typefaces easy to read on screen
  • use dark fonts with light backgrounds to produce contrast
  • use large enough text
  • avoid wild intricate backgrounds that make it difficult to pick out the text
  • avoid italics
  • present information in chunks (keep paragraphs short, use white space to separate text and blocks of text.
  • some sources say that only about 30% of the page should be text
  • edit text for conciseness
  • use plenty of headings
  • limit the scrolling of your page
  • always avoid horizontal scrolling

examples of bad design:
http://www.hrodc.com/
http://www.dokimos.org/ajff/
http://www.wetestit.com/
http://www.saltinstitute.org/
http://www.gogofrog.com/vtrcomau/
http://www.youtube.com/watch?v=sOKDgrWSsTc
 

Making Your Page Attractive

  • use good color schemes (not bright fluorescent colors)
  • be careful with templates
  • avoid the use of distorted images
  • use tables and cells to help you move items on your page and to create cohesion

http://www.rogerart.com/
 

next>