Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Storyboarding and Wireframe Tools Review

17,140 views

Published on

Storyboarding and wireframing tools history, definition, and identification of current tools.

Published in: Technology, Business
  • Be the first to comment

Storyboarding and Wireframe Tools Review

  1. 1. Storyboard Tools for Software Development
  2. 2. What is a Storyboard? <ul><li>“ A storyboard is a series of panels that depict key scenes, actions, visuals, and annotations that define the highlights of a user experience.” – MIT user experience design assignment </li></ul><ul><li>“ Storyboards are graphic organizers in the form of illustrations or images displayed in sequence for the purpose of pre-visualizing a motion picture, animation, motion graphic or interactive media sequence.” – Wikipedia </li></ul><ul><li>“ The Storyboard technique was borrowed from the motion picture industry.” – Hughes Aircraft Company, STOP, 1965 </li></ul>
  3. 3. The Storyboard technique was borrowed from the motion picture industry. Each sheet is brought to life with just enough detail, and means the same thing to all viewers because of its limited thematic dimensions. Gallery effect shows whole strategy, spots loopholes and overlaps.
  4. 4. Sketchboard
  5. 5. Wireframes
  6. 6. Storyboard
  7. 7. A user interface-flow diagram is also called a storyboard .
  8. 8. Standalone and Online Tools
  9. 9. Standalone Tools <ul><li>Adobe InDesign </li></ul><ul><li>XCode 4 Storyboard </li></ul><ul><li>Adobe Fireworks </li></ul><ul><li>Axure RP </li></ul><ul><li>Balsamiq Mockups </li></ul><ul><li>ConceptDraw </li></ul><ul><li>Diagram Designer </li></ul><ul><li>Enterprise Architect </li></ul><ul><li>FlairBuilder </li></ul><ul><li>OmniGraffle </li></ul><ul><li>OpenOffice Draw </li></ul><ul><li>Pencil Project </li></ul><ul><li>Microsoft Visio </li></ul><ul><li>Microsoft Sketchflow </li></ul><ul><li>WireframeSketcher </li></ul><ul><li>iRise Pro Studio </li></ul>
  10. 10. Online Tools <ul><li>MockFlow </li></ul><ul><li>Mockingbird </li></ul><ul><li>Mockup Builder </li></ul><ul><li>Pidoco </li></ul><ul><li>fluidIA </li></ul><ul><li>Gliffy </li></ul><ul><li>iPLOTZ </li></ul><ul><li>Lovely Charts </li></ul><ul><li>Lucid Chart </li></ul>
  11. 11. Analysis of Alternatives Research and Findings
  12. 12. Comparison Criteria <ul><li>Chart </li></ul><ul><li>Diagram </li></ul><ul><li>UML </li></ul><ul><li>Flowchart </li></ul><ul><li>Collaboration </li></ul><ul><li>Graph </li></ul><ul><li>Workflow </li></ul><ul><li>Drawing </li></ul><ul><li>Custom Images </li></ul><ul><li>Web Wireframe </li></ul><ul><li>HTML5 Export </li></ul><ul><li>Flash-based </li></ul><ul><li>Vector Graphics </li></ul><ul><li>Mockup Low Fidelity </li></ul><ul><li>Mockup High Fidelity </li></ul><ul><li>Wireframe Layout </li></ul><ul><li>Wireframe Prototype </li></ul><ul><li>Usability Testing </li></ul><ul><li>Functional Specs </li></ul><ul><li>Online Based Tool </li></ul><ul><li>Standalone Tool </li></ul><ul><li>Mac </li></ul><ul><li>Windows </li></ul><ul><li>Linux </li></ul><ul><li>Cost </li></ul><ul><li>Implementation </li></ul>
  13. 13. Recommended Tools Axure RP and Pencil Project
  14. 14. Tool Review for Axure RP <ul><li>Features </li></ul><ul><li>Linking - Yes, through simple linking or through programmability. </li></ul><ul><li>Exporting - Yes, to HTML and CHM files for stand alone viewing (note exports to PDF unavailable) </li></ul><ul><li>Run-time viewer and annotations option - </li></ul><ul><li>No, both the HTML and CHM version are read-only </li></ul><ul><li>Web Browser Control widget - No </li></ul><ul><li>Phone Widgets Support - Yes </li></ul><ul><li>Programmability - Yes, fully programmable like changing click behavior in presentation mode </li></ul><ul><li>UI Types Out of the Box - Generic, not tied to a UI or OS </li></ul><ul><li>Third party support : Widgets available for OS X </li></ul><ul><li>Specs </li></ul><ul><li>Price $589 Single User License (PC + Mac) </li></ul><ul><li>$539 per license (purchase 5 or more) </li></ul><ul><li>Both come with 12 months of maintenance. Another year of maintenance updates costs $149. </li></ul><ul><li>URL - http://www.axure.com/ </li></ul><ul><li>Trial available - Yes, feature complete; 30 days Available from: http://www.axure.com/downloads.aspx </li></ul><ul><li>Application Modes - Desktop, with a standalone installer </li></ul><ul><li>Documentation - </li></ul><ul><li>http://www.axure.com/online-training.aspx </li></ul><ul><li>Instruction videos - </li></ul><ul><li>http://www.axure.com/online-training-videos.aspx </li></ul>
  15. 15. Tool Review for Pencil Project <ul><li>Features </li></ul><ul><li>Linking – Yes, but not available when linking work in any of the export features </li></ul><ul><li>Exporting - Yes; PNG, HTML, OpenOffice, MS Word and PDF (atter three require Export Templates downloadable from the official Pencil Project web site) </li></ul><ul><li>Run-time viewer and annotations options - </li></ul><ul><li>Can export as HTML; unable to annotate afterward </li></ul><ul><li>Web Browser Control widget - No </li></ul><ul><li>Phone Widgets Support - No; must use custom </li></ul><ul><li>Programmability - Yes, fully programmable like changing click behavior in presentation mode </li></ul><ul><li>UI Types Out of the Box - Generic, not tied to a UI or OS </li></ul><ul><li>Third party support : Widgets available for OS X </li></ul><ul><li>Specs </li></ul><ul><li>Price - Free </li></ul><ul><li>URL - http://pencil.evolus.vn/en-US/Home.aspx </li></ul><ul><li>Trial available – NA; </li></ul><ul><li>http://pencil.evolus.vn/en-US/Home.aspx </li></ul><ul><li>Application Modes - Desktop application on Windows and Linux; Firefox addon </li></ul><ul><li>Documentation - Limited </li></ul><ul><li>http://pencil.evolus.vn/en-US/UserGuides.aspx </li></ul><ul><li>Instruction videos - Yes; OGG video (requires DirectShow filters for Windows) </li></ul><ul><li> http://pencil.evolus.vn/en-US/UserGuides.aspx </li></ul>
  16. 16. Axure RP Review Summary <ul><li>Axure RP is excellent in creating high-fidelity, complex mockups requiring numerous interactions. The tool has a small learning curve, especially building complex interactions with programmed behavior. Lots of documentation is available. </li></ul><ul><li>Axure RP has numerous tools and options for building high-fidelity, complex and programmable prototypes. </li></ul>
  17. 17. Pencil Project Review Summary <ul><li>Pencil Project is a no-cost, open source tool. This allows for it to have an excellent value for cost ratio. </li></ul><ul><li>Pencil Project has limited documentation and support which contributes to its “rough on the edges” feel. In addition, it has a several issues that have made it difficult to work with. </li></ul>
  18. 18. Tool IDE Screen Shots
  19. 19. Axure RP
  20. 20. Pencil Project
  21. 21. Enterprise Architect
  22. 22. Adobe InDesign
  23. 23. XCode 4 Storyboard
  24. 24. Adobe Fireworks
  25. 25. Balsamiq Mockups
  26. 26. ConceptDraw
  27. 27. Diagram Designer
  28. 28. FlairBuilder
  29. 29. fluidIA
  30. 30. Gliffy
  31. 31. iPLOTZ
  32. 32. Lovely Charts
  33. 33. Lucid Chart
  34. 34. MockFlow
  35. 35. Mockingbird
  36. 36. Mockup Builder
  37. 37. OmniGraffle
  38. 38. OpenOffice Draw
  39. 39. Pidoco
  40. 40. Microsoft SketchFlow for Expression Blend 4
  41. 41. Microsoft Visio
  42. 42. WireframeSketcher for Eclipse

×