Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
INTRODUCTION TO
BUILDING WIREFRAMES
Davide ‘Folletto’ Casali
UX Redirector Advisor
NIGHT.EU
PART I
WIREFRAMES
@hjmediastudios
THE IDEA OF
WIREFRAME COMES
FROM 3D MODELLING
“A website wireframe 

is a visual guide 

that represents 

the skeletal framework 

of a website”
Wikipedia:
“Wireframing is a low-cost,
rapid iterative design
technique that offers one of
the best methods for gaining
design insigh...
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 JOURNEYS
© Ivor Beddoes@awfulshot
WIREFRAMES
AS STORYBOARDS
FOR INTERFACES
© Ivor Beddoes
DIFFERENT WAYS TO TELL A STORY
frame by frame, drawings
key frames, textual descriptions
video, 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
Let’s build a journey.
ImagineTwitter’s registration process.
Home Reg. Form Confirmation
LOGIN PROCESS
The main steps of the journey
Home Reg. Form Confirmation Your Page
LOGIN PROCESS
How do we guide the user to the value?
?
Home Reg. Form Confirmation
Email
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
!
!
LOGIN PROCESS
The story is even bigger in reality
Home Reg. Form Confirmation
Email
Your Page
Tweet
Third party Third party
The wireframe represents also the very
first moment when the project team
sees everything coming together.
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 right
...
Content
Box
Box
Box
Navigation
Logo
Some examples
Header Image
Navigation
Stats Navigation
Avatar
Profile
Media
Tweet
Tweet
Tweet Filters
Invite Friends
Find Friends
Navigation
Pin Pin
Pin
Pin
Pin
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 u...
Button
Box
Lorem ipsum gaium sit
amet isciquitur elit in
ellam lacustre pulzella.
TEXT
BUTTONS
IMAGES
···MORE...
Box
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 ga...
TRY WORKING WITH PATTERNS AS
MUCH AS POSSIBLE TO SUPPORT
MEMORY AND LEARNING, MAKING
THE INTERFACE TRUSTWORTHY
1 / Wireframes as stories
2 / From boxes to elements
PART II
THE PROCESS
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
NAPKINS
WHITEBOARDS
HIGH LEVEL
DETAILED
HD
ASK YOURSELF
What’s the level of detail
I need to communicate
effectively?
PAPE...
WORK IN ITERATIONS
do
observe
think
dotL O O P
This works
from startups to big enterprises
Got 4 weeks?
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.
WHITEBOA...
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 workshop...
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 L...
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
...
Got 1 week?
MONDAY
UNPACK
TUESDAY
SKETCH
WEDNESDAY
DECIDE
THURSDAY
PROTOTYPE
FRIDAY
TEST
THE DESIGN SPRINT
Got 10 minutes?
6 Up Idea Generation Technique
1 2 3
4 5 6
1 ITERATION = No review
NEVER.
3 / Choose level of detail
4 / Iterative approach
PART III
KEYNOTE
PROTOTYPING BASICS
Keynote
1
Setup
pages
Choose the size
you need, desktop
or mobile.
2
Build
your journey
Add all the
screens of your
journey as slides
2
Build
your screens
Welcome
screen
Welcome to
Note Taker
Add note
Add
You have no notes
Create
3
Link
your screens
Link
Format → Add Link
Cmd+K
4
Build
your animations
MAGIC MOVE
Slide 1 Slide 2
If the same object appears on two pages, it transitions moving and scaling
Create new note+
|
ADDCANCEL
Menu
Home
Write
Profile
5
Test
your wireframe
Play
6
Export
your video
Record
Play → Record Slideshow
5 / Basics of Keynote prototyping
6 / Basics of Keynote animation
“
”
Bruno Munari
To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few ...
Thanks.
@Folletto
INTENSEMINIMALISM.COM
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Introduction to Building Wireframes (with Keynote)
Upcoming SlideShare
Loading in …5
×

Introduction to Building Wireframes (with Keynote)

35,199 views

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), Santiago (Chile) and internally in my consulting job.

It's updated to Keynote 6.

Published in: Design

Introduction to Building Wireframes (with Keynote)

  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
  26. Header Image Navigation Stats Navigation Avatar Profile Media Tweet Tweet Tweet Filters
  27. Invite Friends Find Friends Navigation Pin Pin Pin Pin Pin
  28. 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.
  29. Button Box Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. TEXT BUTTONS IMAGES ···MORE...
  30. Box
  31. Thomas Talker: Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella. Expand
  32. 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
  33. TRY WORKING WITH PATTERNS AS MUCH AS POSSIBLE TO SUPPORT MEMORY AND LEARNING, MAKING THE INTERFACE TRUSTWORTHY
  34. 1 / Wireframes as stories 2 / From boxes to elements
  35. PART II THE PROCESS
  36. Wireframes are made to be thrown away. They are steps in the process of design. Only the final one stays... until it gets developed.
  37. In other words: they can be delivered as documentation but they are not for most of the process
  38. THE INTERMEDIATE STEPS ARE VALUABLE: THEY SUPPORT COMMUNICATION AND CONSENSUS
  39. AT EACH STEP YOU CAN · test the journey · discuss with management · discuss with technical team · share with other parties
  40. NAPKINS WHITEBOARDS HIGH LEVEL DETAILED HD ASK YOURSELF What’s the level of detail I need to communicate effectively? PAPER SKETCH
  41. WORK IN ITERATIONS do observe think dotL O O P
  42. This works from startups to big enterprises
  43. Got 4 weeks?
  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. Let’s see an example PREPARE The first iteration is about understanding the problem.
  46. Let’s see an example WORKSHOP First wireframes made collaboratively by the stakeholders in a workshop, in groups. WHITEBOARD
  47. Let’s see an example TEST WITH USERS Take the whiteboards and formalize them in individual proposals to be tested.
  48. Let’s see an example REVIEW ALTERNATIVES In this review propose a few alternatives refining the solutions from the workshop. PAPER SKETCH
  49. Let’s see an example TEST WITH USERS Yup, again, if it’s possible. Try a more guerrilla approach maybe.
  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. 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.
  52. Got 1 week?
  53. MONDAY UNPACK TUESDAY SKETCH WEDNESDAY DECIDE THURSDAY PROTOTYPE FRIDAY TEST THE DESIGN SPRINT
  54. Got 10 minutes?
  55. 6 Up Idea Generation Technique 1 2 3 4 5 6
  56. 1 ITERATION = No review NEVER.
  57. 3 / Choose level of detail 4 / Iterative approach
  58. PART III KEYNOTE PROTOTYPING BASICS
  59. Keynote
  60. 1 Setup pages
  61. Choose the size you need, desktop or mobile.
  62. 2 Build your journey
  63. Add all the screens of your journey as slides
  64. 2 Build your screens
  65. Welcome screen
  66. Welcome to Note Taker
  67. Add note
  68. Add You have no notes Create
  69. 3 Link your screens
  70. Link Format → Add Link Cmd+K
  71. 4 Build your animations
  72. MAGIC MOVE Slide 1 Slide 2 If the same object appears on two pages, it transitions moving and scaling
  73. Create new note+
  74. | ADDCANCEL
  75. Menu Home Write Profile
  76. 5 Test your wireframe
  77. Play
  78. 6 Export your video
  79. Record Play → Record Slideshow
  80. 5 / Basics of Keynote prototyping 6 / Basics of Keynote animation
  81. “ ” Bruno Munari To complicate is easy, to simplify is hard. To complicate, just add, everyone is able to complicate. Few are able to simplify.
  82. Thanks. @Folletto INTENSEMINIMALISM.COM

×