The Designer's Guide to the Prototyping Galaxy

In this talk I am outlining the difference between rapid prototyping and interaction design tools, as well as pinpoint and demo best practices for both.

2. The Designer’s Guide to the Prototyping Galaxy @killnicole Victoria Leontieva
3. And people usually suck at predicting things. “Prototyping is a strategy for efficiently dealing with things that are hard to predict.” -Scott Klemmer
4. “Ideas are cheap, development is expensive.” -Jay Stakelon
5. 1. Build shared understanding; 2. Pitch to stakeholders; 3. Get feedback, test and validate ideas. What is it good for?
6. Prototyping is a disposable artefact.
7. • Scope of the prototype • Its aesthetics • Level of interaction realism The goal will define your prototype:
8. Limit the scope of the prototype.
9. How to select the prototyping tool?
10. “We currently have a few major schools of thinking. They roughly fall into 3 categories: Timeline, Signal Flow & Code.” -Pasquale D’Silva
11. Existing Tools Timeline
12. Existing Tools Node-based (or Signal Flow)
13. Existing Tools Click-Through
14. Existing Tools Code-based
15. Courtesy of
16. Courtesy of
17. Courtesy of
18. Courtesy of
19. Courtesy of
20. Courtesy of
21. Courtesy of
22. Courtesy of
23. Motion Design in Context of Prototyping
24. Fwshh! Pop! Ugh.
25. Seeing the implementation But
26. "If you're a designer, please learn motion design skills. At 60fps there's 58 frames you need to design between Mock A and Mock B.” -Paul Stamatiou
27. The Right Tool for the Right Job
28. User Testing with Prototypes
30. But
31. In-house user testing
32. Guerrilla user testing
33. Online user testing peek.usertesting.com
34. Prototyping is a disposable artefact. To Recap:
35. Limit the scope of the prototype. To Recap:
36. To Recap: The Right Tool for the Right Job
37. Click-through based tools are great for testing and getting feedback To Recap:
38. To Recap: Motion design is great for pitching ideas and explaining how animations work like to developers
39. Sanks @killnicole Victoria Leontieva
40. Incredibly Useful Links Providing Meaning with Motion The state of Interaction Design tools Transitional Interfaces 6 ways to save time in rapid prototyping
41. Credits Jay Stakelon Pasquale D’Silva & Noah Levin Photo Credit Paul Stamatiou Cassie Zhen & George Leontiev