Introducing fast-track wire-framing to organise the layout of your website

Wire-framing is a popular tool for web designers as it gives a visual guide to the graphic designer and strongly suggests the layout and placement of fundamental design elements.

It also maintains design consistency between the graphic design and development of the website.

Wire-framing got its name from the method artists use to create a sculpture by shaping material around a wire skeleton. Likewise, wire-framing for a website is the creation of the skeleton layout to shape the graphic design.

Using this wire-framing technique, you will be able to outline each page type on your website and ensure that all the required elements are present and integrated to give an aesthetic design.

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 wondering whether pieces are missing.

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 design 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.

List the different page styles you may require.

Typical examples are:

• The homepage: the main launchpad into your website
• The category page: the corridor of choices
• The generic page: general content/information
• The special page: special content/information
• The form page: data entry
• The product page: product information

How to Design the layout of each page style

Creating Information Islands

Use the concept of information islands to group elements together to form distinct areas on each page.

Examples of information islands are:

• The header
• The horizontal menu
• The left vertical menu
• The search box
• The news area
• The headline area
• The main body area
• The minor content items (summary / proof / call-to-action)

Use frames to group the information islands. Frames act as barriers. They keep things in and keep things out and enhance readability

Use space to give resting places for the eye. Sites with organised areas will feel less cramped, less confusing and less overwhelming if there is an appropriate amount of space between the frames.

Fixed or Variable Width?

Determine whether you want fixed width or variable width.

Variable width will expand to the size of the viewing window and, if used correctly, gives a user the ability to control how much window space to set to give maximum readability. In practice this is not used as most people expand their web browser to maximum anyway. The disadvantage of variable width is that the images on the page will be fixed width and hence may become disjointed when the window is expanded beyond the width the designer (ie. you) intended.

If you choose fixed width, decide whether you want 800px or 1000px or more. As most PC screens are at least 1024 pixels wide, modern websites are adopting 1000px fixed widths to take advantage of the available space. The advantage of fixed width designs is that the designer can ensure both horizontal and vertical alignment is maintained and the margins between the elements will remain fixed.

Unless you have a specific reason, BusinessWebFactory recommends 1000px fixed width designs.

Vertical alignment

Vertically, split the page into the chosen number of columns. The table below demonstrates typical pixel widths used by most professional looking websites:

3 and 9 column pixel widths

Adapted for 4 columns

Adapted for 5 columns

Using the 5 column arrangement, you can join adjacent columns to create many variations. For example you could join columns 2&3 or 3&4 to create a modified 4 column site with larger middle columns.

TIP:

Using the photographers 'rule of thirds' principle, (align features on the intersection of the boundaries of the three columns and three rows) of you frame the features on your website by either positioning a column that crosses a 'rule of third' column, or use strong colours or styling to accentuate the column padding.

Horizontal alignment

Horizontally, split the page up into header, body and footer.

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.

Summary

Analyse your requirements and decide on what is needed. Create a design you are happy with and fulfils those requirements. Make sure all the information is available to handover to your graphic designer and your developer – even if it is for yourself.

Download the Design Questionnaire here

Call to Action

Sign-up to BusinessWebFactory today and get the first 30 days FREE