Download - 2012-07-24: Choose the Right Wireframe Tools
![Page 1: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/1.jpg)
Wireframes: Choose the Right Tool for the Job
Catharine Robertson The Berndt Group
![Page 2: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/2.jpg)
What I bring to the Lean conversation: I work for a successful entrepreneur who founded 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
![Page 3: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/3.jpg)
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
![Page 4: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/4.jpg)
Our Project Process
Tools of the Lean Trade | Catharine Robertson
![Page 5: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/5.jpg)
Our Project Process
Tools of the Lean Trade | Catharine Robertson
![Page 6: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/6.jpg)
Our Project Process
luxury of the waterfall
Tools of the Lean Trade | Catharine Robertson
![Page 7: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/7.jpg)
My role:
Tools of the Lean Trade | Catharine Robertson
![Page 8: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/8.jpg)
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
![Page 9: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/9.jpg)
Wireframes
Serve as: • Functional specification • Work order • Contractual agreement • Process management
document • Project artifact
Consumed by: • Team peers • Manager • Co-founder • Visual designer • Developer • QA tester • Client/customer
Tools of the Lean Trade | Catharine Robertson
![Page 10: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/10.jpg)
Wireframe is another name for blueprint.
http://mffanrodders.wordpress.com/page/120/?archives-list
Tools of the Lean Trade | Catharine Robertson
![Page 11: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/11.jpg)
This is a wireframe.
http://sixrevisions.com/user-interface/website-wireframing/
Tools of the Lean Trade | Catharine Robertson
![Page 12: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/12.jpg)
This is a wireframe.
http://wireframes.linowski.ca/tag/annotation/
Tools of the Lean Trade | Catharine Robertson
![Page 13: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/13.jpg)
Caveat & Caution
A wireframe that can’t be or become a working prototype will cost you time and/or money. (Sometimes worth it, sometimes not.) Money and time you save up front on wireframing tools will be spent later on html/css production, on credibility with clients/customers, or on realignment with designers/developers.
Tools of the Lean Trade | Catharine Robertson
![Page 14: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/14.jpg)
Wireframing & Prototyping Tools
Tools of the Lean Trade | Catharine Robertson
![Page 15: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/15.jpg)
Pen & paper Pros: FREE! Limited only by paper size & imagination Group collaboration Instant disambiguation Cons: Paper size limitation Not digital Annotations limited Prototypes are hard No rich interaction
Tools of the Lean Trade | Catharine Robertson
![Page 16: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/16.jpg)
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
![Page 17: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/17.jpg)
Paper Prototyping Pros: CHEAP! Only the cost of supplies User testing Group collaboration Hi-fi ones look like the real product Cons: Bad for big projects PITA to prep PITA to redraw digitally
Tools of the Lean Trade | Catharine Robertson
![Page 18: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/18.jpg)
Until UX Pin, that is. Pros: CHEAP! (from $37) Pre-done kits save time Paper prototype recognition Cons: Proprietary kits = finite App recognizes only UX Pin paper prototypes Bad for big projects
Tools of the Lean Trade | Catharine Robertson
![Page 19: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/19.jpg)
Adobe InDesign Pros: Sophisticated templating Robust (history of print) Excellent annotating Layers Navigation of app Pixel-perfect Good for big projects Cons: Expensive ($1000+) High learning curve No prototyping per se
Tools of the Lean Trade | Catharine Robertson
![Page 20: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/20.jpg)
Adobe Fireworks Pros: Hi-fi Prototyped wireframes Export to html or css Clickable pdf prototypes Templating system Comes with templates Adobe’s ConnectNow Cons: $300 Medium learning curve Proprietary
Tools of the Lean Trade | Catharine Robertson
![Page 21: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/21.jpg)
OmniGraffle Pros: CHEAP! ($100) Easy to learn Diagramming app Many stencils available Templating system Outline view Import/export; linking pdf Cons: No Windows Not robust Primitive templating
Tools of the Lean Trade | Catharine Robertson
![Page 22: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/22.jpg)
Visio Pros: From $170 Easy to learn Diagramming app Many stencils available Templating system MS-connected Cons: No Mac Not robust Primitive templating
Tools of the Lean Trade | Catharine Robertson
![Page 23: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/23.jpg)
iRise Pros: Most robust product Simulations, not just prototypes No coding needed Free, simplified version for mobile only Cons: Made for enterprise “Adoption center” Full version $6000++
http://www.irise.com/irise_in_action/
Tools of the Lean Trade | Catharine Robertson
![Page 24: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/24.jpg)
Axure Pros: Hi-fi or lo-fi (sketching) Rich html prototypes, no coding Sophisticated templating Sophisticated func spec system w/MS Word Client review online Change history Feedback tracking Cons: Expensive (from $589)
Tools of the Lean Trade | Catharine Robertson
![Page 25: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/25.jpg)
Balsamiq Pros: CHEAP! (from $79) Use demo for free Desktop or plugins Hand drawn look Drag & drop = instant Annotations Cons: No templating Crude prototyping Hand drawn look Bad for big projects
Tools of the Lean Trade | Catharine Robertson
![Page 26: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/26.jpg)
Others
• HotGloo • Mockflow • Cacoo • WireframeSketcher • FlairBuilder • Mockingbird • ProtoShare • JustInMind • iPlotz • Pidoco • Gliffy • JumpChart • Creately • Lovely Charts • Templatr
• Foundation – “coded wireframing” for rapid prototyping responsive design
• Sinatra – Ruby “micro-framework” for rapid prototyping
• Pencil - open source browser add-on wireframing & prototyping tool (available for Firefox, other versions coming soon)
• Stencil kits: – for Mac OS – Facebook apps – OmniGraffle, Visio – PSD files – Flex, Eclipse – Yahoo design stencils for many apps – EightShapes’ Unify for Adobe apps – Keynotopia for Keynote
Tools of the Lean Trade | Catharine Robertson
![Page 27: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/27.jpg)
5 Questions to Choose the Right Tool
Who are you communicating with? • Clients/customers • Developers • Team members • End users What are you communicating? • How it works • How to build it • Process management
How quickly do you need a prototype? • At every step • When wireframes are done What is the prototype for? • Communicating functionality • User testing
What is your budget?
Tools of the Lean Trade | Catharine Robertson
![Page 28: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/28.jpg)
For more info
• smashingmagazine.com • uxmatters.org • boxesandarrows.com
• alistapart.com • mashable.com • uxbooth.com
Tools of the Lean Trade | Catharine Robertson
![Page 29: 2012-07-24: Choose the Right Wireframe Tools](https://reader033.vdocuments.us/reader033/viewer/2022051512/54473a57afaf9f61178b4954/html5/thumbnails/29.jpg)
http://www.irise.com/
Catharine Robertson [email protected] @cathro
Tools of the Lean Trade | Catharine Robertson