Storyboarding and Wireframe Tools Review
Download as PPT, PDF
13 likes13,789 views
The document discusses storyboard tools for software development. It provides an overview of what a storyboard is and lists several standalone and online storyboard tools. It then analyzes Axure RP and Pencil Project in more detail based on features, documentation, programmability, and other criteria. Axure RP excels at high-fidelity complex mockups but has a learning curve, while Pencil Project is free but more limited. Screenshots of the tools are also included.
Storyboarding and Wireframe Tools Review
- 1. Storyboard Tools for Software Development
- 2. What is a Storyboard? 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 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 The Storyboard technique was borrowed from the motion picture industry. Hughes Aircraft Company, STOP, 1965
- 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. Sketchboard
- 5. Wireframes
- 6. Storyboard
- 7. A user interface-flow diagram is also called a storyboard .
- 8. Standalone and Online Tools
- 9. Standalone Tools Adobe InDesign XCode 4 Storyboard Adobe Fireworks Axure RP Balsamiq Mockups ConceptDraw Diagram Designer Enterprise Architect FlairBuilder OmniGraffle OpenOffice Draw Pencil Project Microsoft Visio Microsoft Sketchflow WireframeSketcher iRise Pro Studio
- 10. Online Tools MockFlow Mockingbird Mockup Builder Pidoco fluidIA Gliffy iPLOTZ Lovely Charts Lucid Chart
- 11. Analysis of Alternatives Research and Findings
- 12. Comparison Criteria Chart Diagram UML Flowchart Collaboration Graph Workflow Drawing Custom Images Web Wireframe HTML5 Export Flash-based Vector Graphics Mockup Low Fidelity Mockup High Fidelity Wireframe Layout Wireframe Prototype Usability Testing Functional Specs Online Based Tool Standalone Tool Mac Windows Linux Cost Implementation
- 13. Recommended Tools Axure RP and Pencil Project
- 14. Tool Review for Axure RP Features Linking - Yes, through simple linking or through programmability. Exporting - Yes, to HTML and CHM files for stand alone viewing (note exports to PDF unavailable) Run-time viewer and annotations option - No, both the HTML and CHM version are read-only Web Browser Control widget - No Phone Widgets Support - Yes Programmability - Yes, fully programmable like changing click behavior in presentation mode UI Types Out of the Box - Generic, not tied to a UI or OS Third party support : Widgets available for OS X Specs Price $589 Single User License (PC + Mac) $539 per license (purchase 5 or more) Both come with 12 months of maintenance. Another year of maintenance updates costs $149. URL - http://www.axure.com/ Trial available - Yes, feature complete; 30 days Available from: http://www.axure.com/downloads.aspx Application Modes - Desktop, with a standalone installer Documentation - http://www.axure.com/online-training.aspx Instruction videos - http://www.axure.com/online-training-videos.aspx
- 15. Tool Review for Pencil Project Features Linking Yes, but not available when linking work in any of the export features Exporting - Yes; PNG, HTML, OpenOffice, MS Word and PDF (atter three require Export Templates downloadable from the official Pencil Project web site) Run-time viewer and annotations options - Can export as HTML; unable to annotate afterward Web Browser Control widget - No Phone Widgets Support - No; must use custom Programmability - Yes, fully programmable like changing click behavior in presentation mode UI Types Out of the Box - Generic, not tied to a UI or OS Third party support : Widgets available for OS X Specs Price - Free URL - http://pencil.evolus.vn/en-US/Home.aspx Trial available NA; http://pencil.evolus.vn/en-US/Home.aspx Application Modes - Desktop application on Windows and Linux; Firefox addon Documentation - Limited http://pencil.evolus.vn/en-US/UserGuides.aspx Instruction videos - Yes; OGG video (requires DirectShow filters for Windows) http://pencil.evolus.vn/en-US/UserGuides.aspx
- 16. Axure RP Review Summary 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. Axure RP has numerous tools and options for building high-fidelity, complex and programmable prototypes.
- 17. Pencil Project Review Summary Pencil Project is a no-cost, open source tool. This allows for it to have an excellent value for cost ratio. 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.
- 18. Tool IDE Screen Shots
- 19. Axure RP
- 20. Pencil Project
- 22. Adobe InDesign
- 24. Adobe Fireworks
- 25. Balsamiq Mockups
- 26. ConceptDraw
- 27. Diagram Designer
- 28. FlairBuilder
- 29. fluidIA
- 30. Gliffy
- 31. iPLOTZ
- 32. Lovely Charts
- 33. Lucid Chart
- 34. MockFlow
- 35. Mockingbird
- 36. Mockup Builder
- 37. OmniGraffle
- 38. OpenOffice Draw
- 39. Pidoco
- 40. Microsoft SketchFlow for Expression Blend 4
- 41. Microsoft Visio
Editor's Notes
- #3: Definition 1 Source: Massachusetts Institute of Technology, Course Product Design 2.744, http://web.mit.edu/2.744/www/index.html User experience design assignment: http://web.mit.edu/2.744/www/Project/Assignments/userExperienceDesign.html Definition 2 Source: Wikipedia; http://en.wikipedia.org/wiki/Storyboard Statement 1 Source: University of Washington, Human Centered Design and Engineering, Information Design HCDE 510 Course, , http://faculty.washington.edu/farkas/TC510/STOP_Original%20Report.pdf Reprint of publication, Sequential Thematic Organization of Publications, Storyboarding A New Way To Outline, p. 25, 1965, Hughes Aircraft Company Reprint, Journal of Computer Documentation, August 1999/Vol 23, No. 3
- #4: Statement 1 Source: University of Washington, Human Centered Design and Engineering, Information Design HCDE 510 Course, , http://faculty.washington.edu/farkas/TC510/STOP_Original%20Report.pdf Reprint of publication, Sequential Thematic Organization of Publications, Storyboarding A New Way To Outline, p. 25, 1965, Hughes Aircraft Company Reprint, Journal of Computer Documentation, August 1999/Vol 23, No. 3
- #5: Sketchboard for mobile dictionary application. Source: http://mattiassaks.com/mobile-interactions-sketches/
- #6: Wireframe for mobile dictionary application. Source: http://mattiassaks.com/mobile-interactions-sketches/
- #7: Monster Belly Storyboards v2.0 built using OmniGraffle by Theresa Neil. If the audience is developers I walk through the application and discuss the flow and features, if the audience is the client or their end users, I stick to the story in the storyboard. - Theresa Neil WHAT CAN WE PICKUP ON THE WAY HOME? A vegetarian couple on the way home from work decides on Asian food for dinner. They want to order and pay for the food while driving. They use their GPS device to compare restaurants based on menu options, price, proximity, and popularity before placing their order. They end up ordering from their favorite restaurant and paying with their PayPal pin. MIDNIGHT DUMPLING CRAVING After a long flight into Austin, an un-named famous musician is starving for dumplings. Using the GPS in his rental car, he searches for the best and closets dumplings, orders and pays with his PayPal pin on the way to the restaurant. Source: http://theresaneil.wordpress.com/2009/12/06/protocast_with_balsamiq/
- #8: Statement 1 Source: Scott W. Ambler, IBM as Chief Methodologist for Agile and Lean within IBM Rational, Introduction to User Interface Flow Diagrams, http://www.agilemodeling.com/artifacts/uiFlowDiagram.htm Excerpt 1: User interface-flow diagrams also called storyboards, interface-flow diagrams, windows navigation diagrams, and context-navigation maps enable you to model the high-level relationships between major user interface elements and thereby ask fundamental usability questions. Excerpt 2, referring to the storyboard pictured above: when you are on the Desktop screen, you can use the Students Icon to take you to the Search for Students screen. Once you are there, you can either go back to the desktop (going back is always assumed) or go to the Student Profile screen.
- #13: Cost and implementation criteria were more weighted areas.
- #20: Axure RP IDE and Wireframes
- #21: Pencil Project IDE and Wireframe
- #22: Enterprise Architect IDE and Wireframe
- #23: Adobe InDesign IDE and Storyboard Wireframes
- #24: XCode 4 Storyboard
- #25: Adobe Fireworks CS4 IDE and Wireframe
- #26: Balsamiq Mockups IDE and Wireframe
- #27: ConceptDraw IDE and Wireframe
- #28: Diagram Designer IDE
- #29: FlairBuilder IDE and Wireframe
- #30: fluidIA IDE and Wireframe
- #31: Gliffy Wireframe
- #32: iPLOTZ IDE and Wireframe
- #33: Lovely Charts IDE and Wireframe
- #34: Lucid Chart IDE and Wireframe
- #35: MockFlow Wireframe
- #36: Mockingbird IDE and Wireframe
- #37: Mockup Builder IDE and Wireframe
- #38: OmniGraffle IDE and Wireframe
- #39: OpenOffice Draw IDE and Diagram
- #40: Pidoco IDE and Wireframe
- #42: Microsoft Visio IDE
- #43: WireframeSketcher for Eclipse IDE and Wireframe