Functional graphic design

See also: Functional graphic design Dynamic context information "Unsafe" colour Compatible, accessible and comfortable

We have used graphic design to convey the current section and the depth within the section. This means that otherwise purely decorative design has been made functional.

Every section is associated with a unique colour, icon shape and text label. (The general site sections have the same colour but have different icons and labels.) Since colour and shape are recognised before text, we consider this combination of visual cues a vast improvement on text-only links.

The following visual elements change for each section. We don't expect visitors to be conscious of all these visual changes but we believe that they enhance navigation by reinforcing the visitor's current position in a site and making it easier to navigate back to previously-visited pages.

1. Header: the sky graphic is colour- and icon-coded,
2. Background: The page background is off-white based on the section colour,
3. Context list: the shortest route of links to the home page is shown as a series of colour-coded links,
4. Headings are colour-coded,
5. Local side navigation elements, such as the vertical line and background colours are colour-coded,
6. The off-site graphic, used to mark off-site links, is colour-coded,
7. Coloured text and backgrounds match the appropriate section colour.

Tab states

The section tabs vary in design according to whether they are clickable and selected. "Clickable" means that it is an active tab and that clicking on it will take you to another page. "Selected" indicates the current section.

Level 1 page (home page)

All section tabs are unselected + clickable.

Text labels are hyperlinked in the dark section colour. Mouseover shows fills in the background colour.

Level 2 page (section)

The current section tab is selected + unclickable.

On a section page, the section's tab is selected (you're in that section) and unclickable (you're on the page the tab would link to). The section tab background is filled in and the text is bold (selected), coloured and unlinked (black).

Level 3+ pages

The current section tab is selected + clickable.

On pages within a section (for example, this page), text label is bold (selected) and linked in the dark section colour (clickable).

Formatting to convey linkability and selectability

The site contains a lot of non-underlined links. Grey is used within a list of links to label groupings (in the side navigation), as labels (in project headers) and unselected text in a list of links (previous services in earlier noteworthy work.

In the project descriptions, shades of grey are used to show relevance; one can search projects by services provided.

The search will result in a page of selected projects, listed in descending order of number of matched services. The number of matches is shown against the list of services in the entry headers.

If an entry matched all the services, this is shown in black, otherwise the number of matches is shown in increasingly lighter shades of grey.

Example: show selected projects with a selection of services.