The document outlines the importance of prototyping in user experience design, highlighting its cost-effectiveness and ability to provide early client feedback. It details popular prototyping tools like Mockflow, Fluid UI, Marvel App, InVision, and Proto.io, along with their pricing and features. Prototyping helps in guiding coding, previewing the final product, and facilitating easier maintenance and changes.

1. Prototyping
User Experience
Robert Poppell

2. Prototyping
A quick and cost-effective preview of your
application’s layout and interactivity.

3. Prototyping
• Accessible
• Cost-Effective
• Rapid
• Basic Demo of Interactivity

4. Part of UX Design
• Information Architecture
• Wireframing
• Prototyping
• Design
• Implementation

5. Part of UX Design
• Information Architecture
• Wireframing
• Design
• Prototyping
• Implementation

6. Part of UX Design
• Information Architecture
• Wireframing
• Prototyping
• Design
• Prototyping
• Implementation

7. Importance of Prototypes

8. Importance of Prototypes
• Better guide for coding
• Accurate preview of Final Product
• Avoid having to make time-intensive changes later
• Changes and input from clients can come earlier
• Easy to maintain

9. Popular Prototyping Tools
• Mockflow
• Fluid UI
• Marvel App
• Invision App
• Proto.io

10. Pricing
• Mockflow - $14 a month - Unlimited Projects
• Fluid UI - $12 a month - 1 Active Project
• Marvel App - FREE
• Invision App - $25 a month - Unlimited Projects
• Proto.io - $24 a month - 5 active projects

11. Mockflow
• Gentle learning curve
• Large library of basic UI Elements
• Ability to add annotations
• Crude linking through hotspots

12. Fluid UI
• Slightly steeper learning curve
• Libraries of UI Elements
• Storyboarding-type workflow
• Basic Screen-to-screen linking and transitions
• Preview on various devices

13. Mockflow / Fluid UI
• Good for rough wireframes
• Quick to create screens and make changes
• Limited animations and interactivity
• Focus on annotations

14. Marvel App
• Links directly to DropBox account for easy updates
• No UI Elements or wireframing tools
• Robust animations and transitions
• Sleek preview mode on various devices

15. Invision App
• Manually upload images
• Syncs to DropBox, Invision Folder, Box (coming soon)
• No UI Elements or wireframing tools
• Robust animations and transitions selection
• Sleek preview mode on various devices
• Viewer collaboration through commenting

16. Marvel / Invision
• Good for making hi-fedelity prototypes
• Not well suited for true wireframing
• Sleek presentation and animations

17. Proto.io
• Cloud based
• Large library of device templates and UI Elements
• Robust animations and transitions selection
• Sleek preview mode on various devices
• Ability to add images

18. Proto.io
• Best for defining complex mechanics of app
• Great for wireframing or hi-fedelity comps
• Greater control over animations and intricate interactions

19. Visit us Online!
bluetubeinc.com