Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2012-07-24: Choose the Right Wireframe Tools

932 views

Published on

Presentation by Catharine Robertson
Baltimore Lean Startup meetup
July 24, 2012

Published in: Technology
  • Be the first to comment

2012-07-24: Choose the Right Wireframe Tools

  1. 1. Wireframes:Choose the Right Tool for the JobCatharine RobertsonThe Berndt Group
  2. 2. What I bring to the Lean conversation:I work for a successful entrepreneur whofounded his startup in 1991.“Successful” means• Grew from 1 person to 30 people• 20+ years of profitability, 0 layoffs• Privately held• 85% client retention• High employee retention Tools of the Lean Trade | Catharine Robertson
  3. 3. Full disclosure:Not Lean, or even lean.Not Agile, but occasionally agile(ish).We do waterfall.[Insert controversial statements here.] Tools of the Lean Trade | Catharine Robertson
  4. 4. Our Project Process Tools of the Lean Trade | Catharine Robertson
  5. 5. Our Project Process Tools of the Lean Trade | Catharine Robertson
  6. 6. Our Project Processluxuryof thewaterfall Tools of the Lean Trade | Catharine Robertson
  7. 7. My role: Tools of the Lean Trade | Catharine Robertson
  8. 8. Some of my tools:• User task flows• User personas• Sitemaps• Card sorting• Affinity diagrams• Mental models• Content inventories• Taxonomies• Wireframes Tools of the Lean Trade | Catharine Robertson
  9. 9. WireframesServe as: Consumed by:• Functional specification • Team peers• Work order • Manager• Contractual agreement • Co-founder• Process management • Visual designer document • Developer• Project artifact • QA tester • Client/customer Tools of the Lean Trade | Catharine Robertson
  10. 10. Wireframe is another name for blueprint. http://mffanrodders.wordpress.com/page/120/?archives-list Tools of the Lean Trade | Catharine Robertson
  11. 11. This is a wireframe.http://sixrevisions.com/user-interface/website-wireframing/ Tools of the Lean Trade | Catharine Robertson
  12. 12. This is a wireframe.http://wireframes.linowski.ca/tag/annotation/ Tools of the Lean Trade | Catharine Robertson
  13. 13. Caveat & CautionA wireframe that can’t be or become a workingprototype will cost you time and/or money.(Sometimes worth it, sometimes not.)Money and time you save up front onwireframing tools will be spent later on html/cssproduction, on credibility with clients/customers,or on realignment with designers/developers. Tools of the Lean Trade | Catharine Robertson
  14. 14. Wireframing & Prototyping Tools Tools of the Lean Trade | Catharine Robertson
  15. 15. Pen & paperPros:FREE!Limited only by papersize & imaginationGroup collaborationInstant disambiguationCons:Paper size limitationNot digitalAnnotations limitedPrototypes are hardNo rich interaction Tools of the Lean Trade | Catharine Robertson
  16. 16. Paper Prototyping For wireframes (specs) For prototypes (user testing)http://www.interaction-design.org/encyclopedia/contextual_design.html http://courses.csail.mit.edu/6.831/wiki/index.php?title=Projects/Build-It-Yourself_Universe Tools of the Lean Trade | Catharine Robertson
  17. 17. PaperPrototypingPros:CHEAP! Only the cost ofsuppliesUser testingGroup collaborationHi-fi ones look like thereal productCons:Bad for big projectsPITA to prepPITA to redraw digitally Tools of the Lean Trade | Catharine Robertson
  18. 18. Until UX Pin,that is.Pros:CHEAP! (from $37)Pre-done kits save timePaper prototyperecognitionCons:Proprietary kits = finiteApp recognizes only UXPin paper prototypesBad for big projects Tools of the Lean Trade | Catharine Robertson
  19. 19. AdobeInDesignPros:Sophisticated templatingRobust (history of print)Excellent annotatingLayersNavigation of appPixel-perfectGood for big projectsCons:Expensive ($1000+)High learning curveNo prototyping per se Tools of the Lean Trade | Catharine Robertson
  20. 20. AdobeFireworksPros:Hi-fiPrototyped wireframesExport to html or cssClickable pdf prototypesTemplating systemComes with templatesAdobe’s ConnectNowCons:$300Medium learning curveProprietary Tools of the Lean Trade | Catharine Robertson
  21. 21. OmniGrafflePros:CHEAP! ($100)Easy to learnDiagramming appMany stencils availableTemplating systemOutline viewImport/export; linking pdfCons:No WindowsNot robustPrimitive templating Tools of the Lean Trade | Catharine Robertson
  22. 22. VisioPros:From $170Easy to learnDiagramming appMany stencils availableTemplating systemMS-connectedCons:No MacNot robustPrimitive templating Tools of the Lean Trade | Catharine Robertson
  23. 23. iRisePros:Most robust productSimulations, not justprototypesNo coding neededFree, simplified versionfor mobile onlyCons:Made for enterprise“Adoption center” http://www.irise.com/irise_in_action/Full version $6000++ Tools of the Lean Trade | Catharine Robertson
  24. 24. AxurePros:Hi-fi or lo-fi (sketching)Rich html prototypes, nocodingSophisticated templatingSophisticated func specsystem w/MS WordClient review onlineChange historyFeedback trackingCons:Expensive (from $589) Tools of the Lean Trade | Catharine Robertson
  25. 25. BalsamiqPros:CHEAP! (from $79)Use demo for freeDesktop or pluginsHand drawn lookDrag & drop = instantAnnotationsCons:No templatingCrude prototypingHand drawn lookBad for big projects Tools of the Lean Trade | Catharine Robertson
  26. 26. Others• HotGloo • Foundation – “coded wireframing”• Mockflow for rapid prototyping responsive• Cacoo design• WireframeSketcher • Sinatra – Ruby “micro-framework” for rapid prototyping• FlairBuilder • Pencil - open source browser add-• Mockingbird on wireframing & prototyping tool• ProtoShare (available for Firefox, other• JustInMind versions coming soon)• iPlotz • Stencil kits:• Pidoco – for Mac OS – Facebook apps• Gliffy – OmniGraffle, Visio• JumpChart – PSD files• Creately – Flex, Eclipse• Lovely Charts – Yahoo design stencils for many apps• Templatr – EightShapes’ Unify for Adobe apps – Keynotopia for Keynote Tools of the Lean Trade | Catharine Robertson
  27. 27. 5 Questions to Choose the Right ToolWho are you How quickly do you need acommunicating with? prototype?• Clients/customers • At every step• Developers • When wireframes are done• Team members• End users What is the prototype for? • Communicating functionalityWhat are you • User testingcommunicating?• How it works What is your budget?• How to build it• Process management Tools of the Lean Trade | Catharine Robertson
  28. 28. For more info• smashingmagazine.com • alistapart.com• uxmatters.org • mashable.com• boxesandarrows.com • uxbooth.com Tools of the Lean Trade | Catharine Robertson
  29. 29. Catharine Robertsoncatharinerobertson@gmail.com@cathrohttp://www.irise.com/ Tools of the Lean Trade | Catharine Robertson

×