Your SlideShare is downloading. ×
Software Tools of Experience Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Software Tools of Experience Design

453
views

Published on

A presentation at UXPA Boston by Dana Giuliana, Will Millar and Ken Sigel in May 2013. It discusses the popular tools we use to create wireframes - their strengths and weaknesses and encourages …

A presentation at UXPA Boston by Dana Giuliana, Will Millar and Ken Sigel in May 2013. It discusses the popular tools we use to create wireframes - their strengths and weaknesses and encourages designers to get beyond using a single tool since there is no tool that does everything we need.

Published in: Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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