Introduction to Building Wireframes
-
Upload
davide-folletto-casali -
Category
Design
-
view
9.181 -
download
0
description
Transcript of Introduction to Building Wireframes
Davide ‘Folletto’ Casali
INTRODUCTION TO BUILDING WIREFRAMES
UX Designer Advisor
NIGHT.EU
What do you do?
TODAY1 / Wireframes · how to work with them 2 / Wireframes management · how to use them effectively 3 / OmniGraffle Pro · introduction
90’ Junior/Mid
PART 1 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 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.
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
Let’s wireframe Twitter. Boxes only.
User Page Navigation
Global Navigation
Multimedia Content of the User
Who to follow suggestions
Trends
User profile
User Stats Messages
Tweets
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
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
1 / Wireframes as stories
2 / From boxes to elements
PART 2 Wireframes management
NAPKINS
WHITEBOARDS
HIGH LEVEL
DETAILED
HDAGILE APPROACH TO WIREFRAMING
Ask yourself: What’s the level of detail I need to communicate effectively?
PAPER SKETCH
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
WORK IN ITERATIONS
do
observe
think
dotL OOP
This works from startups to big enterprises
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
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?
Wireframes
IA
Diagrams
Interactive PDFs
From sketches to HD prototypes
HTML export
Build any PDF
Presentations
Pixel perfect
OmniGraffle is a powerhouse
No built-in collaboration
No motion design
...even if it lacks some pieces
· You can send them via email · You can use them as prototypes · You can use them for testing · They show flows, not stills
OMNIGRAFFLE CAN EXPORT INTERACTIVE PDFS THAT CAN BE USED AS PROTOTYPES
FUNDAMENTALS
select shape lines text freeform
Let’s try!
Let’s sketch Twitter’s wireframe
User Page Navigation
Global Navigation
Multimedia Content of the User
Who to follow suggestions
User profile
User Stats Messages
Tweets
Let’s sketch a single tweet wireframe
Thomas Talker:!Lorem ipsum gaium sit amet isciquitur elit in ellam lacustre pulzella.
Expand
Let’s sketch Google’s homepage
Let’s sketch Twitter’s homepage
Let’s sketch Dropbox’s homepage
Let’s sketch Wordpress.com homepage
SIGN UP
VIDEO
LOGIN
MORE INFO
Lots of actions...
PROPERTIES: ACTION1. Properties panel 2. Action 3. Jump elsewhere 4. Switch to a Specific Canvas 5. Select canvas
INTERACTIVE PDF1. File → Export… 2. PDF vector image 3. Entire Document
TIPS
Shared LayersGrouping 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 POSITION.
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
“
”Bruno Munari
To complicate is easy, to simplify is hard. To complicate, just add,
everyone is able to complicate. Few are able to simplify.
Thanks.
@Folletto