PrototypingUser ExperienceRobert Poppell

PrototypingA 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

bluetubeinc.comVisit us Online!