What the
wireframe?
A pragmatic point of view

Hi, I’m Jason Robb
Tweeting today?
@jasonrobb #wtwf

MyHappyPlanet
• Start-up company
• Wearer of many hats
• Design of: UX, UI, IA,
IxD, etc...

Why listen to me?
• Made a fair share of
wireframes.
• A few methods. Not all.
• You’ll learn something!
(Even if it is what not to do, I win!)

Note: I have no
idea what I’m
doing up here.
Throw me a bone. Ask me questions!

What are wireframes?
Language International Purpose of this document: Created on Tue Feb 17 2009
Modified on Wed Feb 18 2009
This wireframe shows the redesigned content on our home page. Is this the right
Wireframe: Home page Created by Jason Robb
content? The presentation will change, the layout is a bit cramped, but that will be
adjusted later. Shown below is the home page MINUS the header, navigation and footer. wf-HomePage2.gra e
Notes
1 Clear, concise H1 & Tour link
Find language courses A) Pending final revision, this is our mission statement
1.A
packed into 7 words or less.
B) Take the tour - maybe not the best copywriting.
Photo of a city or person
at the best schools
Something to this e ect. The people that \"get it\" will find
the search form, destinations, or special courses below.
2 Triple play
Take the tour >
1.B Three great things that we do that makes us stand apart
from out competition. Icons are either already made or
need minor tweaking to fit.
3
Easily compare multiple Free student counseling Low prices guaranteed Mini-search got minified
2 courses & schools No AJAX . Why? It's complicated and redundant. The
Icon Icon Icon If you find a cheaper price
Our student advisors are original design was apart of a larger (now extinct) UX.
We have thousands of somewhere else we'll
knowledgeable, friendly,
courses, all at high quality No duration - it isn't something people think about from
match it!
and want to help you find
the start. It's important. But I'd be willing to bet that data
schools. the perfect match. Price matching policy shows that nobody adjusts it from the home page
Search courses now Learn more about us (reference needed, lil help Mike?).
4 Destination table
List all locations in every language we o er. These links
Find a course Study abroad destinations Summer courses
5
3 4 go to our SERP. If they click \"USA\", then we show them
the default search for all cities in the USA, intensive
Study in sunny Boston USA, courses only, for an duration.
Language
Study English where the grass is greener 5 Specialty courses
Select a language and the air is cleaner. These won't be blue links, but they'll be obviously
Boston New York Los Angelos
USA clickable. Presentation withstanding, ideally, these clicks
Country City
Business courses send our users to SERP for these course types. Until
then, we'll push them to our contact form. (See notes on
San Antonio Pittsburgh Baltimore
Select a country
Navigation paths.)
Your boss will love you and
want to give you a raise
City Nomans Someplace Lightville
immediately.
Land
Select a country
Kids courses
UK London Cambridge Berkshire
Search courses Send your kids to Italy to
work like slaves for 6 weeks.
Study Spanish

What are wireframes?
• Basis for discussion
• Give visible form and
structure to info
architecture
• Cheap to make

How abstract
ideas become
concrete designs

Why use them?

Why use them?
• Developers: How is it supposed
to work?
• Business: Do we understand the
business goals?
• Progress check: Are we on the
right track?
• Discussion: Get people talking
about the UI.

When are
they used?

Whenever an idea
needs to have form
See it, test it, iterate.

New product design
Before visual design &
after structural design
© Jesse James Garrett
http://www.jjg.net/elements/

Existing
product?
Any time the UI needs
improvement

Types of wireframes
• Fidelity (high or low)
• Medium (paper or digital)

“Designers should choose
whichever medium and
level of fidelity suit their
practical needs and
design goals...”
High-fidelity or low-fidelity, paper or digital?
Miriam Walker, 2002
http://dub.washington.edu:2007/projects/fidelity/pubs/Walker_HFES_2002.pdf

Practical needs
Getting things done.

Practical needs
• Technical requirements
• Business requirements
• User requirements

Design goals
Shape & discuss ideas

Who are they for?
© James Kelway - http://www.flickr.com/photos/userpathways/2612549491/

Who are they for?
• Designers, creatives, marketing
• Developers, usability, QA
• Users, user groups, user testing
• Business, stakeholders, CEO’s
• Everyone!? Your mom, too?

How are
they made?
Pick the fastest tools for you.

Analog tools
Fastest for thinking (at first).

Analog tools
• Pens, markers
• Sticky notes
• Moleskins
• Whiteboards

Use a pen,
don’t be scared.
• Pen: Micron .35mm water-proof,
fade-proof, permanent
• Forces you to be decisive
• You’ll be faster at getting your
thoughts on paper
• Maybe this is drawing-related?

Start with sticky notes

I like sticky notes
• I write small, so the size
constraint doesn’t bother me.
• They’re transient. They’re not
museum-bound.
• Moved easily, arranged in a flow.
• Super fastasto complete.
(that’s twice fast as regular fast.)

Get a big moleskin
• Sticky notes take the place of my
pocket moleskin.
• Small doesn’t allow for enough
details to be fleshed out.
• Big isn’t an option.
• Stickies fit in the big moleskin!

Stickies fit
in a moleskin

Process of
wireframing
How I do it...

Wireframing process
• Start with sketches (low-fidelity)
• Increase fidelity as the concept
moves forward (skip levels as needed)
• The goal is an interactive
prototype
• Once tested, it quickly becomes
a real product.

My typical process
Thumbnails > full pages > prototype

Don’t waste time.
Your sticky notes are not
your web site.

“A piece of paper, on the
other hand, is only on its
way to the garbage can.”
Getting Real by 37Signals
http://gettingreal.37signals.com/ch11_Dont_Do_Dead_Documents.php

Don’t waste too much time
with static wireframes. Get
to HTML fast, if you can.
My recommendation, based on
37Signals wireframe sentiments.

“You can’t go from
nothing to a prototype
unless you already have a
prototype to work with.”
Get realistic by Jason Robb

1. Wireframes don’t always
need finished.
2. Only wireframe the
unknown pages.
Spoolcast: Roughing it with
Interactive Prototypes
http://www.uie.com/brainsparks/2009/03/06/spoolcast-roughing-it-with-interactive-
prototypes/

Getting to
prototypes
Get here as fast as possible

Digital tools
• Omnigraffle - easy to use, easy to
get too detailed. (That’s bad)
• Photoshop - less easy to use,
more easy to get too detailed.
• HTML - just right, if you set it up
first. (Initial time sink)

Omnigraffle
Language International Purpose of this document: Created on Tue Feb 17 2009
Modified on Wed Feb 18 2009
This wireframe shows the redesigned content on our home page. Is this the right
Wireframe: Home page Created by Jason Robb
content? The presentation will change, the layout is a bit cramped, but that will be
adjusted later. Shown below is the home page MINUS the header, navigation and footer. wf-HomePage2.gra e
Notes
1 Clear, concise H1 & Tour link
Find language courses A) Pending final revision, this is our mission statement
1.A
packed into 7 words or less.
B) Take the tour - maybe not the best copywriting.
Photo of a city or person
at the best schools
Something to this e ect. The people that \"get it\" will find
the search form, destinations, or special courses below.
2 Triple play
Take the tour >
1.B Three great things that we do that makes us stand apart
from out competition. Icons are either already made or
need minor tweaking to fit.
3
Easily compare multiple Free student counseling Low prices guaranteed Mini-search got minified
2 courses & schools No AJAX . Why? It's complicated and redundant. The
Icon Icon Icon If you find a cheaper price
Our student advisors are original design was apart of a larger (now extinct) UX.
We have thousands of somewhere else we'll
knowledgeable, friendly,
courses, all at high quality No duration - it isn't something people think about from
match it!
and want to help you find
the start. It's important. But I'd be willing to bet that data
schools. the perfect match. Price matching policy shows that nobody adjusts it from the home page
Search courses now Learn more about us (reference needed, lil help Mike?).
4 Destination table
List all locations in every language we o er. These links
Find a course Study abroad destinations Summer courses
5
3 4 go to our SERP. If they click \"USA\", then we show them
the default search for all cities in the USA, intensive
Study in sunny Boston USA, courses only, for an duration.
Language
Study English where the grass is greener 5 Specialty courses
Select a language and the air is cleaner. These won't be blue links, but they'll be obviously
Boston New York Los Angelos
USA clickable. Presentation withstanding, ideally, these clicks
Country City
Business courses send our users to SERP for these course types. Until
then, we'll push them to our contact form. (See notes on
San Antonio Pittsburgh Baltimore
Select a country
Navigation paths.)
Your boss will love you and
want to give you a raise
City Nomans Someplace Lightville
immediately.
Land
Select a country
Kids courses
UK London Cambridge Berkshire
Search courses Send your kids to Italy to
work like slaves for 6 weeks.
Study Spanish

Photoshop

HTML

HTML, why I love it
• HTML Templates: make a half
dozen different layouts. Reuse.
• They take time to make, worth it.
• Use frameworks: 960GS,
blueprint, YUI, etc...
• Then spend more time thinking
in the prototype

Tool time &
Goal time
A lesson from Jared Spool

Tool time is...
• Wasted time.
• “If it takes longer to make
something bold, it’s not any
better bold”
• (You’re still learning how to use
your tools faster/better. ;)

Goal time
• Goal time is time spent making
progress toward the final product
• The ultimate goal is to spend
more time working towards the
goal, and less wasted with your
tools

Separate the goals
from the tools
Use whatever tool is fastest for you!

That’s all yinz!
Any questions?

How’d I do?
Seriously, tell me!
http://speakerrate.com/jasonrobb