Website Style Guide

Wireframes Standards - Planning

Updated: 23rd July 2001

General

A wireframe is a Word document that defines the content, navigation, objects and rough display of information on a web page will be displayed.

It includes the following information:

• Final body copy
• All headings
• All page titles
• Names, descriptions and alt tags of images
• Menu structure
• Names, function and alt tags for all buttons
• All internal and external links (and URLs where appropriate)

An example wireframe is available.

Wireframes are used to provide the development team with the content and architecture of pages to be built. They also specify information hierarchy and define this using style sheet terms, for example, H1, H2, H3, tertiary text.

A wireframe also suggests the layout of the page in lieu of a creative visual. It will not suggest the graphic design of the page as the aim of the wireframe is to assist in information hierarchy and the visual organisation of information.

Wireframes should state which web page template (corresponding to which sage community) the pages will be built with and specify any deviation from the standard template.

The date and current wireframe version number should be included in the wireframe.

Where possible, note the differences between the current version and the previous version. Also note any outstanding issues and who is dealing with them.

Use text in capitals and enclosed in square brackets to indicate objects on the page (typically text boxes, pictures etc.) - e.g. "Please fill in this box [TEXT BOX]"

Also use square brackets to indicate any comments/instructions/caveats.

Version Control

Begin at version 1.0. For each major set of changes, increase the version number by 0.1. For example 1.1, 1.2, 1.3 etc.

The development team should be sent wireframes with whole version numbers. If version 1.4 is the current, amended version of a wireframe, then increase the version number to 2.0 when it is sent to the development team. This ensures that the developers receive sensible version numbers yet the wireframe creators can still keep track of their changes.

Always save the wireframe with the version number in the filename. For example - products_wireframe_v8.doc.

Graphics

Wireframes should contain:

• A list of all button names
• A list of all graphics that include text
• All alt tags for the above
• Suggested filenames for the above graphics (where applicable)
• If known, list all other graphics to be included on the pages along with their respective alt tags

Headers & Hooks

The text for the page name graphic (the green header with the orange hook text) should be marked up in the wireframe like this:

Header Text Hook text

Menus

Menus are to include the toggle button text (i.e. View Main Menu) Specify which menu it will toggle to show.

Text Colour

Colour is used to identify special content.

Green - Header text
Red - Hook text
Blue - Current page (on menus)
Purple - Example text (where an example of user inputted content is required)
Grey - asp generated (where an example of asp generated content is required)

Highlighting

Highlighted text will have the following meaning: