Recommended
Recommended
More Related Content
What's hot
What's hot (11)
Viewers also liked
Similar to Tools of the Trade
Similar to Tools of the Trade (20)
Recently uploaded
Recently uploaded (20)
Tools of the Trade
- 1. TOOLS of the TRADE Analyzing the functionality and role of wireframing tools in user experience design
- 2. DAN A GIULIA NA @XperienceArc Experience Architect, photographer, biker Recent work with Chrysler, Dunkin Donuts, Fidelity, Boston.com Studied Film at Emerson College WILL MILLAR @ideastate Thinker, maker, question-asker Recent work with Fidelity Biosciences, MassArt, City of Boston Studied Graphic Design at MassArt KEN SIGE L @kendoggz Runner, chef, problem solver Recent work with Staples, The Hartford, Humana Studied Creative Writing at Wheaton College
- 3. Creative agency with mature UX department 30+ experience designers (Boston) Experience design shapes direction for most projects
- 4. Guide design & development Facilitate discussion Build consensus WI RE F RA MES
- 5. VS VS VS VS
- 7. PortabilityScalability FidelityAgilityModularity Prototyping 6 VIRTUES OF WIREFRAME TOOLS • Speed • Ease of iteration • Pixel perfection of UI detail • Collaboration • Printing/PDF Exporting • Reusable components • Templates/styles • Exporting interactive demos • Transitions/ animation • Handling large document structures • Complexity of page elements
- 9. • InDesign $$$$ Adobe Creative Suite Powerful desktop publishing application (Pagemaker) Making inroads as a web and tablet publishing tool
- 10. InDesign UNLIMITED CREATIVITY Create anything you can imagine Traditional vector drawing tools Columns, grids and guides Common image blending and effects +
- 11. InDesign DETAILED TYPOGRAPHY Limitless control Similar to CSS Easily handles massive texts +
- 12. InDesign POWERFUL STYLES Paragraph and character styles for all text controls Object styles are powerful shortcuts for UI components Easy to create +
- 13. InDesign LIBRARIES Create once, use across multiple wireframes or projects Organize by object type (buttons, forms, navigation etc.) Share across your team +
- 14. EMBED DOCUMENTS INTO ONE ANOTHER Collaborate with other team members Update instances with one click InDesign+
- 15. ROBUST TABLES Data is structured & aligned Detailed formatting Import from Excel (link to live .XLS file) InDesign+
- 16. LIMITED INTERACTIVITY Limited hover and click events Objects can animate and have states Present in clickable .PDF or .SWF InDesign—
- 17. STARTING FROM SCRATCH No pre-built components, libraries or styles Developing your own take some time InDesign—
- 18. STEEP LEARNING CURVE Newbies need several days to become very productive So many features (I’m still learning!) Classes available InDesign—
- 20. • OmniGraffle $$$$ The Omni Group Diagram design tool Versatile graphic design program with many timesaving features
- 21. OmniGraffle POWERFUL UI “STENCILS” Graffletopia Almost any UI element you could imagine Robust community is always adding new content +
- 22. OmniGraffle GREAT SKETCHING & DIAGRAMMING Easily creates rough layouts Powerful and intuitive diagramming tools enable fine control Enough design control to polish concept, but not cumbersome +
- 23. OmniGraffle VISIO INTEGRATION Import and export files to and from Visio Developers and BAs will like you more! +
- 24. OmniGraffle STRONG PAGE MANAGEMENT Locking layers and canvases help manipulate large documents Shared layers allow making single edit that applies to all canvases +
- 25. OmniGraffle LACK OF INTEGRATION FEATURES Prototyping functionality leaves much to be desired Mac only No real collaboration No support for annotations or documentation —
- 26. OmniGraffle LACK OF FIDELITY Ability to execute fine typography or pixel-perfect design is not near the level of InDesign —
- 28. • Axure RP $$$$ Growing in popularity with both UX communities and client teams Basic prototyping software, maturing into a very robust wireframing tool
- 29. Axure RP GREAT PROTOTYPING CAPABILITIES Quickly develop a very interactive prototype No coding or advanced techniques necessary +
- 30. Axure RP HIGHLY COLLABORATIVE Easy to share a project and work together (in Axure RP Pro) Allows for easy management of document structure with large projects +
- 31. Axure RP POWERFUL DOCUMENTATION TOOLS Add notes to the page or even specific elements Notes will be included when the spec document is generated +
- 32. Axure RP REUSABLE ELEMENTS Easy to use “masters” for page layouts; this will save time Masters are edited in isolation, sweeping changes update automatically +
- 33. Axure RP LACK OF TRADITIONAL OUTPUT Spec document contains a lot of information, but does not lay out annotations in-line with the wireframe Output can be more challenging for clients to follow —
- 34. Axure RP ROUGH DESIGN TOOLS Some basic controls are surprisingly unavailable —
- 35. Axure RP CHALLENGING COMPLEXITY Not immediately intuitive Formidable learning curve Rarely the best tool to start a project in —
- 37. • Balsamiq Mockups $$$$ Efficient “sketch” tool for lo-fi prototyping Popular among non-designers (clients, devs, etc.)
- 38. Balsamiq Mockups FAST AND ADAPTABLE Build prototypes with pre-made UI elements Naturally leverage interface conventions +
- 39. Balsamiq Mockups INTUITIVE INTERFACE Minimal learning curve (learn in a matter of minutes) Simple and fun to use +
- 40. Balsamiq Mockups PROPERLY CONTROLS THE DISCUSSION Isolate the scope of the conversation to “concept-only” Sketch style reminds viewers that this is only an idea Great for cultivating alignment (internally and externally) +
- 41. Balsamiq Mockups FORCES HIGH- LEVEL THINKING Working in stencils removes “rendering” from the process and allows the designer to focus on functionality and business value +
- 42. Balsamiq Mockups LACK OF FIDELITY Only two “styles:” Sketch and Wireframe Unable to modify many complex UI elements —
- 43. Balsamiq Mockups NOT VERY SCALABLE Primitive document management (each screen is its own file) Rudimentary prototyping functionality —
- 45. • Keynote $$$$ Presentation design software (“Apple’s PowerPoint”) Recently repurposed as a versatile prototyping tool
- 46. Keynote ROBUST ANIMATION/ TRANSITIONS Wide array of options for bringing your comps to life Combining multiple effects makes apps feel “real” Templates from Keynote Kung Fu (keynotekungfu.com) +
- 47. Keynote “MAGICALLY” EFFICIENT INTERFACE “Magic Move” is unbelievably easy to use Many other intuitive motion controls +
- 48. Keynote NOT BUILT FOR WIREFRAMING Closer to PowerPoint than Axure Detailed wires are possible, but often require workarounds —
- 49. Keynote CRUMBLES UNDER HEAVY WEIGHT 50+ page documents can often become unstable Inexplicable errors are not uncommon —
- 51. • Drawing $$$$ Since 30,000 B.C. (largest user base) Learned in kindergarten White board, pen & paper, digital sketching
- 52. DEMOCRATIZING Anyone can articulate an idea Involve full team (developers, PMs, writers) Get stakeholders involved upfront Drawing+
- 53. NO CONSTRAINTS Freedom to try anything Greater visibility into the process (how wireframes play a role) Drawing+
- 54. ADVANCED TECHNIQUES Alternate states with Post-its Photocopy templates pages to speed up iteration Drawing+
- 55. DIGITAL TRANSLATION Easily digitize sketches with scanners or mobile apps like TurboScan (turboscanapp.com) Digitized drawings can be turned into clickable demos with apps like Pop (popapp.in) Drawing+
- 56. DIGITAL SKETCHING Sketching on a tablet is quick and natural Everyone loves Paper for iPad (fiftythree.com) Drawing+
- 57. DOES NOT SCALE At a certain point, pen and paper becomes untenable Trying to articulate too many screens, animations, or advanced interaction is often impossible Drawing—
- 59. Portability Scalability Fidelity Agility Modularity Prototyping • INDESIGN • OMNIGRAFFLE • AXURE • BALSAMIQ • KEYNOTE • DRAWING 6 VIRTUES OF WIREFRAME TOOLS
- 63. Don’t limit yourself Tools define how we work and think Get comfortable with multiple tools Choose tools that fit your project, strengths, and team Stay curious and have fun
- 64. THANK YOU
- 65. DANA GI ULIAN A @XperienceArc WILL MILLAR @ideastate K EN SIGEL @kendoggz Q &A