Layout Concepts

Header / Body / Footer

As the web has evolved over the years and millions of web sites have been made a standard layout practice has emerged. The header comes at the top of the page, followed by the main content body and a footer at the bottom. Virtually all successful web sites follow this format. There are many reasons to do it like this and failure to do so could easily give you some major design issues later on. Break this standard at your peril!

Screen Resolution

Every computer screen has a screen resolution. This is the number of pixels (or dots) that it can display. These days over 90% of web users have screen resolutions greater than 800x600 pixels. That is more than 800 pixels across the screen horizontally and 600 pixels vertically.

If a web design uses too many pixels horizontally then the user will have to scroll horizontally to see that design. Horizontal scrolling is not natural and is not good! A good web design should have no horizontal scrolling.

If a web design uses too few pixels then it will look small on the computer display and screen space will be wasted. For PCs and laptops, WebPac recommends that web sites are typically designed so that the key content fits in a 1024x768 screen resolution but looks good in higher resolutions. Mobile phones and PDAs of course require a much smaller design dependent on the device and usually require a completely new interface.

Visual Field and Widescreen Layout

What you see through your eyes (your visual field) fits much better into a letterbox/rectangular shape than it does in a square. Old style television screens used a 4:3 aspect ratio which is nearly a square. The square shape does not fill the visual field and is uncomfortable to view. When you go to the cinema the shape of the screen is widescreen and the image fills your visual field.

The key information in your web site should naturally fill the visual field. A widescreen layout for your site will be more visually pleasing for the user. This means options across the top of the screen (not down the left).

Repetition

Many sites repeat the same thing on the same page too many times. For example repetition of the company name or logo. Repetition of the same link many times. Repetition causes clutter and makes the page hard to read. Although sometimes it is unavoidable for certain navigation elements - repetition should be kept to minimum throughout the design.

Top Left to Bottom Right

In the western world we read from top left to bottom right. Your web page should read from top left to bottom right. More important things top left. Less important things bottom right. Typically the company logo goes top left and copyright messages bottom right.