Interactive Prototypes

Jaideep Singh

Tools

TIME

FIDELITY

Storyboards

Prototypes

Digital mockups

HTML/CSS pages

Dynamic pages (DB etc)

What is a prototype

Picture credits: Wikipedia

Why prototype

Quick visual representation

All stakeholders on the same page

Validate information architecture

Early feedback

What is not a prototype

Color & graphics

Typography

Detailed interactions

Working application

Paper vs digital

You can draw

A straight line

Circle

Rectangle

Triangle

Shade

Paper prototype

Create a todo app

List of tasks

Option to mark tasks done

Option to delete tasks

Group tasks as completed and incomplete

General guidelines

Straight lines

Spacing between elements

Post-Its for components and for states

Time limit the activity

Lifealytics demo

http://www.youtube.com/watch?v=J-bVzUahNIg

Prototyping toolsSolidify (Analytics)

Invision (Collaboration)

Antetype (Responsive)

Balsamiq (Quick, minimal)

Wires (In-browser)

Proto.io (Animations)

Indigo StudioStoryboards

Interactive wireframes

Import paper wireframes

Animated transitions

Share

FREE

The prototype

Ecommerce app for a camera store

Key categories

Screens

Product listing

Product details

List Detail

Thank you!@_jaideep