Wireframes

Wireframes

1
Today’s agenda

What are

wireframes? Why

use them?

Examples

Wireframes

2
A lot is
happening
At times the design process can
seem very complicated, a lot of
things are happening at the same
time. Many people from different
disciplines are all working
together (and often
simultaneously) on the same
project.

Everyone has their own role, and

to make a truly good product, the
communication between the
different parties involved has to be
good.

Wireframes

3
Interaction
design?
The task of an interaction
designer will be to primarily
focus on the structure and
skeleton of an interface.

There are many tools that can be

used in this part of the design
process, one of the most
important being wireframes.

Jesse James Garret | The Elements of User Experience

Wireframes

4
 Wireframes are:

A visual representation of an interface;

used to communicate the structure,
content, information hierarchy,
functionality, and behavior of an interface.

Wireframes

5
 Wireframes are:

A visual representation of an interface;

to communicate used structure, content,
the
information hierarchy, functionality,
and of an
interface. behavior

Wireframes

6
Why use
wireframes?
Before making the visual design,
you first make decisions about the
structure, content, layout, etc.
Wireframes are a tool to
communicate these ideas.

“Blueprint for design”

Get everyone on the same

page Prototype for usability

tests

Easier to change a wireframe,

than a design!

Wireframes

7
Before the
design...

you need wireframes

Wireframes

8
Structure
How will the pieces of this site be
put together?

Content
What will be displayed on this site?

Information Hierarchy
How is this information organized
and displayed?

Functionality
How will this interface work?

Behavior
How does it interact with the user?
How does it behave?

Wireframes

9
Types of wireframes

Wireframes

10
Types of wireframes

Sketches
Quick /
experiment Good
for feedback

Wireframes

11
Types of wireframes

Sketches
Quick /
experiment Good
for feedback
Lo-fidelity
Block diagrams
Good for testing
flows

Wireframes

12
Types of wireframes

Sketches
Quick /
experiment Good
for feedback

Lo-fi / Content
only
Block diagrams
Hi-fidelity
Good for testing
Detailed
flows wireframes
Including comments
Describe content &
behavior “Blueprint for
final design”
Should be understood
without explanation

Wireframes

13
This is a bad
wireframe!
Forget visual design

Avoid using color /

gradients

Adding unnecessary
elements makes the
wireframe less powerful,
remember:

Wireframes focus only on

the content and interaction
of the interface!

Wireframes

14
Looks good,
right?

Wireframes

15
Yes,
but:
Don’t use “Lorem ipsum!”

Be realistic as possible, think

about the content that will really
be in the interface.

Many clients don’t know what

“lorem ipsum” is. Try and add
content that will best represent
content that will be placed in
the final interface. Fake text
can be very distracting.

Wireframes

16
Example
1:
This is an example of a hi-fidelity
wireframe for an NOS.nl
concept.

On the left site of the page is the

wireframe. The blue circles are
numbered to refer to the comments
on the right half of the page.

Note: The comments can also be

placed below the wireframe, it is up
to you.

Wireframes

17
Example
2:
Instead of using dots to refer to the
comments, another option is to use
arrows to link the interface elements
to the comments.

Wireframes

18
How to
start?
Start big! Start with the largest parts of
the interface, the frame, header,
footer, etc. Then work you way
through the smaller elements of the
interface. The following slides will
show a quick wireframe build-up.

Final tip!
Remember, your wireframe will be
used by lots of different people
for different purposes:

Designers
Developers
Project leaders
Usability testers
Clients

So be as clear
as you can!

Wireframes

19
Wireframes

20
Wireframes

21
Wireframes

22
Wireframes

23
Wireframes

24
Wireframes

25
Wireframes

26
Wireframes

27
Questions?

Wireframes

28
Further Recommended
Reading... tools
Wireframes Crossplatform
http://userpathways.com/2008/06/26/the-what-when-and- Adobe InDesign
why-of-wireframes/
How to wireframe using InDesign
(PDF) Wireframes - The how and the why http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/
http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/
2008/12/wireframing_using_indesign.zip
2008/12/wireframes_thehowandthewhy_v10.pdf
Mac OSX
Designing for Interaction by Dan Omnigraffle
Saffer pgs 109 - 113
Windows
About Face 3.0 by Alan Microsoft Visio
Cooper chapter 7
Other
possibilities
Adobe Fireworks
Axure
Whichever tool you choose, look online for
some tutorials or resources to help you out!

Wireframes

29