Presentation I made as an introduction to wireframes for first year students of interaction design. www.twitter.com/piksels/

1. Wireframes
Communication & Multimedia Design
Rotterdam University of Applied Sciences
Joel Laumans
CMD Rotterdam | Interaction Design - Wireframes
1

2. Today’s agenda
What are wireframes?
Why use them?
Examples
CMD Rotterdam | Interaction Design - Wireframes
2

3. 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.
CMD Rotterdam | Interaction Design - Wireframes
3

4. CMD Rotterdam | Interaction Design - Wireframes
4

5. Jesse James Garret | The Elements of User Experience
CMD Rotterdam | Interaction Design - Wireframes
5

6. 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
CMD Rotterdam | Interaction Design - Wireframes
6

7. Wireframes are:
A visual representation of an interface; used
to communicate the structure, content,
information hierarchy, functionality, and
behavior of an interface.
CMD Rotterdam | Interaction Design - Wireframes
7

8. Wireframes are:
A visual representation of an interface; used
to communicate the structure, content,
information hierarchy, functionality, and
behavior of an interface.
CMD Rotterdam | Interaction Design - Wireframes
8

9. 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!
CMD Rotterdam | Interaction Design - Wireframes
9

10. Before the design...
you need wireframes
CMD Rotterdam | Interaction Design - Wireframes
10

11. 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?
CMD Rotterdam | Interaction Design - Wireframes
11

12. Types of wireframes
CMD Rotterdam | Interaction Design - Wireframes
12

13. Types of wireframes
Sketches
Quick / experiment
Good for feedback
CMD Rotterdam | Interaction Design - Wireframes
13

14. Types of wireframes
Sketches
Quick / experiment
Good for feedback
Lo-fidelity
Block diagrams
Good for testing flows
CMD Rotterdam | Interaction Design - Wireframes
14

15. Types of wireframes
Sketches
Quick / experiment
Good for feedback
Lo-fi / Content only
Block diagrams
Good for testing flows
Hi-fidelity
Detailed wireframes
Including comments
Describe content & behavior
“Blueprint for final design”
Should be understood without
explanation
CMD Rotterdam | Interaction Design - Wireframes
15

16. Wireframes do not:
represent the visual design
contact graphic elements
convey the brand or identity
CMD Rotterdam | Interaction Design - Wireframes
16

17. 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!
CMD Rotterdam | Interaction Design - Wireframes
17

18. Looks good, right?
CMD Rotterdam | Interaction Design - Wireframes
18

19. 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.
CMD Rotterdam | Interaction Design - Wireframes
19

20. 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.
CMD Rotterdam | Interaction Design - Wireframes
20

21. 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.
CMD Rotterdam | Interaction Design - Wireframes
21

22. 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!
CMD Rotterdam | Interaction Design - Wireframes
22

23. CMD Rotterdam | Interaction Design - Wireframes
23

24. CMD Rotterdam | Interaction Design - Wireframes
24

25. CMD Rotterdam | Interaction Design - Wireframes
25

26. CMD Rotterdam | Interaction Design - Wireframes
26

27. CMD Rotterdam | Interaction Design - Wireframes
27

28. CMD Rotterdam | Interaction Design - Wireframes
28

29. CMD Rotterdam | Interaction Design - Wireframes
29

30. CMD Rotterdam | Interaction Design - Wireframes
30

31. Questions?
CMD Rotterdam | Interaction Design - Wireframes
31

32. Further Reading... Recommended 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 Saffer Omnigraffle
pgs 109 - 113
Windows
About Face 3.0 by Alan Cooper Microsoft Visio
chapter 7
Other possibilities
Adobe Fireworks
Axure
Whichever tool you choose, look online for some
tutorials or resources to help you out!
CMD Rotterdam | Interaction Design - Wireframes
32