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

1. INTRODUCTION TO
BUILDING WIREFRAMES
Davide ‘Folletto’ Casali

2. NIGHT.EU
UX Designer
Advisor

3. What do you do?

4. TODAY
1 / Wireframes · how to work with them
2 / Wireframes management · how to use them effectively
3 / OmniGraffle Pro · introduction
90’
Junior/Mid

5. PART 1
Wireframes

6. THE IDEA OF
WIREFRAME COMES
FROM 3D MODELLING
@hjmediastudios

7. Wikipedia:
“A website wireframe
is a visual guide
that represents
the skeletal framework
of a website”

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/

9. THERE ARE
DIFFERENT QUALITIES
OF WIREFRAMES

10. Even if wireframes display a single interface/page
they are less like photos and more like movie stills

11. WIREFRAMES
AS STORIES
© Ivor Beddoes
@awfulshot

12. WIREFRAMES
AS STORYBOARDS
FOR INTERFACES
© Ivor Beddoes

13. DIFFERENT WAYS TO TELL A STORY
frame by frame, drawings
key frames, textual descriptions
key frames, spoken narrative

14. Even if the storyboard is not visible
it’s still the foundation of wireframes

15. Wireframes are a static representation
of a dynamic non-linear flow of activity

16. The wireframe represents also the very first
moment when the project team sees
everything coming together.

17. Box
The minimal visual building block
of a wireframe is the box.

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.

19. Logo
Navigation
Box
Box
Content
Box

20. Let’s wireframe Twitter.
Boxes only.

22. Global Navigation
User Page
Navigation
User profile
Multimedia
Content of the User
User Stats
Who to follow
suggestions
Tweets
Trends
Messages

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

24. TEXT
BUTTONS
Lorem ipsum gaium sit
amet isciquitur elit in
ellam lacustre pulzella.
Button
Box
IMAGES
MORE...
···

25. Box

26. Thomas Talker:!
Lorem ipsum gaium sit amet
isciquitur elit in ellam
lacustre pulzella.
Expand

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.

30. LOGIN PROCESS
The main steps of the journey
Home
Reg. Form
Confirmation

31. LOGIN PROCESS
How do we guide the user to the value?
?
Home
Reg. Form
Confirmation
Your Page

32. LOGIN PROCESS
An e-mail based approach
Home
Reg. Form
Confirmation
Email
Your Page

33. LOGIN PROCESS
A more direct way to engage the user
Home
Reg. Form
Confirmation
Email
Your Page

34. LOGIN PROCESS
Review journeys for the edge cases: errors, problems, etc
!
Home
Reg. Form
Confirmation
!
Email
Your Page

35. LOGIN PROCESS
The story is even bigger in reality
Tweet
Third party
Home
Reg. Form
Confirmation
Email
Your Page
Third party

36. 1 / Wireframes as stories
2 / From boxes to elements

37. PART 2
Wireframes management

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

41. THE INTERMEDIATE STEPS
ARE VALUABLE:
THEY SUPPORT
COMMUNICATION AND
CONSENSUS

42. AT EACH STEP YOU CAN
· test the journey
· discuss with management
· discuss with technical team
· share with other parties

43. observe
dot
LOOP
do
think
WORK IN ITERATIONS

44. This works
from startups to big enterprises

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?)

53. 2 ITERATIONS = Draft, then feedback, then refine

55. 3 / Wireframes as steps
4 / Iterative approach

56. PART 3
OmniGraffle Pro

57. OmniGraffle
Professional

58. Why Pro?

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

62. FUNDAMENTALS

65. select
shape
lines
text
freeform

68. Let’s try!

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

71. Let’s sketch Google’s homepage

72. Let’s sketch Twitter’s homepage

73. Let’s sketch Dropbox’s homepage

74. Let’s sketch Wordpress.com homepage

75. Lots of actions...
SIGN UP
VIDEO
LOGIN
MORE INFO

77. PROPERTIES: ACTION
1.
2.
3.
4.
5.
Properties panel
Action
Jump elsewhere
Switch to a Specific Canvas
Select canvas

78. INTERACTIVE PDF
1. File → Export…
2. PDF vector image
3. Entire Document

79. TIPS

80. Grouping
Shared Layers
Smart Objects

81. Grouping

82. Shared Layers

83. Smart Objects

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 OmniGraffle 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
”

89. Thanks.
@Folletto