Your SlideShare is downloading. ×
0
INTRODUCTION TO
BUILDING WIREFRAMES
Davide ‘Folletto’ Casali
NIGHT.EU

UX Designer

Advisor
What do you do?
TODAY
1 / Wireframes · how to work with them
2 / Wireframes management · how to use them effectively
3 / OmniGraffle Pro · ...
PART 1

Wireframes
THE IDEA OF
WIREFRAME COMES
FROM 3D MODELLING

@hjmediastudios
Wikipedia:
“A website wireframe 

is a visual guide 

that represents 

the skeletal framework 

of a website”
Nielsen/Norman Group:
“Wireframing is a low-cost,
rapid iterative design
technique that offers one of
the best methods for...
THERE ARE
DIFFERENT QUALITIES
OF WIREFRAMES
Even if wireframes display a single interface/page
they are less like photos and more like movie stills
WIREFRAMES
AS STORIES

© Ivor Beddoes
@awfulshot
WIREFRAMES
AS STORYBOARDS
FOR INTERFACES

© Ivor Beddoes
DIFFERENT WAYS TO TELL A STORY
frame by frame, drawings
key frames, textual descriptions
key frames, spoken narrative
Even if the storyboard is not visible
it’s still the foundation of wireframes
Wireframes are a static representation
of a dynamic non-linear flow of activity
The wireframe represents also the very first
moment when the project team sees
everything coming together.
Box

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

Boxes usually contain a uniform kind of
content, not the individual elements.
However, it’s important to choose the r...
Logo
Navigation

Box

Box
Content
Box
Let’s wireframe Twitter.
Boxes only.
Global Navigation

User Page

Navigation
User profile

Multimedia 

Content of the User

User Stats

Who to follow
suggesti...
This high level box view is
implicit most of the time, but it’s
incredibly useful when applied
on a number of pages to ens...
TEXT

BUTTONS

Lorem ipsum gaium sit
amet isciquitur elit in
ellam lacustre pulzella.

Button

Box
IMAGES

MORE...

···
Box
Thomas Talker:!
Lorem ipsum gaium sit amet
isciquitur elit in ellam
lacustre pulzella.
Expand
OFTEN EACH
HIGH-LEVEL
BOX CONTAINS
A REPEATING
PATTERN

Thomas Talker:!
Lorem ipsum gaium sit amet isciquitur elit in
ella...
TRY WORKING WITH PATTERNS AS
MUCH AS POSSIBLE TO SUPPORT
MEMORY AND LEARNING, MAKING
THE INTERFACE TRUSTWORTHY
Let’s build a journey.
Imagine Twitter’s registration process.
LOGIN PROCESS
The main steps of the journey

Home

Reg. Form

Confirmation
LOGIN PROCESS
How do we guide the user to the value?

?
Home

Reg. Form

Confirmation

Your Page
LOGIN PROCESS
An e-mail based approach

Home

Reg. Form

Confirmation

Email

Your Page
LOGIN PROCESS
A more direct way to engage the user

Home

Reg. Form

Confirmation

Email

Your Page
LOGIN PROCESS
Review journeys for the edge cases: errors, problems, etc

!
Home

Reg. Form

Confirmation

!
Email

Your Pag...
LOGIN PROCESS
The story is even bigger in reality

Tweet

Third party

Home

Reg. Form

Confirmation

Email

Your Page

Thi...
1 / Wireframes as stories

2 / From boxes to elements
PART 2

Wireframes management
AGILE APPROACH TO WIREFRAMING

Ask yourself:
What’s the level of detail
I need to communicate
effectively?

HD
DETAILED
HI...
Wireframes are made to be thrown away.
They are steps in the process of design.
Only the final one stays... until it gets d...
In other words:
they can be delivered as documentation
but they are not for most of the process
THE INTERMEDIATE STEPS
ARE VALUABLE:
THEY SUPPORT
COMMUNICATION AND
CONSENSUS
AT EACH STEP YOU CAN
· test the journey
· discuss with management
· discuss with technical team
· share with other parties
observe

dot
LOOP

do

think

WORK IN ITERATIONS
This works
from startups to big enterprises
WEEKLY ITERATION
Helps with project activities
scoping, clarifies expectations,
supports continuos progress review.

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

WORKSHOP
First wireframes made
collaboratively by the stakeholders
in a workshop, in groups.
WHITEBO...
Let’s see an example
TEST WITH USERS
Take the whiteboards and
formalize them in individual
proposals to be tested.
Let’s see an example

REVIEW ALTERNATIVES
In this review propose a few
alternatives refining the solutions
from the worksho...
Let’s see an example
TEST WITH USERS
Yup, again, if it’s possible. Try a
more guerrilla approach maybe.
Let’s see an example

REVIEW FIRST DRAFT
Ask explicitly to involve
developers if it didn’t happen
before the review.
HIGH ...
1 ITERATION = No review*

* or review in a different next step (visual design? development?)
2 ITERATIONS = Draft, then feedback, then refine
3 / Wireframes as steps

4 / Iterative approach
PART 3

OmniGraffle Pro
OmniGraffle
Professional
Why Pro?
OmniGraffle is a powerhouse
Wireframes

Interactive
PDFs

From
sketches to
HD prototypes

IA

HTML export

Presentations

D...
...even if it lacks some pieces
No built-in
collaboration

No motion design
OMNIGRAFFLE CAN
EXPORT INTERACTIVE
PDFS THAT CAN BE
USED AS PROTOTYPES
·
·
·
·

You can send them via email
You can use th...
FUNDAMENTALS
select

shape

lines

text

freeform
Let’s try!
Let’s sketch Twitter’s wireframe
Global Navigation

User Page

Navigation
User profile

Multimedia 

Content of the User

U...
Let’s sketch a single tweet wireframe

Thomas Talker:!
Lorem ipsum gaium sit amet
isciquitur elit in ellam
lacustre pulzel...
Let’s sketch Google’s homepage
Let’s sketch Twitter’s homepage
Let’s sketch Dropbox’s homepage
Let’s sketch Wordpress.com homepage
Lots of actions...

SIGN UP

VIDEO
LOGIN

MORE INFO
PROPERTIES: ACTION
1.
2.
3.
4.
5.

Properties panel
Action
Jump elsewhere
Switch to a Specific Canvas
Select canvas
INTERACTIVE PDF
1. File → Export…
2. PDF vector image
3. Entire Document
TIPS
Grouping

Shared Layers

Smart Objects
Grouping
Shared Layers
Smart Objects
SET THE PAGE SIZE IN PX BY
SPECIFYING THE “PX” (OR “PT”) UNIT
BY HAND
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 POS...
REVIEW THE KEYBOARD SHORTCUTS
FROM PREFERENCES TO ADAPT THEM
TO YOUR STYLE.
REVIEW ALSO “KEEP TOOL ACTIVE”.
5 / Basics of OmniGraffle Pro

6 / Grouping, masters, smart objs
“

To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few are able to si...
Thanks.

@Folletto
Introduction to Building Wireframes
Introduction to Building Wireframes
Introduction to Building Wireframes
Introduction to Building Wireframes
Introduction to Building Wireframes
Introduction to Building Wireframes
Introduction to Building Wireframes
Upcoming SlideShare
Loading in...5
×

Introduction to Building Wireframes

12,028

Published on

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.

Published in: Design, Technology
2 Comments
91 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,028
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
477
Comments
2
Likes
91
Embeds 0
No embeds

No notes for slide

Transcript of "Introduction to Building Wireframes"

  1. 1. INTRODUCTION TO BUILDING WIREFRAMES Davide ‘Folletto’ Casali
  2. 2. NIGHT.EU UX Designer Advisor
  3. 3. What do you do?
  4. 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. 5. PART 1 Wireframes
  6. 6. THE IDEA OF WIREFRAME COMES FROM 3D MODELLING @hjmediastudios
  7. 7. Wikipedia: “A website wireframe 
 is a visual guide 
 that represents 
 the skeletal framework 
 of a website”
  8. 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. 9. THERE ARE DIFFERENT QUALITIES OF WIREFRAMES
  10. 10. Even if wireframes display a single interface/page they are less like photos and more like movie stills
  11. 11. WIREFRAMES AS STORIES © Ivor Beddoes @awfulshot
  12. 12. WIREFRAMES AS STORYBOARDS FOR INTERFACES © Ivor Beddoes
  13. 13. DIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions key frames, spoken narrative
  14. 14. Even if the storyboard is not visible it’s still the foundation of wireframes
  15. 15. Wireframes are a static representation of a dynamic non-linear flow of activity
  16. 16. The wireframe represents also the very first moment when the project team sees everything coming together.
  17. 17. Box The minimal visual building block of a wireframe is the box.
  18. 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. 19. Logo Navigation Box Box Content Box
  20. 20. Let’s wireframe Twitter. Boxes only.
  21. 21. Global Navigation User Page
 Navigation User profile Multimedia 
 Content of the User User Stats Who to follow suggestions Tweets Trends Messages
  22. 22. 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
  23. 23. TEXT BUTTONS Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Button Box IMAGES MORE... ···
  24. 24. Box
  25. 25. Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand
  26. 26. 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:!
  27. 27. TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY
  28. 28. Let’s build a journey. Imagine Twitter’s registration process.
  29. 29. LOGIN PROCESS The main steps of the journey Home Reg. Form Confirmation
  30. 30. LOGIN PROCESS How do we guide the user to the value? ? Home Reg. Form Confirmation Your Page
  31. 31. LOGIN PROCESS An e-mail based approach Home Reg. Form Confirmation Email Your Page
  32. 32. LOGIN PROCESS A more direct way to engage the user Home Reg. Form Confirmation Email Your Page
  33. 33. LOGIN PROCESS Review journeys for the edge cases: errors, problems, etc ! Home Reg. Form Confirmation ! Email Your Page
  34. 34. LOGIN PROCESS The story is even bigger in reality Tweet Third party Home Reg. Form Confirmation Email Your Page Third party
  35. 35. 1 / Wireframes as stories 2 / From boxes to elements
  36. 36. PART 2 Wireframes management
  37. 37. 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
  38. 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. 39. In other words: they can be delivered as documentation but they are not for most of the process
  40. 40. THE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS
  41. 41. AT EACH STEP YOU CAN · test the journey · discuss with management · discuss with technical team · share with other parties
  42. 42. observe dot LOOP do think WORK IN ITERATIONS
  43. 43. This works from startups to big enterprises
  44. 44. 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
  45. 45. Let’s see an example PREPARE The first iteration is about understanding the problem.
  46. 46. Let’s see an example WORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups. WHITEBOARD
  47. 47. Let’s see an example TEST WITH USERS Take the whiteboards and formalize them in individual proposals to be tested.
  48. 48. Let’s see an example REVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop. PAPER SKETCH
  49. 49. Let’s see an example TEST WITH USERS Yup, again, if it’s possible. Try a more guerrilla approach maybe.
  50. 50. Let’s see an example REVIEW FIRST DRAFT Ask explicitly to involve developers if it didn’t happen before the review. HIGH LEVEL
  51. 51. 1 ITERATION = No review* * or review in a different next step (visual design? development?)
  52. 52. 2 ITERATIONS = Draft, then feedback, then refine
  53. 53. 3 / Wireframes as steps 4 / Iterative approach
  54. 54. PART 3 OmniGraffle Pro
  55. 55. OmniGraffle Professional
  56. 56. Why Pro?
  57. 57. OmniGraffle is a powerhouse Wireframes Interactive PDFs From sketches to HD prototypes IA HTML export Presentations Diagrams Build any PDF Pixel perfect
  58. 58. ...even if it lacks some pieces No built-in collaboration No motion design
  59. 59. 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
  60. 60. FUNDAMENTALS
  61. 61. select shape lines text freeform
  62. 62. Let’s try!
  63. 63. 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
  64. 64. Let’s sketch a single tweet wireframe Thomas Talker:! Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand
  65. 65. Let’s sketch Google’s homepage
  66. 66. Let’s sketch Twitter’s homepage
  67. 67. Let’s sketch Dropbox’s homepage
  68. 68. Let’s sketch Wordpress.com homepage
  69. 69. Lots of actions... SIGN UP VIDEO LOGIN MORE INFO
  70. 70. PROPERTIES: ACTION 1. 2. 3. 4. 5. Properties panel Action Jump elsewhere Switch to a Specific Canvas Select canvas
  71. 71. INTERACTIVE PDF 1. File → Export… 2. PDF vector image 3. Entire Document
  72. 72. TIPS
  73. 73. Grouping Shared Layers Smart Objects
  74. 74. Grouping
  75. 75. Shared Layers
  76. 76. Smart Objects
  77. 77. SET THE PAGE SIZE IN PX BY SPECIFYING THE “PX” (OR “PT”) UNIT BY HAND
  78. 78. 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.
  79. 79. REVIEW THE KEYBOARD SHORTCUTS FROM PREFERENCES TO ADAPT THEM TO YOUR STYLE. REVIEW ALSO “KEEP TOOL ACTIVE”.
  80. 80. 5 / Basics of OmniGraffle Pro 6 / Grouping, masters, smart objs
  81. 81. “ To complicate is easy, to simplify is hard. To complicate, just add, everyone is able to complicate. Few are able to simplify. Bruno Munari ”
  82. 82. Thanks. @Folletto
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×