Planning Your Layout

When beginning the design of a site it is often a good plan to step away from the computer and sketch a layout using good old paper and pencil. 

Pages should be based on a grid, with space allocated for navigation, headers and footers, body text and whatever other elements will be repeated throughout the site. This sketch will serve as a pattern for the site's appearance and should not change very much, if at all, from page to page.

Once you have decided where everything will go start thinking about your tables, pencil in cell widths that will be required for fixed elements, decide which elements can be included in the page using shared borders or include pages and make a note of this too.

A sketch plan for the layout of the page you are reading for example might look like this:

In the majority of cases using tables is the preferred method of laying out pages, though this is something that may change in the future as browser support for CSS positioning improves. 

Mouse over the image above to see how this sketch could be accommodated in a table layout.

No matter what program or programs you use to create your site you need to have a good grasp of using tables and of how they work. 

These tutorials provide a very good overview of table use:
http://www.outfront.net/tutorials_02/fp_techniques/tables1.htm

Taking this approach means you can essentially have your site designed by creating a single page that can be reused, with perhaps minor modifications, as a template for all the other pages in your site. You need to consider how the various content types of different parts of the site will be accommodated within the design and be sure that it meets the needs of all sections. 

Consistent Design

Consistency is at the heart of good web design and this applies not just to layout but to every aspect of a site. If there are major shifts in the appearance or color of any part of a site it will be assumed by the user to have a meaning. This is fine if you are using it to highlight information or to indicate that the user is in a different part of the site, it can be very confusing otherwise. 

Even where color changes are used to indicate location these changes should have some inbuilt consistency if they are to work. For example the color used in a specific section of a site should be the same throughout that section and/or the color change should be reflected in the navigation bar.

As well as consistency in color, positional consistency is important. Navigation bars, navigation text, location indicators, logos, footer information and so on should be in the same place on each page. The width of margins, the positioning of images within articles, the size of photographs, the amount of space around text and images, the positioning and style of captions for images and so on should also be consistent. 

Think about all these things at the time you are making your original sketch and plan how you will include these elements in various pages.

Using Cascading Style Sheets (CSS) to control as many aspects as possible of the page design is a great help in achieving consistent design. There is an introduction to using CSS here.
http://www.outfront.net/tutorials_02/adv_tech/css1.htm

Design and functionality

Many people, when they sit down to design a site, approach it as though they were creating a work of art. There is a huge temptation to add lots of 'stuff' - elaborate graphics, lots of JavaScript, Java Applets, Flash and so on. However a beautiful site is not always the key to a successful site.

At the forefront of your mind when designing a site should be just two things:

1. Your Visitors: In the majority of cases they want information and they want it now. How gorgeous your site is will not be as relevant to them as long as it loads fast, looks reasonably attractive and makes it easy to the user to evaluate it usefulness to them. A general guideline is that you will lose about one third of your potential visitors if your site takes any more than 10 seconds to load.
2. Search Engines: Many of the features mentioned above can be a block to search engines indexing your site. Search engines do best when presented with good old HTML!
   
   When you are designing always ask yourself what impact anything you plan to add to your site will have on the experience of your visitors and the capacity of search engines to efficiently index your pages.