A01 chaf6542 06 se fm indd

Card sorting or web 

classification

The process of arranging 

a way of organising 

objects on the website in 

a consistent manner.

Blueprints

Show the relationships 

between pages and other 

content components.

Wireframes

Also known as 

‘schematics’, a way of 

illustrating the layout of an 

individual web page.

M11_CHAF6542_06_SE_C11.indd   552

7/23/14   1:26 PM

---

553

Chapter 11  Analysis and design

Figure 11.16

Site structure diagram (blueprint) showing layout and relationship between pages

Postcode search results

Online retailer list

Overview and article listing

Home

Members’ login

Members’ home page

Members benefits

Site search

Registration form

Confirmation (email sent to user)

0–3 months

3–6 months

6–12 months

12–18 months

18–24 months

2–3 years

3–5 years

On successful login

Article

Email page to a friend

Post a comment (members only)

Printer friendly version

View related videos (members only)

Browse toys by age range

Toys

Email page to a friend

Printer friendly version

Product listing

Product details

Browse toys by type

Retailers

Offers

Research & Development

Science of play

Testing

Psychology

View answer

Ask the experts

Post question

Forum

News

Either a description of a specific

play activity or an editorial

article.

Contains list of related articles

and related toys

‘Sign up to receive

similar articles by

email’

About play for this age range

List of articles grouped by topic

List of activities for this age range

‘Become a member

to receive product

updates’

‘Become a member

to redeem vouchers’

Play by age

M11_CHAF6542_06_SE_C11.indd   553

7/23/14   1:26 PM

---

554

Part 3  Implementation

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 blueprint 

(site map) stage of creating the information architecture. A wireframe focusses on individual 

pages; the navigation focus becomes where it will be placed on the page.

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 towards the end of the wireframe process. According to Chaffey and 

Wood (2005), the aim of a wireframe will be to:

● 

Integrate consistently available components on the web page (e.g. navigation, search boxes).

● 

Order and group key types of components together.

● 

Develop a design that will focus the user on to core messages and content.

● 

Make correct use of white space to structure the page.

● 

Develop a page structure that can be easily reused by other web designers.

Storyboarding

The use of static 

drawings or screenshots 

of the different parts of 

a website to review the 

design concept with user 

groups.

Figure 11.17

Example wireframe for a children’s toy site

12–18

months

Popular articles

Become a member

Featured toys

Site search

Home

Toys

News

Forum

Science of play

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

M11_CHAF6542_06_SE_C11.indd   554

7/23/14   1:26 PM

---

555

Chapter 11  Analysis and design

Common wireframe or template features you may come across are:

● 

Navigation in columns on left or right and at top or bottom.

● 

Header areas and footer areas.

● 

‘Slots’ or ‘portlets’ – these are areas of content such as an article or list of articles placed 

in boxes on the screen. Often slots will be dynamically populated from a content manage-

ment system.

Slots on the home page may be used to:

● 

Summarise the online value proposition

● 

Show promotions

● 

Recommend related products

● 

Feature news, etc.

● 

Contain ads.

Wireframes are then transformed into physical site design