Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Interactive prototyping

August 24, 2013

Interactive prototyping

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


August 24, 2013

More Decks by jaideepsingh

Other Decks in Design


  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