Tools of the Trade


Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Tools of the Trade

  1. 1. TOOLSof theTRADEAnalyzing the functionality and role ofwireframing tools in user experience design
  2. 2. DAN A GIULIA NA@XperienceArcExperience Architect,photographer, bikerRecent work withChrysler,Dunkin Donuts, Fidelity,Boston.comStudiedFilm atEmerson CollegeWILL MILLAR@ideastateThinker, maker,question-askerRecent work withFidelity Biosciences,MassArt,City of BostonStudiedGraphic Design atMassArtKEN SIGE L@kendoggzRunner, chef, problem solverRecent work withStaples,The Hartford,HumanaStudiedCreative Writing atWheaton College
  3. 3. Creative agency withmature UX department30+ experiencedesigners (Boston)Experience designshapes direction formost projects
  4. 4. Guide design & developmentFacilitate discussionBuild consensusWI RE F RA MES
  5. 5. VS VSVS VS
  6. 6. PortabilityScalabilityFidelityAgilityModularityPrototyping6 VIRTUES OF WIREFRAME TOOLS• Speed• Ease of iteration• Pixel perfectionof UI detail• Collaboration• Printing/PDFExporting• Reusablecomponents• Templates/styles• Exportinginteractive demos• Transitions/animation• Handling largedocumentstructures• Complexity ofpage elements
  7. 7. PortabilityScalabilityFidelityAgilityModularityPrototyping6 VIRTUESOFWIREFRAMETOOLS
  8. 8. • InDesign$$$$Adobe Creative SuitePowerful desktop publishingapplication (Pagemaker)Making inroads as a web andtablet publishing tool
  9. 9. InDesignUNLIMITEDCREATIVITYCreate anything youcan imagineTraditional vectordrawing toolsColumns, grids andguidesCommon imageblending and effects+
  10. 10. InDesignDETAILEDTYPOGRAPHYLimitless controlSimilar to CSSEasily handlesmassive texts+
  11. 11. InDesignPOWERFULSTYLESParagraph andcharacter styles forall text controlsObject styles arepowerful shortcutsfor UI componentsEasy to create+
  12. 12. InDesignLIBRARIESCreate once, useacross multiplewireframes orprojectsOrganize by objecttype (buttons, forms,navigation etc.)Share across yourteam+
  13. 13. EMBEDDOCUMENTSINTO ONEANOTHERCollaborate withother team membersUpdate instanceswith one clickInDesign+
  14. 14. ROBUST TABLESData is structured &alignedDetailed formattingImport from Excel(link to live .XLS file)InDesign+
  15. 15. LIMITEDINTERACTIVITYLimited hover andclick eventsObjects can animateand have statesPresent inclickable .PDFor .SWFInDesign—
  16. 16. STARTINGFROM SCRATCHNo pre-builtcomponents,libraries or stylesDeveloping yourown take some timeInDesign—
  17. 17. STEEPLEARNINGCURVENewbies needseveral days tobecome veryproductiveSo many features(I’m still learning!)Classes availableInDesign—
  18. 18. PortabilityScalabilityFidelityAgilityModularityPrototypingInDesign•
  19. 19. • OmniGraffle$$$$The Omni GroupDiagram design toolVersatile graphic design programwith many timesaving features
  20. 20. OmniGrafflePOWERFUL UI“STENCILS”GraffletopiaAlmost any UIelement you couldimagineRobust community isalways adding newcontent+
  21. 21. OmniGraffleGREATSKETCHING &DIAGRAMMINGEasily creates roughlayoutsPowerful andintuitivediagramming toolsenable fine controlEnough designcontrol to polishconcept, but notcumbersome+
  22. 22. OmniGraffleVISIOINTEGRATIONImport andexport files toand from VisioDevelopersand BAs will likeyou more!+
  23. 23. OmniGraffleSTRONG PAGEMANAGEMENTLocking layers andcanvases helpmanipulate largedocumentsShared layers allowmaking single editthat applies to allcanvases+
  24. 24. OmniGraffleLACK OFINTEGRATIONFEATURESPrototypingfunctionality leavesmuch to be desiredMac onlyNo realcollaborationNo support forannotations ordocumentation—
  25. 25. OmniGraffleLACK OFFIDELITYAbility to execute fine typography or pixel-perfectdesign is not near the level of InDesign—
  26. 26. OmniGrafflePortabilityScalabilityFidelityAgilityModularityPrototyping•
  27. 27. • Axure RP$$$$Growing in popularity with bothUX communities and client teamsBasic prototyping software,maturing into a very robustwireframing tool
  28. 28. Axure RPGREATPROTOTYPINGCAPABILITIESQuickly develop avery interactiveprototypeNo coding oradvanced techniquesnecessary+
  29. 29. Axure RPHIGHLYCOLLABORATIVEEasy to share aproject and worktogether (in AxureRP Pro)Allows for easymanagement ofdocument structurewith large projects+
  30. 30. Axure RPPOWERFULDOCUMENTATIONTOOLSAdd notes to the pageor even specificelementsNotes will be includedwhen the specdocument isgenerated+
  31. 31. Axure RPREUSABLEELEMENTSEasy to use“masters” forpage layouts; thiswill save timeMasters are editedin isolation,sweeping changesupdateautomatically+
  32. 32. Axure RPLACK OFTRADITIONALOUTPUTSpec documentcontains a lot ofinformation, butdoes not lay outannotations in-linewith the wireframeOutput can be morechallenging forclients to follow—
  33. 33. Axure RPROUGH DESIGNTOOLSSome basic controls are surprisinglyunavailable—
  34. 34. Axure RPCHALLENGINGCOMPLEXITYNot immediately intuitiveFormidable learning curveRarely the best tool to start a project in—
  35. 35. Axure RPPortabilityScalabilityFidelityAgilityModularityPrototyping•
  36. 36. • Balsamiq Mockups$$$$Efficient “sketch” tool for lo-fiprototypingPopular among non-designers(clients, devs, etc.)
  37. 37. Balsamiq MockupsFAST ANDADAPTABLEBuild prototypeswith pre-made UIelementsNaturally leverageinterface conventions+
  38. 38. Balsamiq MockupsINTUITIVEINTERFACEMinimal learningcurve (learn in amatter of minutes)Simple and funto use+
  39. 39. Balsamiq MockupsPROPERLYCONTROLS THEDISCUSSIONIsolate the scope ofthe conversation to“concept-only”Sketch style remindsviewers that this isonly an ideaGreat for cultivatingalignment (internallyand externally)+
  40. 40. Balsamiq MockupsFORCES HIGH-LEVEL THINKINGWorking in stencilsremoves “rendering”from the processand allows thedesigner to focus onfunctionality andbusiness value+
  41. 41. Balsamiq MockupsLACK OFFIDELITYOnly two “styles:”Sketch andWireframeUnable to modifymany complex UIelements—
  42. 42. Balsamiq MockupsNOT VERYSCALABLEPrimitive documentmanagement (eachscreen is its own file)Rudimentaryprototypingfunctionality—
  43. 43. Balsamiq MockupsPortabilityScalabilityFidelityAgilityModularityPrototyping•
  44. 44. • Keynote$$$$Presentation design software(“Apple’s PowerPoint”)Recently repurposed as aversatile prototyping tool
  45. 45. KeynoteROBUSTANIMATION/TRANSITIONSWide array ofoptions for bringingyour comps to lifeCombining multipleeffects makes appsfeel “real”Templates fromKeynote Kung Fu(
  46. 46. Keynote“MAGICALLY”EFFICIENTINTERFACE“Magic Move” isunbelievably easyto useMany other intuitivemotion controls+
  47. 47. KeynoteNOT BUILT FORWIREFRAMINGCloser toPowerPointthan AxureDetailed wiresare possible, butoften requireworkarounds—
  48. 48. KeynoteCRUMBLESUNDER HEAVYWEIGHT50+ pagedocuments canoften becomeunstableInexplicable errorsare not uncommon—
  49. 49. KeynotePortabilityScalabilityFidelityAgilityModularityPrototyping•
  50. 50. • Drawing$$$$Since 30,000 B.C.(largest user base)Learned in kindergartenWhite board, pen & paper,digital sketching
  51. 51. DEMOCRATIZINGAnyone canarticulate an ideaInvolve full team(developers, PMs,writers)Get stakeholdersinvolved upfrontDrawing+
  52. 52. NOCONSTRAINTSFreedom totry anythingGreater visibility intothe process (howwireframes play arole)Drawing+
  53. 53. ADVANCEDTECHNIQUESAlternate states withPost-itsPhotocopytemplates pages tospeed up iterationDrawing+
  54. 54. DIGITALTRANSLATIONEasily digitizesketches withscanners or mobileapps like TurboScan( drawingscan be turned intoclickable demoswith apps like Pop(
  55. 55. DIGITALSKETCHINGSketching on atablet is quick andnaturalEveryone lovesPaper for iPad(
  56. 56. DOES NOTSCALEAt a certain point, pen and paper becomes untenableTrying to articulate too many screens, animations, oradvanced interaction is often impossibleDrawing—
  57. 57. DrawingPortabilityScalabilityFidelityAgilityModularityPrototyping•
  58. 58. PortabilityScalabilityFidelityAgilityModularityPrototyping• INDESIGN• OMNIGRAFFLE• AXURE• BALSAMIQ• KEYNOTE• DRAWING6 VIRTUESOFWIREFRAMETOOLS
  59. 59. Don’t limit yourselfTools define how we workand thinkGet comfortable with multiple toolsChoose tools that fit your project,strengths, and teamStay curious and have fun
  60. 60. THANK YOU
  61. 61. DANA GI ULIAN A@XperienceArcWILL MILLAR@ideastateK EN SIGEL@kendoggzQ &A