Date post: | 28-Jan-2015 |
Category: |
Design |
Upload: | russ-unger |
View: | 110 times |
Download: | 2 times |
THE RIGHT WAY TO WIREFRAMEWebVisions 2011 | #rwtw
Russ Unger | @russu
Image Source © Time Inc.
OUR WORKWe don’t show...
DESIGNERS DO IT
DEVELOPERS DO IT
HAVE YOU EVER SEENA WIREFRAME FROM
jesse james garrettpeter morvillejared spool
peter morville
discover new approachesexpand your knowledge build your expertise
StrategyLeadershipOrganizational changeInformation & technologyGlobal business
Decision makingInterpersonal skillsProject managementManaging uncertaintyTime management
Business processesManagement by objectivesQuality managementForecastingKnowledge management
explore hbr
storecart
accountdownloads
today on hbr authorsblogs current
magazine books HBS
logo search
discover new approachesexpand your knowledge build your expertiseexplore hbr
storecart
accountdownloads
today on hbr authorsblogs current
magazine books HBS
logo search
1. Today on HBRThis new page highlights timely content from the blogs, magazine, and books sections.
2. Store areaThis area provides a focal point for all e-commerce related links.
3. AuthorsThis new page allows users to find aggregated links to content from popular authors across blogs, magazine, and books sections.
4. Explore drawerThis expandable area encourages and facilitates exploration of content by subject.
5. Expand your knowledgeThis area features editorially selected sub-categories from the current “Topics” category in search results.
6. Build your expertiseThis area features editorially selected sub-categories from the current “Management Skills” category in search results.
7. Discover new approachesThis area features editorially selected sub-categories from the current “Tools & Methodologies” category in search results.
8. “More” linksThese links drive users interested in exploring further to dedicated landing pages.
Global NavigationSeptember 24, 2009
Web Redesign | Harvard Business Review
Version 1.0
discover new approachesexpand your knowledge build your expertise
StrategyLeadershipOrganizational changeInformation & technologyGlobal business
Decision makingInterpersonal skillsProject managementManaging uncertaintyTime management
Business processesManagement by objectivesQuality managementForecastingKnowledge management
explore hbr
storecart
accountdownloads
today on hbr authorsblogs current
magazine books HBS
logo search
12
Default state
Partially expanded state
Fully expanded state
43
6
more skills »more topics » more methods »8
5 7
Jesse James Garrett
jesse james garrett
“I’ve never done a wireframe*”
jared spool
*
WIREFRAMING/PROTOTYPINGWhat’s the best tool?
WIREFRAMING/PROTOTYPINGWhat’s the best tool?
“Now that I’m a consumer of wireframes, I want to see prototypes!”
Christina Wodtke | @cwodtke
“You can’t say that works for everyone just because it works
for you now!”Me | @russu
“Can, too!”“Cannot!”
“Can, too!”“Cannot!”
“Can, too!”“Cannot!”
“Can, too!”“Cannot!”
“Can, too!”“Cannot!”
sigh.
I <3and...
YOU’RE MISSING THE POINTIf you’re still arguing about wireframes vs. prototypes
OUR WORKWe don’t show...
NOT SO ANONYMOUS COWARD
“My work is proprietary.”
NUT UP OR SHUT UP
4 DESIGNERS 3 CAVEATS
1 PROBLEM
WILLRUSS (that’s me)
TODDFRED
CAVEATS.use a different tool
.no talking to each other
.document everything
OMNIGRAFFLEBALSAMIQ
HTML/FIREWORKSAXURE RP PRO
THE CASE STUDY
“If we can give $5 to a stranger at a coffee shop, why can’t we do that for
healthcare?”TORI TUNCAN
96 Loans for a total of $67,452
LEND4HEALTH.COM
THE APPROACH
@gabbyhon
REQUIREMENTS? IT’S BEEN YEARS
task analysis grid
inspiration library
THIS IS HOW I DID IT
requirements
personas
information architecture
information architecture
Part-time working mother of 8 year old son Avery who is able to stay with a babysitter several hours a day. Angela has been through the gamut of testing and wants to help others.
http://www.flickr.com/photos/11762156@N06/2912606267/
Angela arrives at Lend4Health.com
(0.0.0.0)
Angela Searches for a Loan to Fund
(1.0.0.0)
Angela Reviews Details of Loan Request
(1.1.0.0)
Meet AngelaThe Loan Funder
user journey
sketching
Lend4Health.comHome Page(0.0.0.0)
Search Loans to Fund(1.0.0.0)
Loan Details(1.1.0.0)
15 SKETCHES / 3 SCREENSQuantity over quality
i even sketched this presentation
wireframing
Lend4Health.comHome Page(0.0.0.0)
Search Loans to Fund(1.0.0.0)
Loan Details(1.1.0.0)
@simplybrad
visual design
Lend4Health.comHome Page(0.0.0.0)
Search Loans to Fund(1.0.0.0)
Loan Details(1.1.0.0)
pretty cool
the entire process
THIS IS THE OVERLAPFour Different Designers
information architecture
information architecture
information architecture
sketching
sketching
sketching
sketching
visual design
visual design
visual design
visual design
http://is.gd/curowhttp://is.gd/curls
http://is.gd/curpNhttp://is.gd/curw2
CHALLENGES.couldn’t talk to each other
.research handed to us
.no “formal” usability testing
PRINCIPALS.sketch (a lot)
.practice critique
.the best tool is the one you know
Russ Unger | @russu
Image Source © Time Inc.
THANK YOU!