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

The Designer's Guide to the Prototyping Galaxy

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.

Victoria Leontieva

February 09, 2016

More Decks by Victoria Leontieva

Other Decks in Design


  1. None
  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

  29. None
  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