ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo
Prototyping 
User Experience 
Robert Poppell
Prototyping 
A quick and cost-effective preview of your 
application¡¯s layout and interactivity.
Prototyping 
? Accessible 
? Cost-Effective 
? Rapid 
? Basic Demo of Interactivity
Part of UX Design 
? Information Architecture 
? Wireframing 
? Prototyping 
? Design 
? Implementation
Part of UX Design 
? Information Architecture 
? Wireframing 
? Design 
? Prototyping 
? Implementation
Part of UX Design 
? Information Architecture 
? Wireframing 
? Prototyping 
? Design 
? Prototyping 
? Implementation
Importance of Prototypes
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
Popular Prototyping Tools 
? Mockflow 
? Fluid UI 
? Marvel App 
? Invision App 
? Proto.io
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
Mockflow 
? Gentle learning curve 
? Large library of basic UI Elements 
? Ability to add annotations 
? Crude linking through hotspots
Fluid UI 
? Slightly steeper learning curve 
? Libraries of UI Elements 
? Storyboarding-type workflow 
? Basic Screen-to-screen linking and transitions 
? Preview on various devices
Mockflow / Fluid UI 
? Good for rough wireframes 
? Quick to create screens and make changes 
? Limited animations and interactivity 
? Focus on annotations
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
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
Marvel / Invision 
? Good for making hi-fedelity prototypes 
? Not well suited for true wireframing 
? Sleek presentation and animations
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
Proto.io 
? Best for defining complex mechanics of app 
? Great for wireframing or hi-fedelity comps 
? Greater control over animations and intricate interactions
Visit us Online! 
bluetubeinc.com

More Related Content

User Experience Prototyping

  • 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
  • 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