INMA_A01.QXD

Wodtke (2002) describes a wireframe (sometimes known as a ‘schematic’) as:

a basic outline of an individual page, drawn to indicate the elements of a page, their rela-

tionships, and their relative importance.

A wireframe will be created for all types of similar page groups, identified at the blue-

print (site map) stage of creating the information architecture.

Blueprints illustrate how the content of a web site is related and navigated while a

wireframe focuses on individual pages; with a wireframe the navigation focus becomes

where it will be placed on the page. Wireframes are useful for agencies and clients to dis-

cuss the way a web site will be laid out without getting distracted by colour, style or

messaging issues which should be covered separately as a creative planning activity.

The process of reviewing wireframes is sometimes referred to as storyboarding,

although the term is often applied to reviewing creative ideas rather than formal design

alternative. Early designs are drawn on large pieces of paper, or mock-ups are produced

using a drawing or paint program.

At the wireframe stage, emphasis is not placed on use of colour or graphics, which

will be developed in conjunction with branding or marketing teams and graphic designers

and integrated into the site after the wireframe process.

RESEARCHING SITE USERS’ REQUIREMENTS

Figure 7.7 Example wireframe for a children’s toy site

12–18

months

Popular articles

Become a member

Featured toys

Site search

Home Toys Science of play News Forum

Member login

Ask the experts

Play by age

Types of play

Development

Topics from our forum

6–12

months

3–6

months

0–3

months

18–24

months

2–3

years

3–5

years

Storyboarding

The use of static

drawings or

screenshots of the

different parts of a

web site to review the

design concept with

user groups. It can be

used to develop the

structure – an overall

‘map’ with individual

pages shown

separately.

INMA_C07.QXD 17/5/06 4:23 pm Page 321