Upload
davide-folletto-casali
View
30.720
Download
4
Embed Size (px)
Citation preview
“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/
Even if wireframes display a single interface/page they are less like photos and more like movie stills
DIFFERENT WAYS TO TELL A STORY frame by frame, drawings key frames, textual descriptions video, spoken narrative
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.
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
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...
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
Wireframes are made to be thrown away. They are steps in the process of design.
Only the final one stays... until it gets developed.
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
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
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.
MAGIC MOVE
Slide 1 Slide 2
If the same object appears on two pages, it transitions moving and scaling
“
”Bruno Munari
To complicate is easy, to simplify is hard. To complicate, just add,
everyone is able to complicate. Few are able to simplify.