Prototyping Weapons

Choosing right prototype tool for the right interaction

Posted on 2016-08-12

What would be the best way to validate flow and test user behaviour? Best choice would be low and high fidelity prototypes which are easier to build and update based on the user studies. But to valid prototype in short duration, choosing the right tool is very much necessary. I am trying to group prototype tools based on their complexity and features.

Page Level Prototypes

If you are planning to take the user through screen to screen flow, then Page Level Prototypes are the right tools for you. With these kind of prototypes, designers can create navigation from one page to another, with different kind of transitions like fade, slide, pop etc.

Example for such type of prototyping tools are Invision, Marvel, Principle, Flinto and many more. Some of them have options to create overlays which would allow you to create popovers and modal windows.


Component Level Prototypes

These are the prototyping tools which will allow designers to simulate prototypes with little more advanced options then the earlier one. If you want to simulate animation and complex interactive systems, then these prototypes are the right tool for you.

These tools allow you to manipulate the first state of interaction with the next by moving and replacing components in and out the art boards. Change in component state can be mimicked by  transformations & user gestures like swipe, pinch and zoom.

Some of such prototype tools are Origami, Atomic, Principle, Sliver and Pixate Studio.

Micro Interaction Prototypes

These are the much advanced prototype tools allows to build micro interactions through scripts or inbuilt logical modulations. If your prototype is based lots of if’s and else’s, then these are the right tools for you. Event libraries, advanced animation, easing curves and HTML rendering are some of the best features these tools can offer.

Origami and Framer.js are two of the best tools which allows designers to build precise interactions. Framer needs programming skills like coffee script where as Origami is simply based on logical connectors called Patches.

Some the examples are

  1. Simulate lazy loading with animation.
  2. Transform cards from one shape to another
  3. Multi conditional states

Hope this article was useful for you. Happy Prototyping !!