Embed Size (px)
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.
Citation preview
Interactive Prototypes
Jaideep Singh
Tools
TIME
FIDELITY
Storyboards
Prototypes
Digital mockups
HTML/CSS pages
Dynamic pages (DB etc)
What is a prototype
Picture credits: Wikipedia
Why prototype
Quick visual representation
All stakeholders on the same page
Validate information architecture
Early feedback
What is not a prototype
Color & graphics
Typography
Detailed interactions
Working application
Paper vs digital
You can draw
A straight line
Circle
Rectangle
Triangle
Shade
Paper prototype
Create a todo app
List of tasks
Option to mark tasks done
Option to delete tasks
Group tasks as completed and incomplete
General guidelines
Straight lines
Spacing between elements
Post-Its for components and for states
Time limit the activity
Lifealytics demo
http://www.youtube.com/watch?v=J-bVzUahNIg
Prototyping toolsSolidify (Analytics)
Invision (Collaboration)
Antetype (Responsive)
Balsamiq (Quick, minimal)
Wires (In-browser)
Proto.io (Animations)
Indigo StudioStoryboards
Interactive wireframes
Import paper wireframes
Animated transitions
Share
FREE
The prototype
Ecommerce app for a camera store
Key categories
Screens
Product listing
Product details
List Detail
![[ThoughtWorks] Perforce for Release Engineers](https://img.dokumen.tips/doc/110x75/5484017fb07959150c8b4a86/thoughtworks-perforce-for-release-engineers.jpg)
