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 / OmniGraf๏ฌe 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 ๏ฌnal 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, clari๏ฌes 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 ๏ฌrst 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 re๏ฌning 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. OmniGraf๏ฌe 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 ๏ฌows, not stills
69. Letโs sketch Twitterโs wireframe
Global Navigation
User Pageโจ
Navigation
User pro๏ฌle
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
84. SET THE PAGE SIZE IN PX BY
SPECIFYING THE โPXโ (OR โPTโ) UNIT
BY HAND
85. ITโS A GOOD IDEA TO KEEP THE ZOOM
AT 100%, TO DESIGN AT THE RIGHT
SCALE. KEEP ALSO THE HEIGHT SHORT
TO FEEL THE SCROLL POSITION.
86. REVIEW THE KEYBOARD SHORTCUTS
FROM PREFERENCES TO ADAPT THEM
TO YOUR STYLE.
REVIEW ALSO โKEEP TOOL ACTIVEโ.
87. 5 / Basics of OmniGraf๏ฌe Pro
6 / Grouping, masters, smart objs
88. โ
To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few are able to simplify.
Bruno Munari
โ