Introduction to Building Wireframes (with Keynote)
-
Upload
davide-folletto-casali -
Category
Design
-
view
28.352 -
download
3
Transcript of Introduction to Building Wireframes (with Keynote)
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 insight early”
Nielsen/Norman Group:
http://www.nngroup.com/courses/wireframing-and-prototyping/
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 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. Imagine Twitter’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
Your Page
LOGIN PROCESS An e-mail based approach
Home Reg. Form Confirmation
Your Page
LOGIN PROCESS A more direct way to engage the user
Home Reg. Form Confirmation
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
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 level of breakdown to support the discussion.
Box
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
BoxBox
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.
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 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
OFTEN EACH HIGH-LEVEL
BOX CONTAINS A REPEATING
PATTERN
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 developed.
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?
PAPER SKETCH
WORK IN ITERATIONS
do
observe
think
dotL OOP
This works from startups to big enterprises
Got 4 weeks?
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
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.
WHITEBOARD
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.
PAPER SKETCH
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 LEVEL
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
14 JAN
18
21 JAN
25
28 JAN
1
4 FEB
STRATEGY
PREPARATIONPlanning anddata gathering
STRATEGYPlanning workshops &research
STRATEGYCampaign and challenges details
19 NOV
23
11 FEB 18 FEB 25 FEB 4 MAR 11 MAR 18 MAR 25 MAR 1 APR 8 APR 15 APR 22 APR 29 APR
UX DESIGNCreativity and planningworkshops
UX DESIGNHigh-level wireframes and interactions
DESIGN
VISUAL DESIGNDifferent proposals for brainstorming
VISUAL DESIGNConsolidation of a single choice
VISUAL DESIGNPreparation of master documents
Wireframes Visual layouts
DEVELOPMENTSprint 1
CONTENTPreparation of basic copywriting
DEVELOPMENTSprint 2
CONTENTPreparation of basic translations
DEVELOPMENTSubmission launch
DEVELOPMENTSprint 3
DEVELOPMENT
DEVELOPMENTSprint 4
DEVELOPMENTFinal QA and testing
Submission page Ready
DEVELOPMENTRelease
Internal Launch
EXECUTION
COMMUNITYLaunch support
COMMUNITYLaunch support
Submission launch Voting starts Challenges start
AWARENESS
COMMUNITYLaunch support
COMMUNITYSubmission support
COMMUNITYSubmission support
COMMUNITYSubmission support
COMMUNITYVoting support
COMMUNITYVoting support
COMMUNITYChallenge anticipation
COMMUNITYChallenge execution
COMMUNITYChallenge execution
COMMUNITYChallenge execution
COMMUNITYChallenge execution
MARKETINGMoment 1
MARKETINGMoment 2
MARKETINGMoment 3
MARKETINGMoment 5
MARKETINGMoment 4
MARKETINGMoment 6
MARKETINGMoment 7
COMMUNITYChallenge execution
Voting ends
MARKETINGStrategy development
MARKETINGStrategy development
MARKETINGStrategy development
MARKETINGStrategy development
5
Closing evaluation
Concept Definition
Campaign Strategy Channel Strategy Content Calendar
KPI Definition
Audience Validation
In this way you can build clear, large scale plans.
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 toNote Taker
Add note
Add
You have no notes
Create
3
Link your screens
LinkFormat → 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
RecordPlay → 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 are able to simplify.