Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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)
Prochain SlideShare
Chargement dans…5
×

sur

Introduction to Building Wireframes (with Keynote) Slide 1 Introduction to Building Wireframes (with Keynote) Slide 2 Introduction to Building Wireframes (with Keynote) Slide 3 Introduction to Building Wireframes (with Keynote) Slide 4 Introduction to Building Wireframes (with Keynote) Slide 5 Introduction to Building Wireframes (with Keynote) Slide 6 Introduction to Building Wireframes (with Keynote) Slide 7 Introduction to Building Wireframes (with Keynote) Slide 8 Introduction to Building Wireframes (with Keynote) Slide 9 Introduction to Building Wireframes (with Keynote) Slide 10 Introduction to Building Wireframes (with Keynote) Slide 11 Introduction to Building Wireframes (with Keynote) Slide 12 Introduction to Building Wireframes (with Keynote) Slide 13 Introduction to Building Wireframes (with Keynote) Slide 14 Introduction to Building Wireframes (with Keynote) Slide 15 Introduction to Building Wireframes (with Keynote) Slide 16 Introduction to Building Wireframes (with Keynote) Slide 17 Introduction to Building Wireframes (with Keynote) Slide 18 Introduction to Building Wireframes (with Keynote) Slide 19 Introduction to Building Wireframes (with Keynote) Slide 20 Introduction to Building Wireframes (with Keynote) Slide 21 Introduction to Building Wireframes (with Keynote) Slide 22 Introduction to Building Wireframes (with Keynote) Slide 23 Introduction to Building Wireframes (with Keynote) Slide 24 Introduction to Building Wireframes (with Keynote) Slide 25 Introduction to Building Wireframes (with Keynote) Slide 26 Introduction to Building Wireframes (with Keynote) Slide 27 Introduction to Building Wireframes (with Keynote) Slide 28 Introduction to Building Wireframes (with Keynote) Slide 29 Introduction to Building Wireframes (with Keynote) Slide 30 Introduction to Building Wireframes (with Keynote) Slide 31 Introduction to Building Wireframes (with Keynote) Slide 32 Introduction to Building Wireframes (with Keynote) Slide 33 Introduction to Building Wireframes (with Keynote) Slide 34 Introduction to Building Wireframes (with Keynote) Slide 35 Introduction to Building Wireframes (with Keynote) Slide 36 Introduction to Building Wireframes (with Keynote) Slide 37 Introduction to Building Wireframes (with Keynote) Slide 38 Introduction to Building Wireframes (with Keynote) Slide 39 Introduction to Building Wireframes (with Keynote) Slide 40 Introduction to Building Wireframes (with Keynote) Slide 41 Introduction to Building Wireframes (with Keynote) Slide 42 Introduction to Building Wireframes (with Keynote) Slide 43 Introduction to Building Wireframes (with Keynote) Slide 44 Introduction to Building Wireframes (with Keynote) Slide 45 Introduction to Building Wireframes (with Keynote) Slide 46 Introduction to Building Wireframes (with Keynote) Slide 47 Introduction to Building Wireframes (with Keynote) Slide 48 Introduction to Building Wireframes (with Keynote) Slide 49 Introduction to Building Wireframes (with Keynote) Slide 50 Introduction to Building Wireframes (with Keynote) Slide 51 Introduction to Building Wireframes (with Keynote) Slide 52 Introduction to Building Wireframes (with Keynote) Slide 53 Introduction to Building Wireframes (with Keynote) Slide 54 Introduction to Building Wireframes (with Keynote) Slide 55 Introduction to Building Wireframes (with Keynote) Slide 56 Introduction to Building Wireframes (with Keynote) Slide 57 Introduction to Building Wireframes (with Keynote) Slide 58 Introduction to Building Wireframes (with Keynote) Slide 59 Introduction to Building Wireframes (with Keynote) Slide 60 Introduction to Building Wireframes (with Keynote) Slide 61 Introduction to Building Wireframes (with Keynote) Slide 62 Introduction to Building Wireframes (with Keynote) Slide 63 Introduction to Building Wireframes (with Keynote) Slide 64 Introduction to Building Wireframes (with Keynote) Slide 65 Introduction to Building Wireframes (with Keynote) Slide 66 Introduction to Building Wireframes (with Keynote) Slide 67 Introduction to Building Wireframes (with Keynote) Slide 68 Introduction to Building Wireframes (with Keynote) Slide 69 Introduction to Building Wireframes (with Keynote) Slide 70 Introduction to Building Wireframes (with Keynote) Slide 71 Introduction to Building Wireframes (with Keynote) Slide 72 Introduction to Building Wireframes (with Keynote) Slide 73 Introduction to Building Wireframes (with Keynote) Slide 74 Introduction to Building Wireframes (with Keynote) Slide 75 Introduction to Building Wireframes (with Keynote) Slide 76 Introduction to Building Wireframes (with Keynote) Slide 77 Introduction to Building Wireframes (with Keynote) Slide 78 Introduction to Building Wireframes (with Keynote) Slide 79 Introduction to Building Wireframes (with Keynote) Slide 80 Introduction to Building Wireframes (with Keynote) Slide 81 Introduction to Building Wireframes (with Keynote) Slide 82 Introduction to Building Wireframes (with Keynote) Slide 83 Introduction to Building Wireframes (with Keynote) Slide 84 Introduction to Building Wireframes (with Keynote) Slide 85 Introduction to Building Wireframes (with Keynote) Slide 86 Introduction to Building Wireframes (with Keynote) Slide 87 Introduction to Building Wireframes (with Keynote) Slide 88 Introduction to Building Wireframes (with Keynote) Slide 89 Introduction to Building Wireframes (with Keynote) Slide 90 Introduction to Building Wireframes (with Keynote) Slide 91 Introduction to Building Wireframes (with Keynote) Slide 92
Prochain SlideShare
Design thinking. Principles and methods to go beyond UX.
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

209 j’aime

Partager

Télécharger pour lire hors ligne

Introduction to Building Wireframes (with Keynote)

Télécharger pour lire hors ligne

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.

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
  • LindaWhite75

    Nov. 26, 2021
  • SwatiPawarchavan

    May. 16, 2020
  • KallieJNielsen

    Oct. 20, 2019
  • santapriysahoo

    Apr. 9, 2018
  • CorrinaMaslanka

    Apr. 5, 2018
  • aadesh

    Mar. 29, 2018
  • EileenWong15

    Sep. 27, 2017
  • wuguanwei

    Aug. 18, 2017
  • ClintonNobrega

    May. 19, 2017
  • DubaiEscortBunniesUAE

    May. 19, 2017
  • cutzandpastes

    Nov. 16, 2016
  • peebrain

    Nov. 4, 2016
  • hidekitomari

    Jun. 19, 2016
  • rappearl

    Jun. 11, 2016
  • irfanzfirdaus

    Jun. 2, 2016
  • barryiam

    May. 27, 2016
  • kamalayoub

    May. 21, 2016
  • wodory

    May. 20, 2016
  • udisa

    May. 19, 2016
  • YassinMohamed7

    Apr. 30, 2016

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.

Vues

Nombre de vues

58 563

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

449

Actions

Téléchargements

442

Partages

0

Commentaires

0

Mentions J'aime

209

×