Interactive prototyping

A workshop on interactive prototyping using Indigo Studio - BA Conf, 2013

Transcript

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 (v1.x)
13. The prototype Ecommerce app for a camera store Key categories Screens Product listing Product details
14. List Detail
15. Thank you! @_jaideep