Storyboard Tools for Software Development
What is a Storyboard? <ul><li>“ A  storyboard  is a series of panels that depict key scenes, actions, visuals, and annotat...
The Storyboard technique was borrowed from the motion picture industry. Each sheet is brought to life with just enough det...
Sketchboard
Wireframes
Storyboard
A  user interface-flow diagram  is also called a  storyboard .
Standalone and Online Tools
Standalone Tools <ul><li>Adobe InDesign </li></ul><ul><li>XCode 4 Storyboard </li></ul><ul><li>Adobe Fireworks </li></ul><...
Online Tools <ul><li>MockFlow </li></ul><ul><li>Mockingbird </li></ul><ul><li>Mockup Builder </li></ul><ul><li>Pidoco </li...
Analysis of Alternatives Research and Findings
Comparison Criteria <ul><li>Chart </li></ul><ul><li>Diagram </li></ul><ul><li>UML </li></ul><ul><li>Flowchart </li></ul><u...
Recommended Tools Axure RP and Pencil Project
Tool Review for Axure RP <ul><li>Features </li></ul><ul><li>Linking  - Yes, through simple linking or through  programmabi...
Tool Review for Pencil Project <ul><li>Features </li></ul><ul><li>Linking  – Yes, but not available when linking work  in ...
Axure RP Review Summary <ul><li>Axure RP is excellent in creating high-fidelity, complex mockups requiring numerous intera...
Pencil Project Review Summary <ul><li>Pencil Project is a no-cost, open source tool. This allows for it to have an excelle...
Tool IDE Screen Shots
Axure RP
Pencil Project
Enterprise Architect
Adobe InDesign
XCode 4 Storyboard
Adobe Fireworks
Balsamiq Mockups
ConceptDraw
Diagram Designer
FlairBuilder
fluidIA
Gliffy
iPLOTZ
Lovely Charts
Lucid Chart
MockFlow
Mockingbird
Mockup Builder
OmniGraffle
OpenOffice Draw
Pidoco
Microsoft SketchFlow for Expression Blend 4
Microsoft Visio
WireframeSketcher for Eclipse
Upcoming SlideShare
Loading in...5
×

Storyboarding and Wireframe Tools Review

14,085
-1

Published on

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

Published in: Technology, Business
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
14,085
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
215
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide
  • 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
  • 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
  • Sketchboard for mobile dictionary application. Source: http://mattiassaks.com/mobile-interactions-sketches/
  • Wireframe for mobile dictionary application. Source: http://mattiassaks.com/mobile-interactions-sketches/
  • 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/
  • 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.”
  • Cost and implementation criteria were more weighted areas.
  • Axure RP IDE and Wireframes
  • Pencil Project IDE and Wireframe
  • Enterprise Architect IDE and Wireframe
  • Adobe InDesign IDE and Storyboard Wireframes
  • XCode 4 Storyboard
  • Adobe Fireworks CS4 IDE and Wireframe
  • Balsamiq Mockups IDE and Wireframe
  • ConceptDraw IDE and Wireframe
  • Diagram Designer IDE
  • FlairBuilder IDE and Wireframe
  • fluidIA IDE and Wireframe
  • Gliffy Wireframe
  • iPLOTZ IDE and Wireframe
  • Lovely Charts IDE and Wireframe
  • Lucid Chart IDE and Wireframe
  • MockFlow Wireframe
  • Mockingbird IDE and Wireframe
  • Mockup Builder IDE and Wireframe
  • OmniGraffle IDE and Wireframe
  • OpenOffice Draw IDE and Diagram
  • Pidoco IDE and Wireframe
  • Microsoft Visio IDE
  • WireframeSketcher for Eclipse IDE and Wireframe
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×