Storyboarding and Wireframe Tools Review
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Storyboarding and Wireframe Tools Review

on

  • 12,728 views

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

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

Statistics

Views

Total Views
12,728
Views on SlideShare
12,728
Embed Views
0

Actions

Likes
12
Downloads
177
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation Transcript

  • 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
  • 21. Enterprise Architect
  • 22. Adobe InDesign
  • 23. XCode 4 Storyboard
  • 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
  • 42. WireframeSketcher for Eclipse