I talked about the what, why, when, who and how of wireframes. Highlights include: Emphasis on embracing analog tools like pens, sticky notes, moleskin, and whiteboards. I also suggest to get to a working prototype as fast as possible.
If you saw this presentation, rate it at Speaker Rate: http://speakerrate.com/talks/314-what-the-wireframe-a-pragmatic-approach-to-wireframes
4. 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!)
5. Note: I have no
idea what I’m
doing up here.
Throw me a bone. Ask me questions!
6. 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 quot;get itquot; 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 quot;USAquot;, 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
7. What are wireframes?
• Basis for discussion
• Give visible form and
structure to info
architecture
• Cheap to make
10. 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.
16. “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
21. Who are they for?
• Designers, creatives, marketing
• Developers, usability, QA
• Users, user groups, user testing
• Business, stakeholders, CEO’s
• Everyone!? Your mom, too?
22. How are
they made?
Pick the fastest tools for you.
25. 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?
27. 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.)
28. 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!
31. 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.
34. “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
35. Don’t waste too much time
with static wireframes. Get
to HTML fast, if you can.
My recommendation, based on
37Signals wireframe sentiments.
36. “You can’t go from
nothing to a prototype
unless you already have a
prototype to work with.”
Get realistic by Jason Robb
37. 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/
38. Getting to
prototypes
Get here as fast as possible
39. 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)
40. 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 quot;get itquot; 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 quot;USAquot;, 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
43. 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
44. Tool time &
Goal time
A lesson from Jared Spool
45. 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. ;)
46. 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