There are a lot of tools available for rapid prototyping which can be used to create neat prototypes within hours. However, the prototypes don't really give any idea about the user flow and how they connect with each other. Also, if you're doing paper prototypes, it gets very hard to present them as a flow. With Indigo Studio, we'll learn how we can create effective prototypes and link them together in a user flow. Choose to import your existing paper or digital prototypes, or build new ones from scratch. Bring your prototypes to life with interactions like click, mouseover, right click, etc. All this and more, in this learning session about interactive prototypes.

1. Interactive
Prototypes
Jaideep Singh

2. Tools
TIME
FIDELITY
Storyboards
Prototypes
Digital mockups
HTML/CSS pages
Dynamic pages (DB etc)

3. What is a prototype
Picture credits: Wikipedia

4. Why prototype
Quick visual representation
All stakeholders on the same page
Validate information architecture
Early feedback

5. What is not a
prototype
Color & graphics
Typography
Detailed interactions
Working application

6. Paper vs digital

7. You can draw
A straight line
Circle
Rectangle
Triangle
Shade

8. Paper prototype
Create a todo app
List of tasks
Option to mark tasks done
Option to delete tasks
Group tasks as completed and
incomplete

9. General guidelines
Straight lines
Spacing between elements
Post-Its for components and for
states
Time limit the activity

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

11. Prototyping tools
Solidify (Analytics)
Invision (Collaboration)
Antetype (Responsive)
Balsamiq (Quick, minimal)
Wires (In-browser)
Proto.io (Animations)

12. Indigo Studio
Storyboards
Interactive wireframes
Import paper wireframes
Animated transitions
Share
FREE

13. The prototype
Ecommerce app for a camera store
Key categories
Screens
Product listing
Product details

14. List Detail

15. Thank you!
@_jaideep