The Right Way to Wireframe - WebVisions 2011

2,370 views

Published on

Published in: Design, Education, Business
1 Comment
6 Likes
Statistics
Notes
  • Russ Unger: http://www.youtube.com/watch?v=RjIDHTyY1zM

    Todd Zaki Warfel: http://www.youtube.com/watch?v=gLenYBX3Iqk

    Fred Beecher: http://www.youtube.com/watch?v=eFHWx9Poums

    Will Evans: http://www.youtube.com/watch?v=QSxF-pISj1w
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,370
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
42
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

The Right Way to Wireframe - WebVisions 2011

  1. 1. THE RIGHT WAY TO WIREFRAMEWebVisions 2011 | #rwtwRuss Unger | @russu
  2. 2. We don’t show...OUR WORK
  3. 3. DESIGNERS DO IT
  4. 4. DEVELOPERS DO IT
  5. 5. HAVE YOU EVER SEENA WIREFRAME FROM jesse james garrett peter morville jared spool
  6. 6. peter morville
  7. 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. 8. “I’ve never done a wireframe*” *jared spool
  9. 9. What’s the best tool?WIREFRAMING/PROTOTYPING
  10. 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. 11. “Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”
  12. 12. sigh.
  13. 13. I <3 and...
  14. 14. If you’re still arguing about wireframes vs. prototypesYOU’RE MISSING THE POINT
  15. 15. We don’t show...OUR WORK
  16. 16. “My work is proprietary.” NOT SO ANONYMOUS COWARD
  17. 17. NUT UP OR SHUT UP
  18. 18. 4 DESIGNERS 3 CAVEATS 1 PROBLEM
  19. 19. RUSS (that’s me) WILL FRED TODD
  20. 20. CAVEATS.use a different tool.no talking to each other.document everything
  21. 21. BALSAMIQ OMNIGRAFFLEAXURE RP PRO HTML/FIREWORKS
  22. 22. THE CASE STUDY
  23. 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. 24. LEND4HEALTH.COM
  25. 25. THE APPROACH
  26. 26. @gabbyhon
  27. 27. REQUIREMENTS?IT’S BEEN YEARS
  28. 28. task analysis grid
  29. 29. inspiration library
  30. 30. THIS IS HOW I DID IT
  31. 31. requirements
  32. 32. personas
  33. 33. information architecture
  34. 34. information architecture
  35. 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. 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. 37. Quantity over quality15 SKETCHES / 3 SCREENS
  38. 38. i even sketched this presentation
  39. 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. 40. @simplybrad
  41. 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. 42. pretty cool
  43. 43. the entire process
  44. 44. Four Different DesignersTHIS IS THE OVERLAP
  45. 45. information architecture
  46. 46. information architecture
  47. 47. information architecture
  48. 48. sketching
  49. 49. sketching
  50. 50. sketching
  51. 51. sketching
  52. 52. visual design
  53. 53. visual design
  54. 54. visual design
  55. 55. visual design
  56. 56. http://is.gd/curls http://is.gd/curowhttp://is.gd/curw2 http://is.gd/curpN
  57. 57. CHALLENGES.couldn’t talk to each other.research handed to us.no “formal” usability testing
  58. 58. PRINCIPALS.sketch (a lot).practice critique.the best tool is the one you know
  59. 59. THANK YOU!Russ Unger | @russu

×