Article #1

Successful Web Design Part 1: Layout

By Leta Labuschagne, September 2006.

The key to successful web design is in the planning. Plan the whole website on paper (or a word-processor document) before you start coding the website. Think of the website as an information system with inputs, processes, and outputs.

Goals
1. Why do we need this web site (what is the message, what are the expected business outcomes)? (Business Process model)
2. Who is the target audience and what are their expectations? (Information system Use Case model)
3. What do we know about the audience in general in terms of their skills, ability, and access to the internet (browser versions, bandwidth)?
Group and Prioritise
1. Make a list of all the different bits of information that needs to be conveyed to the website user.
2. Group related items together.
3. Prioritise the groups and the items inside each group - this will begin to give us an idea of the structure of the website and how the information should be presented on the different web pages.
Basic website pages
Different kinds of pages have different jobs to do:
1. Home page - should be welcoming, uncluttered, provide links to key areas of the website (the main groupings). The user must immediately see what this website is all about, but beware of turning the home page into a sitemap!
2. Accessibility page - explains the measures taken on the website to comply with the W3C accessibility guidelines, e.g. what short-cut keys are available to the user, what HTML and CSS standards are followed.
3. Sitemap - create a sitemap for your website. This is a good way of getting search engine spiders to index the whole site, and it is a useful navigation tool for users with disabilities or as an alternative to dynamic menus.
4. Index page - can be useful for very large sites. It is like a sitemap, but provides links in the form of alphabetically listed keywords.
5. Content page - contains the information, feedback forms, etc.
6. Contact Us - an important content page, which should, when appropriate, include a map to the physical location of the business.
7. Form - the user completes the input fields and submits the information or request. The form is driven by JavaScript (for validations) and processed by Perl or some other suitable web programming language.
8. Form follow-up page - once the user submits a form, there must be a follow-up page to assure the user the form has been sent.
9. Privacy policy - if the user is expected to submit personal details, there must be a privacy policy page where he can get assurance about the protection of his privacy.
Plan the website structure
1. Now that we know what pages we need, draw a plan (or compile a document) of all the groupings with the group items that represent individual web pages. This is a refinement of what we did before. Now we decide the detail of what is going to be on each page.
2. The groupings will become the labels on the Main Menu of the website.
3. For each page, make a list of the anchors, other pages, or external sites this page must link to (think of the logical flow of the information).
4. Keep the hierarchy of the structure as shallow as possible - preferably no more than 2 layers deep, but on a large or complex site a third layer can sometimes not be avoided.
5. A note about page length: For a well-designed website, any one page should not be longer than 2.5 screens.
Plan the menu navigation
1. Decide on placement of main menu and sub-menu. What type of menu - plain text, or dynamic drop-down menus? Plain text menus are safer (they don't require JavaScript), but drop-down menus free up more space on screen for the content.
2. If you are using a drop-down menu, it is a good idea to repeat menu text links in the footer. This is an aid both to search engine spiders (indexing robots) and to users with certain disabilities.
3. Decide on how to indicate to the user where he is, e.g. breadcrumbs (quite cumbersome and mostly being phased out), or a simple marker or colour change on the menu and sub-menu.
Plan the design look and feel
1. Keep it simple, clear and uncluttered. Do not make the user think! Everything should be obvious and self-explanatory. Website users generally don't read pages, they scan them. They often don't make optimal choices, they choose the first reasonable option - this is a strategy called satisficing.
2. Decide on horizontal page placement on screen - left-aligned, or floating centred, etc.
3. Decide on width of content - for what screen size (monitor resolution) are you designing? Designing for a 800 pixels wide x 600 pixels high resolution is a good, safe median to use. However, if you are designing for a specific target audience, you need to design for the size sceen the members of that audience will be using, for example large computer screens, or small mobile device screens. Referencing different cascading style sheets for different media means you can accommodate a variety of screen sizes and a printer.
4. Place the business logo preferably at the top left-hand corner of the screen on every page and make this a link to the home page. (This has become a convention amongst webmasters, and users have learnt to expect it.)
5. Decide on the size and placement of a banner for content pages.
6. Add a tag line (slogan, motto) to the home page and possibly the header or banner of all pages.
7. Decide what colours to use - limit it to white plus 2, or 3 at most.
8. Plan the use of colours to provide good contrast. Beware of clashing, garish colours. Keep in mind many users (10 % of all men) are red/green colour blind.
9. The home page (or doorway page) can look different, but all other pages must have the same layout for a consistent user experience.
10. Create a clear visual hierarchy -
  - More important elements must be more prominent.
  - Group logically related elements together visually.
  - Elements should be nested visually to show what is part of what (e.g. with headings and sub-headings).
  - Decide on a style and hierarchy for headings and use these consistently throughout the website.
  - Decide on the placement of the page heading - each page must have a heading. This is important high impact confirmation for the user about where he is.
11. Break pages up into clearly defined areas.
12. Cut down visual noise - pages must not be too busy, with too many elements clamouring for the user's attention. Limit background visual noise - watch out for superfluous colours or lines that distract the user's attention and make it harder to focus on the important message on the page.
13. Does the page need a footer? What information does the footer need to contain? A copyright notice is customary.
14. Decide on font type and size. Verdana is best for web sites, but include sans-serif as the second option in case Verdana is not supported by the browser. Use a scalable font size notation using relative length units such as percent or em.
15. Make it consistently obvious what is clickable and what is not.
16. "Above the Fold" design - place important elements or information on the first screen of a long page.
17. Content - use simple language and be as brief as possible while still conveying the message. Omit needless words. Users have a short attention span and are usually in a hurry. Don't give them too many words to read (unless the web page intends to publish a book or article which, by its nature, is purely text-based).

About the author: Leta Labuschagne studied web design at the University of Otago, New Zealand, and is the Director of Goose Tree Web Design. This article may be freely copied and re-used as long as the author credit and this copyright statement remains intact.