Wireframes: Choose the Right Tool for the Job
Post on 27-Jan-2015
DESCRIPTIONA survey of wireframe tools for entrepreneurs & startups. Invited presentation given 7/24/12 at Baltimore Lean Startup's "Tools of the Lean Trade."
- 1. Wireframes:Choose the Right Tool for the JobCatharine RobertsonThe Berndt Group
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 retentionTools of the Lean Trade | Catharine Robertson 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. Our Project Process Tools of the Lean Trade | Catharine Robertson 5. Our Project Process Tools of the Lean Trade | Catharine Robertson 6. Our Project Processluxuryof thewaterfallTools of the Lean Trade | Catharine Robertson 7. My role: Tools of the Lean Trade | Catharine Robertson 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. WireframesServe as:Consumed by: Functional specification Team peers Work order Manager Contractual agreement Co-founder Process management Visual designerdocument Developer Project artifact QA tester! Client/customer!Tools of the Lean Trade | Catharine Robertson 10. Wireframe is another name for blueprint.http://mffanrodders.wordpress.com/page/120/?archives-list Tools of the Lean Trade | Catharine Robertson 11. This is a wireframe."##$%&&()*+,((-./0-1&2+*3(.#+*450+&6+7(#+36(*+4*51(.8&! Tools of the Lean Trade | Catharine Robertson 12. This is a wireframe.http://wireframes.linowski.ca/tag/annotation/ Tools of the Lean Trade | Catharine Robertson 13. Caveat & CautionA wireframe that cant 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. Wireframing & Prototyping Tools Tools of the Lean Trade | Catharine Robertson 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. 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_UniverseTools of the Lean Trade | Catharine Robertson 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. 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 projectsTools of the Lean Trade | Catharine Robertson 19. AdobeInDesignPros:Sophisticated templatingRobust (history of print)Excellent annotatingLayersNavigation of appPixel-perfectGood for big projectsCons:Expensive ($1000+)High learning curveNo prototyping per seTools of the Lean Trade | Catharine Robertson 20. AdobeFireworksPros:Hi-fiPrototyped wireframesExport to html or cssClickable pdf prototypesTemplating systemComes with templatesAdobes ConnectNowCons:$300Medium learning curveProprietary Tools of the Lean Trade | Catharine Robertson 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. VisioPros:From $170Easy to learnDiagramming appMany stencils availableTemplating systemMS-connectedCons:No MacNot robustPrimitive templatingTools of the Lean Trade | Catharine Robertson 23. iRisePros:Most robust productSimulations, not justprototypesNo coding neededFree, simplified versionfor mobile onlyCons:Made for enterpriseAdoption centerhttp://www.irise.com/irise_in_action/Full version $6000++ Tools of the Lean Trade | Catharine Robertson 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. BalsamiqPros:CHEAP! (from $79)Use demo for freeDesktop or pluginsHand drawn lookDrag & drop = instantAnnotationsCons:No templatingCrude prototypingHand drawn lookBad for big projectsTools of the Lean Trade | Catharine Robertson 26. Others HotGloo Foundation coded wireframing Mockflow for rapid prototyping responsive Cacoodesign WireframeSketcher Sinatra Ruby micro-framework for rapid prototyping FlairBuilder Pencil - open source browser add- Mockingbirdon 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. 5 Questions to Choose the Right ToolWho are youHow quickly do you need acommunicating with?prototype? Clients/customers At every step Developers When wireframes are done Team members End usersWhat 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. For more info smashingmagazine.com alistapart.com uxmatters.org mashable.com boxesandarrows.com uxbooth.com! Tools of the Lean Trade | Catharine Robertson 29. Catharine Robertsoncatharinerobertson@gmail.com@cathrohttp://www.irise.com/Tools of the Lean Trade | Catharine Robertson