prototyping to the next level with interactive prototypes - jaideep singh, thoughtworks
Post on 21-Oct-2014
442 views
DESCRIPTION
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.TRANSCRIPT
![Page 1: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/1.jpg)
Interactive Prototypes
Jaideep Singh
![Page 2: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/2.jpg)
Tools
TIME
FIDELITY
Storyboards
Prototypes
Digital mockups
HTML/CSS pages
Dynamic pages (DB etc)
![Page 3: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/3.jpg)
What is a prototype
Picture credits: Wikipedia
![Page 4: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/4.jpg)
Why prototype
Quick visual representation
All stakeholders on the same page
Validate information architecture
Early feedback
![Page 5: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/5.jpg)
What is not a prototype
Color & graphics
Typography
Detailed interactions
Working application
![Page 6: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/6.jpg)
Paper vs digital
![Page 7: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/7.jpg)
You can draw
A straight line
Circle
Rectangle
Triangle
Shade
![Page 8: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/8.jpg)
Paper prototype
Create a todo app
List of tasks
Option to mark tasks done
Option to delete tasks
Group tasks as completed and incomplete
![Page 9: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/9.jpg)
General guidelines
Straight lines
Spacing between elements
Post-Its for components and for states
Time limit the activity
![Page 10: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/10.jpg)
Lifealytics demo
http://www.youtube.com/watch?v=J-bVzUahNIg
![Page 11: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/11.jpg)
Prototyping toolsSolidify (Analytics)
Invision (Collaboration)
Antetype (Responsive)
Balsamiq (Quick, minimal)
Wires (In-browser)
Proto.io (Animations)
![Page 12: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/12.jpg)
Indigo StudioStoryboards
Interactive wireframes
Import paper wireframes
Animated transitions
Share
FREE
![Page 13: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/13.jpg)
The prototype
Ecommerce app for a camera store
Key categories
Screens
Product listing
Product details
![Page 14: Prototyping to the next level with interactive prototypes - Jaideep Singh, ThoughtWorks](https://reader034.vdocuments.mx/reader034/viewer/2022050919/54467a15b1af9fd33a8b4629/html5/thumbnails/14.jpg)
List Detail