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 [Link]
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
[Link] Adobe InDesign
why-of-wireframes/
How to wireframe using InDesign
(PDF) Wireframes - The how and the why [Link]
[Link]
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