This is the support deck for an introductory class I made for Junior Designers, Developers, Product and Project Managers to introduce them to the proper way to use wireframes.
I did this class already multiple times at General Assembly (London, UK), TechLab (Santa Clara, CA) and internally in my consulting job.
It's updated to OmniGraffle 6.
Same presentation, with Keynote:
http://www.slideshare.net/folletto/introduction-to-building-wireframes-with-keynote
4. TODAY
1 / Wireframes · how to work with them
2 / Wireframes management · how to use them effectively
3 / OmniGraffle Pro · introduction
90’
Junior/Mid
8. Nielsen/Norman Group:
“Wireframing is a low-cost,
rapid iterative design
technique that offers one of
the best methods for gaining
design insight early”
http://www.nngroup.com/courses/wireframing-and-prototyping/
18. Box
Boxes usually contain a uniform kind of
content, not the individual elements.
However, it’s important to choose the right level
of breakdown to support the discussion.
23. This high level box view is
implicit most of the time, but it’s
incredibly useful when applied
on a number of pages to ensure
consistency and reusability.
N
C
N
Box
N
Box
C
S
Box
Box
Box
Box
Box
Box
S
27. OFTEN EACH
HIGH-LEVEL
BOX CONTAINS
A REPEATING
PATTERN
Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand
Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand
Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand
Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ellam lacustre pulzella.
Expand
Thomas Talker:!
28. TRY WORKING WITH PATTERNS AS
MUCH AS POSSIBLE TO SUPPORT
MEMORY AND LEARNING, MAKING
THE INTERFACE TRUSTWORTHY
29. Let’s build a journey.
Imagine Twitter’s registration process.
38. AGILE APPROACH TO WIREFRAMING
Ask yourself:
What’s the level of detail
I need to communicate
effectively?
HD
DETAILED
HIGH LEVEL
PAPER SKETCH
WHITEBOARDS
NAPKINS
39. Wireframes are made to be thrown away.
They are steps in the process of design.
Only the final one stays... until it gets developed.
40. In other words:
they can be delivered as documentation
but they are not for most of the process
45. WEEKLY ITERATION
Helps with project activities
scoping, clarifies expectations,
supports continuos progress review.
WEEKLY MEETING
Sets formal progress steps to help the
client keeping the pace while being in
touch with the project progress
46. Let’s see an example
PREPARE
The first iteration is
about understanding
the problem.
47. Let’s see an example
WORKSHOP
First wireframes made
collaboratively by the stakeholders
in a workshop, in groups.
WHITEBOARD
48. Let’s see an example
TEST WITH USERS
Take the whiteboards and
formalize them in individual
proposals to be tested.
49. Let’s see an example
REVIEW ALTERNATIVES
In this review propose a few
alternatives refining the solutions
from the workshop.
PAPER SKETCH
50. Let’s see an example
TEST WITH USERS
Yup, again, if it’s possible. Try a
more guerrilla approach maybe.
51. Let’s see an example
REVIEW FIRST DRAFT
Ask explicitly to involve
developers if it didn’t happen
before the review.
HIGH LEVEL
52. 1 ITERATION = No review*
* or review in a different next step (visual design? development?)
59. OmniGraffle is a powerhouse
Wireframes
Interactive
PDFs
From
sketches to
HD prototypes
IA
HTML export
Presentations
Diagrams
Build any PDF
Pixel perfect
60. ...even if it lacks some pieces
No built-in
collaboration
No motion design
61. OMNIGRAFFLE CAN
EXPORT INTERACTIVE
PDFS THAT CAN BE
USED AS PROTOTYPES
·
·
·
·
You can send them via email
You can use them as prototypes
You can use them for testing
They show flows, not stills
69. Let’s sketch Twitter’s wireframe
Global Navigation
User Page
Navigation
User profile
Multimedia
Content of the User
User Stats
Who to follow
suggestions
Tweets
Messages
70. Let’s sketch a single tweet wireframe
Thomas Talker:!
Lorem ipsum gaium sit amet
isciquitur elit in ellam
lacustre pulzella.
Expand