Web users scan rather than read each web page. A consistent visual hierarchy with contrast and a graphic design makes the pages purpose and content obvious at a moment's glance. Information presented below will assist you in laying out your pages to maximize its impact.
........----..Visual Hierarchy
Web users tend to rapidly scan web pages, stopping only if a topic catches their interest. Initially they see only large masses of shape and color and then begin to pick out specific information.
|
.........Contrast is Essential
A dull page of a solid color will fly past the user as a blur. Using contrast Adding contrast will draw the viewer of the web page to important content and bring focus to the page. |
|
Visual Balance
To ensure that your pages load quickly and have the desired impact on the intended audience, use care to apply visual balance. This term refers to the appropriate use of text, links, and graphics.
Consistency
Once you have established the "grid" and layout of your page and established the "graphic theme" apply in consistently throughout the site. In this manner, your users can adapt quickly and the interface will seem more transparent.
Page Dimension
As described on the Screen main page, the physical dimensions of the screen are limited. Try to be aware of page length. If possible, make content of long pages look like separate pages. |
.........................................................................Fold here!................................................Go to Bottom
.........rtical Stratification
Many users choose to scroll up and down web pages. The layout of this page maintains an appropriate appearance if the viewer chooses to scroll. It also presents a complete summary of the desired content in the top half of the page. The "fold here label and the "bottom" anchor links invite the viewer to see the remainder of the page without scrolling. Such a scheme is referred to as vertical stratification.
|
.........Gutters are Essential
The blank space between the column of information on the left of the page and the text information on the right of the screen is referred to as the gutter. It keeps the text of each column from running together. |
|
Tables
Tables allow you to section off areas of text, arrange gutters, and ensure graphic themes are consistent. When using tables, it is customary to set the border width to zero (no border). There are times when borders are necessary but these times are few and far between.
Fixed Width or Flexible
Tables can be made with fixed pixel dimensions (a fixed width table) or as a percentage (flexible width table) of the open window. Because of factors such as monitor size, the unpredictability of word wrapping in various platforms and web browsers, care must be used when contemplating the use of flexible tables. In certain situations, Text could be squished down onto images or other content in an adverse manner.
This space intentionally left blank! :) |
Rev
20-Sep-2004
John Rivoire |
|