This document provides an introduction to building wireframes. It discusses what wireframes are, different levels of detail in wireframes, and how to approach the wireframing process iteratively. Key points covered include: - A wireframe is a visual guide that represents the skeletal framework of a website. They allow for rapid, low-cost design iterations. - Wireframes can vary in level of detail from high-level box structures to individual page elements. The appropriate level depends on communication needs. - An iterative approach to wireframing involves testing designs with users at each step and refining solutions collaboratively over multiple iterations. Both long-term project planning and short sprint cycles can employ this iterative process. -

1. INTRODUCTION TO
BUILDING WIREFRAMES
Davide ‘Folletto’ Casali

2. UX Redirector Advisor
NIGHT.EU

3. PART I
WIREFRAMES

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

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

6. “Wireframing is a low-cost,
rapid iterative design
technique that offers one of
the best methods for gaining
design insight early”
Nielsen/Norman Group:
http://www.nngroup.com/courses/wireframing-and-prototyping/

7. THERE ARE
DIFFERENT QUALITIES
OF WIREFRAMES

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

9. WIREFRAMES
AS JOURNEYS
© Ivor Beddoes@awfulshot

10. WIREFRAMES
AS STORYBOARDS
FOR INTERFACES
© Ivor Beddoes

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

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

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

14. Let’s build a journey.
ImagineTwitter’s registration process.

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

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

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

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

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

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

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

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

23. 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.
Box

24. Content
Box
Box
Box
Navigation
Logo

25. Some examples

27. Header Image
Navigation
Stats Navigation
Avatar
Profile
Media
Tweet
Tweet
Tweet Filters

29. Invite Friends
Find Friends
Navigation
Pin Pin
Pin
Pin
Pin

30. N N N
C C
S S
Box
Box
Box
Box
Box
Box
Box
Box
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.

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

32. Box

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

34. 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:
OFTEN EACH
HIGH-LEVEL
BOX CONTAINS
A REPEATING
PATTERN

35. TRY WORKING WITH PATTERNS AS
MUCH AS POSSIBLE TO SUPPORT
MEMORY AND LEARNING, MAKING
THE INTERFACE TRUSTWORTHY

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

37. PART II
THE PROCESS

38. Wireframes are made to be thrown away.
They are steps in the process of design.
Only the final one stays... until it gets developed.

39. In other words:
they can be delivered as documentation
but they are not for most of the process

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

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

42. NAPKINS
WHITEBOARDS
HIGH LEVEL
DETAILED
HD
ASK YOURSELF
What’s the level of detail
I need to communicate
effectively?
PAPER SKETCH

43. WORK IN ITERATIONS
do
observe
think
dotL O O P

44. This works
from startups to big enterprises

45. Got 4 weeks?

46. 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

47. Let’s see an example
PREPARE
The first iteration is
about
understanding the
problem.

48. Let’s see an example
WORKSHOP
First wireframes made
collaboratively by the
stakeholders in a workshop, in
groups.
WHITEBOARD

49. Let’s see an example
TEST WITH USERS
Take the whiteboards and
formalize them in individual
proposals to be tested.

50. Let’s see an example
REVIEW ALTERNATIVES
In this review propose a few
alternatives refining the
solutions from the workshop.
PAPER SKETCH

51. Let’s see an example
TEST WITH USERS
Yup, again, if it’s possible. Try a
more guerrilla approach
maybe.

52. Let’s see an example
REVIEW FIRST DRAFT
Ask explicitly to involve
developers if it didn’t happen
before the review.
HIGH LEVEL

53. PROJECT PLAN 2012-11-08
29 OCT 5 NOV
6
12 NOV
14
26 NOV
30
3 DEC 10 DEC
10 14
17 DEC
21
24 DEC 31 DEC
4
7 JAN
11
STRATEGY
PREPARATION
Planning and
data gathering
STRATEGY
Planning workshops &
research
STRATEGY
Campaign and
challenges details
19 NOV
23
UX DESIGN
Creativity and planning
workshops
UX DESIGN
High-level wireframes
and interactions
DESIGN
VISUAL DESIGN
Different proposals for
brainstorming
VISUAL DESIGN
Consolidation of a
single choice
VISUAL DESIGN
Preparation of master
documents
Wireframes Visual layouts
DEVELOPMENT
Sprint 1
CONTENT
Preparation of basic
copywriting
DEVELOPMENT
Sprint 2
CONTENT
Preparation of basic
translations
DEVELOPMENT
Submission launch
DEVELOPMENT
Sprint 3
DEVELOPMENT
DEVELO
Sprint 4
Submission page
COMMUNITY
Launch support
COMMU
Launch s
Submission launch
MARKETING
Moment 1
MARKETING
Strategy development
MARKETING
Strategy development
MARKETING
Strategy development
MARKETING
Strategy development
5
Concept Definition
Campaign Strategy Channel Strategy Content Calendar
KPI Definition
Audience Validation
In this way you
can build clear,
large scale plans.

54. Got 1 week?

55. MONDAY
UNPACK
TUESDAY
SKETCH
WEDNESDAY
DECIDE
THURSDAY
PROTOTYPE
FRIDAY
TEST
THE DESIGN SPRINT

56. Got 10 minutes?

57. 6 Up Idea Generation Technique
1 2 3
4 5 6

58. 1 ITERATION = No review
NEVER.

60. 3 / Choose level of detail
4 / Iterative approach

61. PART III
KEYNOTE
PROTOTYPING BASICS

62. Keynote

63. 1
Setup
pages

65. Choose the size
you need, desktop
or mobile.

66. 2
Build
your journey

67. Add all the
screens of your
journey as slides

68. 2
Build
your screens

70. Welcome
screen

71. Welcome to
Note Taker

72. Add note

73. Add
You have no notes
Create

74. 3
Link
your screens

75. Link
Format → Add Link
Cmd+K

77. 4
Build
your animations

79. MAGIC MOVE
Slide 1 Slide 2
If the same object appears on two pages, it transitions moving and scaling

80. Create new note+

81. |
ADDCANCEL

84. Menu
Home
Write
Profile

85. 5
Test
your wireframe

86. Play

87. 6
Export
your video

88. Record
Play → Record Slideshow

90. 5 / Basics of Keynote prototyping
6 / Basics of Keynote animation

91. “
”
Bruno Munari
To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few are able to simplify.

92. Thanks.
@Folletto
INTENSEMINIMALISM.COM