Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks

568 views

Published on

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.

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks

  1. 1. Interactive Prototypes Jaideep Singh
  2. 2. Tools TIME FIDELITY Storyboards Prototypes Digital mockups HTML/CSS pages Dynamic pages (DB etc)
  3. 3. What is a prototype Picture credits: Wikipedia
  4. 4. Why prototype Quick visual representation All stakeholders on the same page Validate information architecture Early feedback
  5. 5. What is not a prototype Color & graphics Typography Detailed interactions Working application
  6. 6. Paper vs digital
  7. 7. You can draw A straight line Circle Rectangle Triangle Shade
  8. 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. 9. General guidelines Straight lines Spacing between elements Post-Its for components and for states Time limit the activity
  10. 10. Lifealytics demo http://www.youtube.com/watch?v=J- bVzUahNIg
  11. 11. Prototyping tools Solidify (Analytics) Invision (Collaboration) Antetype (Responsive) Balsamiq (Quick, minimal) Wires (In-browser) Proto.io (Animations)
  12. 12. Indigo Studio Storyboards Interactive wireframes Import paper wireframes Animated transitions Share FREE
  13. 13. The prototype Ecommerce app for a camera store Key categories Screens Product listing Product details
  14. 14. List Detail
  15. 15. Thank you! @_jaideep

×