Your SlideShare is downloading. ×
0
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Wireframes: Choose the Right Tool for the Job
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wireframes: Choose the Right Tool for the Job

1,373

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."

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,373
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 retention Tools 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 thewaterfall Tools 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 designer document • 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 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. 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_Universe Tools 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 projects Tools 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 se Tools of the Lean Trade | Catharine Robertson
  • 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. 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 templating Tools of the Lean Trade | Catharine Robertson
  • 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. 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 projects Tools of the Lean Trade | Catharine Robertson
  • 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. 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. 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

×