This is a presentation that overviews User Experience and User Interface. UI & UX design tools help app developers work efficiently. Learn more!

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