There are no set rules in web page layout design. Placement of elements such as the page header, navigation bar, buttons, logos, images and even white space are all important in the layout design of your web site.

Graphic Header

In most instances when designing the page layout you will include a header at the top of your page that will be displayed on all the pages of your site. The header will usually include a logo and any key information you would like available to viewers. This header helps maintain a consistent web site style. The header can be eliminated or combined with the navigation bar for more flexibility. Be sure to allow enough room in the design for the information to be placed on each page. To keep your site from becoming too busy, a flashy header and navigation bar are best used without too many additional graphics.

Navigation Bar

The navigation bar is the central nervous system of a web site -- very important if viewers are to find the information they are seeking. The navigation bar includes links, usually in the form of hyper linked (underlined) type or graphic buttons. The main pages of your site must be clearly identified and linked to the navigation bar. The navigation bar should be the same throughout your site to make it more familiar to viewers. You should also include hyper linked text on your page as a back-up to the graphic navigation bar.

Buttons

Buttons can be any shape, size or color, and can contain graphics, clip art, or images. The button can change appearance when the cursor is over or you click on a button. You can also create image slices, where areas of your page display different images when the cursor rolls over a button.

Page Headings

Each page should be clearly identified at the top of the page so viewers know where they are. You can simply change the font, making it larger or bold face, or you can use specially designed page headers using graphics or images.

Text

The text on your page should be easy to read and use the fonts most viewers have in their system. The three most common examples are:.
San-serif: Arial, Helvetica, Verdana
serif: Times, New Times Roman, Georgia,
mono: Courier, New Courier
Body text is easier to read in narrow columns with plenty of room between columns to relieve eye strain.

White space

White space is the area around headers, logos, and images. White space is important to the balance of your design layout. It helps alleviate eye strain by giving the eyes a chance to rest. It also keeps a design from becoming too cluttered. White space does not have to be white.

Logos

Your company logo should be displayed on every page of your site. Try not to vary your logo beyond two different sizes, this will maintain a more consistent style. It is also a good idea to include your address, telephone, fax, etc. at the bottom of each page along with your logo.

Things to consider:

Do you like a navigation bar on the left side, right side or top of the page?

Keep in mind we read from left to right so a right side navigation bar may difficult to locate.

Would you prefer a header and navigation bar combination?

These are a few simple styles of header and
navigation bar combinations.

Would you like a header and navigation bar with an
abstract or freehand style?

Header, navigation bar, and buttons, in any shape, color, and configuration, can provide a really unique style to a web site

Would you like to use type or buttons on your navigation bar?

Do you want buttons that change appearance when the cursor rolls over them?

 

 

Do you want an image to appear when the cursor rolls over the button?

Would you prefer an image that changes appearance when the cursor rolls over the button?