The Right Way to Wireframe - CIDD Chicago, February 6, 2013

4,983 views

Published on

Published in: Design
5 Comments
32 Likes
Statistics
Notes
  • Ami,

    I think one of the biggest mistakes designers can make is to go directly to digital tools without spending time sketching their ideas.

    When using a presentation tool such as Keynote or Powerpoint, I'd recommend Travis Isaacs Keynote Kung-fu (http://keynotekungfu.com/) after sketching.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This was a very interesting slideshare and perhaps the longest one I have encountered on this site. :-D I would skip the sticky notes and use Powerpoint.
    http://presentationpanda.com/blog/wireframe-your-next-website-with-powerpoint/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • My favorite slide is 74 and 74 is IA and an argument for using wireframes to express IA in a RWD.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hahahaha! Thanks!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Slide #17 may be the most awesome thing I've ever seen on Slideshare. Well done, sir.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
4,983
On SlideShare
0
From Embeds
0
Number of Embeds
252
Actions
Shares
0
Downloads
9
Comments
5
Likes
32
Embeds 0
No embeds

No notes for slide

The Right Way to Wireframe - CIDD Chicago, February 6, 2013

  1. 1. THE RIGHT WAY TO WIREFRAME Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.htmlRuss Unger | @russu
  2. 2. We don’t show OUR WORK
  3. 3. DESIGNERS Do It
  4. 4. DESIGNERS Do It
  5. 5. DEVELOPERS Do It
  6. 6. DEVELOPERS Do It
  7. 7. WHAT ABOUT UX?
  8. 8. We don’t show OUR WORK
  9. 9. “My work is proprietary.” MINE, TOO.
  10. 10. Have you ever seen A WIREFRAME FROM...
  11. 11. Peter Morville
  12. 12. 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 management Jesse James Garretur 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 Information & technology Managing uncertainty Forecasting Global business Time management Knowledge management expand your knowledge build your expertise discover new approaches sign | Harvard Business Review
  13. 13. “I’ve never done a wireframe*”* Jared Spool
  14. 14. What is the best approach? WIREFRAMING OR PROTOTYPING
  15. 15. “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke
  16. 16. “Now that I’m a consumer of wireframes, I want to see prototypes!” Christina Wodtke | @cwodtke “You can’t say that worksfor everyone just because it works for you now!” Me | @russu
  17. 17. “Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”“Can, too!” “Cannot!”
  18. 18. sigh.
  19. 19. I <3 and...
  20. 20. They are just Communication Tools.Arguing about wireframes vs. prototypes is MISSING THE POINT
  21. 21. It was time to NUT UP OR SHUT UP
  22. 22. 4 DESIGNERS
  23. 23. Russ Will Fred Todd
  24. 24. What is the best approach? WIREFRAMING OR PROTOTYPING
  25. 25. Balsamiq HTML & Omnigraffle Axure RPMockups Fireworks Wireframes Prototypes
  26. 26. Three RULES
  27. 27. Three RULES - EVERYONE uses a different tool - EVERYTHING is documented - NO TALKING to each other
  28. 28. The CASE STUDY
  29. 29. “If we can give $5 to a strangerat a coffee shop, why can’t we do that for healthcare?” Tori Tuncan 98 Loans for a total of $76,289
  30. 30. www. LEND4HEALTH.COM
  31. 31. whew.
  32. 32. Design the path for funding a loan. The OBJECTIVE
  33. 33. How it’s done TODAY - user reviews profiles/needs in the blog format - user determines amount they can loan - user contacts lend4health - lend4health connects user and loan recipient - lend4health supplies loan agreement - user funds loan via paypal - lender repays funds via paypal per agreement - lender supplies updates to child’s progress to lend4health and lender lend4health updates progress on website - continues until loan is paid back
  34. 34. whew.
  35. 35. The APPROACH
  36. 36. Gabby Hon@gabbyhon
  37. 37. User & Company RESEARCH
  38. 38. User PERSONAS
  39. 39. This is how I DID IT
  40. 40. Requirements ANALYSIS
  41. 41. Persona CONSIDERATION
  42. 42. Information ARCHITECTURE
  43. 43. Information ARCHITECTURE
  44. 44. Angela: Loan Funder USER JOURNEY Angela Reviews Angela arrives at Angela Searches for a Details of Loan Lend4Health.com Loan to Fund com/photos/ Requesthttp://www.flickr. 06/2912606267/ (0.0.0.0) (1.0.0.0)11762156@N (1.1.0.0)
  45. 45. Pencil & Paper SKETCHINGLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  46. 46. Quantity over quality 15 SKETCHES / 3 SCREENS
  47. 47. The Original PRESENTATION
  48. 48. Balsamiq Mockups WIREFRAMINGLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  49. 49. Brad Simpson @simplybrad
  50. 50. Brad Simpson VISUAL DESIGNLend4Health.com Search Loans to Fund Loan Details Home Page (1.0.0.0) (1.1.0.0) (0.0.0.0)
  51. 51. Lend4Health.com LOAN DETAILS
  52. 52. Pretty Cool.
  53. 53. Here’s the ENTIRE PROCESS
  54. 54. Four Designers LOTS OF OVERLAP
  55. 55. Information ARCHITECTURE
  56. 56. Information ARCHITECTURE
  57. 57. Information ARCHITECTURE
  58. 58. Pencil & Paper SKETCHING
  59. 59. Pencil & Paper SKETCHING
  60. 60. Pencil & Paper SKETCHING
  61. 61. Pencil & Paper SKETCHING
  62. 62. Visual DESIGN
  63. 63. Visual DESIGN
  64. 64. Visual DESIGN
  65. 65. Visual DESIGN
  66. 66. Online VIDEOShttp://is.gd/curls http://is.gd/curow http://is.gd/curw2 http://is.gd/curpN
  67. 67. Changing Times & NEW CONSIDERATIONS
  68. 68. Responsive DESIGN Ethan Marcotte @beep
  69. 69. Responsive DESIGN Ethan Marcotte @beep
  70. 70. Responsive DESIGN Ethan Marcotte @beep
  71. 71. Biggest, Smallest, “Just Right” GOLDILOCKSMatthew Milan Source: Wireframes Magazine http://wireframes.linowski.ca/2011/09/responsive-layout-wireframe/ @mmilan
  72. 72. Responsive Way TO WIREFRAME
  73. 73. Responsive Way TO WIREFRAME
  74. 74. Responsive Way TO WIREFRAME
  75. 75. Mobile FIRST Image Source © Dustin Kirk ¦ http://www.dustinkirk.com/tag/luke-wroblewski/
  76. 76. Localization & LANGUAGES
  77. 77. What’s NEXT?
  78. 78. So WHAT?
  79. 79. The primary CHALLENGES - UNABLE to talk/collaborate - RESEARCH handed to us - NO FORMAL usability testing - DEVELOPER was unknown
  80. 80. Core PRINCIPLES - SKETCHING (a lot) is THINKING (a lot) - CRITIQUE is extremely essential - BEST TOOL: the one you know Find Your Right Way Here!
  81. 81. THANK YOU! Image Source © Rusty Lopez ¦ http://rustylopez.typepad.com/imagoarticulus/2007/07/mckinley-county.htmlRuss Unger | @russu

×