Your SlideShare is downloading. ×
0
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
The Right Way to Wireframe - WebVisions 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Right Way to Wireframe - WebVisions 2011

2,056

Published on

Published in: Design, Education, Business
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,056
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
40
Comments
1
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. THE RIGHT WAY TO WIREFRAMEWebVisions 2011 | #rwtwRuss Unger | @russu
  • 2. We don’t show...OUR WORK
  • 3. DESIGNERS DO IT
  • 4. DEVELOPERS DO IT
  • 5. HAVE YOU EVER SEENA WIREFRAME FROM jesse james garrett peter morville jared spool
  • 6. peter morville
  • 7. al Navigation Default state store009 Version 1.0 logo search 2 Jesse James Garrett 1 cartn HBR today on current account blogs books authors HBS downloads page highlights timely content from the blogs, magazine, hbr magazine 3 s sections. explore hbr 4ea expand your knowledge build your expertise discover new approaches provides a focal point for all e-commerce related links. page allows users to find aggregated links to content from Partially expanded state uthors across blogs, magazine, and books sections.drawer store logo searchandable area encourages and facilitates exploration of cart y subject. today on current account blogs books authors HBS downloadsyour knowledge hbr magazine features editorially selected sub-categories from the current Strategy Decision making explore hbr Business processes ategory in search results. Leadership Interpersonal skills Management by objectives Organizational change Project management Quality managementur expertise Information & technology Managing uncertainty Forecasting features editorially selected sub-categories from the current Global business Time management Knowledge managementment Skills” category in search results. 5 7 new approaches expand your knowledge build your expertise discover new approaches 6 features editorially selected sub-categories from the currentMethodologies” category in search results. nks Fully expanded state ks drive users interested in exploring further to dedicated store ages. logo search cart today on current account blogs books authors HBS downloads hbr magazine explore hbr more topics » more skills » more methods » 8 Strategy Decision making Business processes Leadership Interpersonal skills Management by objectives Organizational change Project management Quality management jesse james garrett Information & technology Managing uncertainty Forecasting Global business Time management Knowledge management expand your knowledge build your expertise discover new approaches sign | Harvard Business Review
  • 8. “I’ve never done a wireframe*” *jared spool
  • 9. What’s the best tool?WIREFRAMING/PROTOTYPING
  • 10. What’s the best tool?WIREFRAMING/PROTOTYPING “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
  • 11. “Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”
  • 12. sigh.
  • 13. I <3 and...
  • 14. If you’re still arguing about wireframes vs. prototypesYOU’RE MISSING THE POINT
  • 15. We don’t show...OUR WORK
  • 16. “My work is proprietary.” NOT SO ANONYMOUS COWARD
  • 17. NUT UP OR SHUT UP
  • 18. 4 DESIGNERS 3 CAVEATS 1 PROBLEM
  • 19. RUSS (that’s me) WILL FRED TODD
  • 20. CAVEATS.use a different tool.no talking to each other.document everything
  • 21. BALSAMIQ OMNIGRAFFLEAXURE RP PRO HTML/FIREWORKS
  • 22. THE CASE STUDY
  • 23. “If we can give $5 to a stranger at a coffee shop, why can’t we do that for healthcare?” TORI TUNCAN96 Loans for a total of $67,452
  • 24. LEND4HEALTH.COM
  • 25. THE APPROACH
  • 26. @gabbyhon
  • 27. REQUIREMENTS?IT’S BEEN YEARS
  • 28. task analysis grid
  • 29. inspiration library
  • 30. THIS IS HOW I DID IT
  • 31. requirements
  • 32. personas
  • 33. information architecture
  • 34. information architecture
  • 35. Meet Angela The Loan Funder Angela arrives at Angela Searches for a Loan Angela Reviews Details of Lend4Health.com to Fund Loan Request (0.0.0.0) (1.0.0.0) (1.1.0.0) http://www.flickr.com/photos/ 11762156@N06/2912606267/Part-time working mother of 8year old son Avery who is able tostay with a babysitter severalhours a day. Angela has beenthrough the gamut of testing andwants to help others. user journey
  • 36. Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)sketching
  • 37. Quantity over quality15 SKETCHES / 3 SCREENS
  • 38. i even sketched this presentation
  • 39. Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)wireframing
  • 40. @simplybrad
  • 41. Lend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)visual design
  • 42. pretty cool
  • 43. the entire process
  • 44. Four Different DesignersTHIS IS THE OVERLAP
  • 45. information architecture
  • 46. information architecture
  • 47. information architecture
  • 48. sketching
  • 49. sketching
  • 50. sketching
  • 51. sketching
  • 52. visual design
  • 53. visual design
  • 54. visual design
  • 55. visual design
  • 56. http://is.gd/curls http://is.gd/curowhttp://is.gd/curw2 http://is.gd/curpN
  • 57. CHALLENGES.couldn’t talk to each other.research handed to us.no “formal” usability testing
  • 58. PRINCIPALS.sketch (a lot).practice critique.the best tool is the one you know
  • 59. THANK YOU!Russ Unger | @russu

×