Developing a web page layout
Web pages are time consuming to write and modify, so it is best to develop the style and layout in a graphic design program such as Macromedia Fireworks or Jasc Paint Shop Pro. These programs allow the use of "layers".
A layer is part of an image that can be moved around and altered independently of other parts of that image. Designing your layout using layers means you are able to add, remove, change, or move things around until they are absolutely right.
Only build the page in html when you are satisfied with the layout in your graphic design program.
Above the fold
Broadsheet newspaper readers tend to be fold their papers vertically to make them easier to handle. This means that the lower half of the page (below the fold) is not visible while they are reading the top half. Web pages are very similar. Only the top of the page will be visible so visitors will need to scroll to see the rest of the page.
The important information on a web page, such as the navigation and important content, should appear above the fold. Visitors won't scroll on the off-chance of finding content. Avoid the mistake of wasting space at the top of the page.
Download time and sequence
If a surfer followed a link to an unfamiliar web site, and no information had appeared within a few seconds, they would be likely to click the back button and try somewhere else. The visitor realizes that they may have to look at several sites before they finding their information, and would not want to waste any more time than is necessary. Showing your visitor a blank screen for 10 seconds is unacceptable.
Organize your page so the important text and navigation are downloaded first. This way the visitor will be able to assess your site to see if it contains the information they are seeking. If the site does contain what the visitor is looking for, they will be more likely to wait for other components to download.
Tables are often the cause of blank screens. The browser will wait for all of the text based information contained within a table to download before displaying any of that information. You will notice the adverts to the right of this page take longer to download than the rest of this page. That's because they are pulled from a different server. If we'd placed them inside a positioning table with the rest of our content then you would have been in for a wait. Use CSS for positioning, or separate your page into smaller tables.
Colors
Colors play an important part in web design. A bright red will stand out and attract attention, but does not set the mind at rest.
Your site will be successful if it relaxes the visitor, and provides a haven from the internet. Avoid large areas of bright color, instead use neutral colors and pastels. Corporate web sites are generally designed in neutral colors, blue being very common. Blue is a calming color.
Page size
Magazine designers have it easy, they know exactly what size their pages are going to be before they start. Web designers have a much tougher time, as the size of a web page will depend on the window size of the visitor's browser.
The convention on the web is to ensure sites work in an 800 pixel wide window. This is the screen resolution commonly used in 14 and 15 inch monitors. Of course, these days a 17 inch or larger monitor is supplied with all new computers, and visitors will probably have 1024 pixel or 1152 pixel screen resolution.
Don't be tempted to work up to this size. It is difficult to read text that goes all the way from one side of the screen to the other in these larger screen sizes, so people with larger screens tend to view the web through a smaller window, maybe 900 pixels wide.
Many sites are fixed at 800 pixels wide. This looks unprofessional. It is much better to allow your site to resize with the screen size. Use percentages to determine the size of your screen rather than pixels.
Next> Usable Navigation
