What do you think makes a good website? Complete the questionnaire to help quantify and qualify your decisions. Decide on 3,4 or 5 column width styling. Fixed or variable width? Cool or warm colours? Lifestyle or strongly product based photography?

Use wireframe layout design for homepage and inner page layouts. This will ensure that all the important sections decided at the analysis phase have been included.

For navigation, design a menu based on available and anticipated content you intend to write and how you plan to inform or persuade the visitor to guide them to the desired call to action.

1) Perform a design questionnaire to define your opinions on what makes a good website

The questionnaire will help you make decisions on the styling of your website. This will be based on likes and dislikes of other websites you use. The aesthetics of your website will be the collection of individual choices made by you. This means that although you will not please everyone, at least you will be happy with it!!

2) Choose your colours

Using the colour ranges based on your existing logo and corporate style guides will help with consistency. Even if you are constrained by choice of colours, you still have control over the volume of colour and where you place complementary and contrasting colours.

Start by breaking down the layers of your website into background, framing, navigation and text. The background layer contains the base canvas colours onto which the layers are added. The framing layer contains the borders, separators, spacers and lines that split your website into sections. The navigation and text layer contains the colours for any text. This includes headlines, body text, menus and navigation links.

The style of your website will determine the volume of colour you use. If you want a heavy frame style website with lots of borders then the colour of your frames will control the overall mood. A good example is use of dark blue for framing of the website for corporate or engineering websites. Alternatively, a contemporary website will have very light framing and use lots of white-space and have thin grey lines as separators.

Your colour choices will affect the mood of your design. If you have some flexibility over the choice of colours, analyse a colour wheel and choose colours based on the following:

Choose whether you want a warm or a cool colour range to predominate:

- warm colours are: red-purple, red, red-orange, orange, yellow-orange, yellow

- cool colours are: purple, blue-purple, blue, blue-green, green, yellow-green

Use neutral colours to balance the site. These will work with any colour range:

• creams and beige
• black and white
• grey tones

By selecting colours from one side of the colour wheel, you’ll get a consistent look and you can then choose an accent colour from the opposite side of the wheel for highlights, offers or navigation.

For each layer, choose a major colour, a minor colour and an accent colour. Experiment with using neutral colours and varying the intensity and gradation of the colours to determine the best combination when putting the layers together.

3) Consider what elements are required for your homepage and inner pages

Your website is like a jigsaw puzzle. It can be presented to your visitors completed with all pieces present and correct, or in a jumbled mess leaving your visitors with no idea whether all the pieces are there.

Each jigsaw piece represents an element or section of information. The essential corner pieces would be the core information, the edges would be the menu and other important information and the inner pieces would be the content. The objective of a great design then, is to place your chosen elements in the right place to ensure your visitors can see the whole picture and easily navigate to all aspects of your site.

As the pieces fit together, it will become obvious if any pieces are missing. Likewise with a visitor to your website, as they become attracted to your products or services, any missing information will frustrate them and you will probably lose them.

From the analysis phase, you will know the core areas of your business, the main 2,3 or 4 customer types and what makes you different. Use the results from your marketing analysis to decide what categories and headlines are required. These will be your core information elements.

As well as content, list all the features you wish to include in your website. This could be news and events, special offers, fact sheets, reports, online features such as calculators and tools to help the visitor to make decisions. These will be your feature elements.

List and prioritise information and feature elements and decide what needs to be on the homepage, and what needs to be on the inner pages.

4) Design the layout of each page style

Split your design into boxes to include all aspects of the analysis phase. This is known as wireframe design, taken from the concept of graphic artists using a wireframe model before filling in the detail of their images.

This wireframing technique is how you decide where each element should reside. Horizontally, split the page up into header, body and footer. Vertically, split the page into the chosen number of columns.

Within the header, consider the following elements:

• Logo
• contact details such as telephone, fax, email address
• Strapline
• corporate imagery or slideshow of products or services in action
• Main horizontal menu
• Search form

Within the body, allocate space for the main areas:

Left Column:

• Search form
• Enquiry form
• Vertical menu

Central column(s):

• Page Title
• Headline
• Body copy
• References
• Category images

Right Column:

• Offers
• News & events
• Features (poll, calculator, calendar, etc)
• summary
• Case studies
• Call to action

Footer:

• Copyright assertion
• Accreditations and certificates (eg PROTX and SSL certificate)
• Registered address / company details
• Horizontal Footer menu

Please review our case studies for examples.

5) Design the menu based on your required content and design decisions made at the analysis phase

The menu system you design should be seen as the doorways into the detail of your website. There are no hard and fast rules for creating a menu, but here are a few guidelines:

1. Build your website with a horizontal menu along the top, and at least one vertical menu – either on the left and/or the right

The horizontal menu should be generic, simple and help the visitor get to the main categories of your website. The horizontal menu should be static throughout the site – i.e. not change on every page.

Example:

HOME | OUR COMPANY | OUR PRODUCTS | NEWS | OFFERS | HELPDESK | CONTACT US

The vertical menu should be specific, hierarchical and detailed to help to visitor navigate back and forth to the specific pages. Consider a static vertical menu with collapsible categories. This is generally accepted as the easiest style of menu to navigate. However, it is your design and you can have dynamic menus different to every page if you feel this is right for your website.

Example:

HOME
ABOUT
CATEGORY 1
- subcat1.1
-- item1.1.1
-- item1.1.2
CATEGORY 2
- subcat2.1
-- item 2.1.1
CATEGORY 3
HELPDESK

2. Consider using additional categories not displayed on the menu to group your content

Do not be too concerned that every page is not accessible from the menu. The consequences would be that your menu would be ever changing and eventually become unmanageable.

Instead, choose 3 to 4 main categories, and their associated subcategories, and build in as many other categories as you like that can be linked into these main categories as ‘related items’. The ‘related items’ can be an additional menu or list of links displayed in the right hand column.

6) Build in navigation links based on information architecture. Information Architecture is concerned with how the pages read, not necessarily how they are presented as attractive images

The web is active, not passive. The visitor is constantly making decisions on what to read, what to search. Information architecture is designed to support these decisions.

The information on your website is also time-sensitive. Most visitors are impatient and will give up when the desired information is missing or hard to find.

Therefore words, not images are the building blocks for successful websites. The common problem that is encountered with web design that is constrained by graphic design principles is that it inhibits the process of design based on information.

Use information architecture to help guide your visitors and keep them interested and informed at all times. What this means is that you must design each page with a purpose in mind and have links available that take the visitor to the next step in their line of enquiry.

This can be achieved by having a related links section, a reference section and easy to see links to the main areas of the site.

7) Use information architecture to control the flow to the desired result – the enquiry form

Consider information architecture at work in a supermarket. By carefully designing the navigability of the store, it can make a significant impact on sales. In a typical supermarket, the everyday necessities such as milk are hidden in the middle of the store, the beer and wine are far away at the back, and the wonderful smell of fresh bread from the site bakery is also at the back.

In the supermarket, your path has been decided for you by persuasive techniques that encourage you to steer yourself around the special offers and luxury goods to get to the products you came in to buy. Whenever you go shopping, the chances are that you’ll go home with more than you came for – and be glad of it!

In order for you to create an effective information architecture, perform a customer analysis on your business. You can then determine and prioritise the benefits you offer. Customer analysis assumes the role of the customer and determines the responses required for anticipated questions or requirements.

Your collection of written articles will be a combination of informative and persuasive copy. If you have an ideal path set for your visitors, then whenever they steer away from this path, you can persuade them back using persuasive articles with appropriate links that help to navigate them to your objective end-point ie. the enquiry form.