Wireframes:Choose the Right Tool for the JobCatharine RobertsonThe Berndt Group
What I bring to the Lean conversation:I work for a successful entrepreneur whofounded his startup in 1991.“Successful” mea...
Full disclosure:Not Lean, or even lean.Not Agile, but occasionally agile(ish).We do waterfall.[Insert controversial statem...
Our Project Process   Tools of the Lean Trade | Catharine Robertson
Our Project Process   Tools of the Lean Trade | Catharine Robertson
Our Project Processluxuryof thewaterfall            Tools of the Lean Trade | Catharine Robertson
My role:           Tools of the Lean Trade | Catharine Robertson
Some of my tools:•   User task flows•   User personas•   Sitemaps•   Card sorting•   Affinity diagrams•   Mental models•  ...
WireframesServe as:                                    Consumed by:• Functional specification                   • Team pee...
Wireframe is another name for blueprint.    http://mffanrodders.wordpress.com/page/120/?archives-list                     ...
This is a wireframe."##$%&&()*+,((-./0-1&2+*3(.#+*450+&6+7(#+36(*+4*51(.8&!                               Tools of the Lea...
This is a wireframe.http://wireframes.linowski.ca/tag/annotation/                                                   Tools ...
Caveat & CautionA wireframe that can’t be or become a workingprototype will cost you time and/or money.(Sometimes worth it...
Wireframing & Prototyping Tools                     Tools of the Lean Trade | Catharine Robertson
Pen & paperPros:FREE!Limited only by papersize & imaginationGroup collaborationInstant disambiguationCons:Paper size limit...
Paper Prototyping For wireframes (specs)                                                                For prototypes (us...
PaperPrototypingPros:CHEAP! Only the cost ofsuppliesUser testingGroup collaborationHi-fi ones look like thereal productCon...
Until UX Pin,that is.Pros:CHEAP! (from $37)Pre-done kits save timePaper prototyperecognitionCons:Proprietary kits = finite...
AdobeInDesignPros:Sophisticated templatingRobust (history of print)Excellent annotatingLayersNavigation of appPixel-perfec...
AdobeFireworksPros:Hi-fiPrototyped wireframesExport to html or cssClickable pdf prototypesTemplating systemComes with temp...
OmniGrafflePros:CHEAP! ($100)Easy to learnDiagramming appMany stencils availableTemplating systemOutline viewImport/export...
VisioPros:From $170Easy to learnDiagramming appMany stencils availableTemplating systemMS-connectedCons:No MacNot robustPr...
iRisePros:Most robust productSimulations, not justprototypesNo coding neededFree, simplified versionfor mobile onlyCons:Ma...
AxurePros:Hi-fi or lo-fi (sketching)Rich html prototypes, nocodingSophisticated templatingSophisticated func specsystem w/...
BalsamiqPros:CHEAP! (from $79)Use demo for freeDesktop or pluginsHand drawn lookDrag & drop = instantAnnotationsCons:No te...
Others•   HotGloo                                      •     Foundation – “coded wireframing”•   Mockflow                 ...
5 Questions to Choose the Right ToolWho are you                                      How quickly do you need acommunicatin...
For more info• smashingmagazine.com                    • alistapart.com• uxmatters.org                           • mashabl...
Catharine Robertsoncatharinerobertson@gmail.com@cathrohttp://www.irise.com/                    Tools of the Lean Trade | C...
Upcoming SlideShare
Loading in …5
×

Wireframes: Choose the Right Tool for the Job

1,782 views

Published on

A survey of wireframe tools for entrepreneurs & startups. Invited presentation given 7/24/12 at Baltimore Lean Startup's "Tools of the Lean Trade."

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,782
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
58
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Wireframes: Choose the Right Tool for the Job

  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."##$%&&()*+,((-./0-1&2+*3(.#+*450+&6+7(#+36(*+4*51(.8&! 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

×