Rapid Prototyping

Prototyping is an important step in many different fields of design. This is no exception for user experience and interaction design. Not only can it help designers validate design concepts, prototyping can also increase the efficiency of development cycles because it's easier to communicate design requirements to developers via prototypes.


About Prototyping

Axure is one of my favorite prototyping tools because it can simulate very realistic functionalities and interaction logic without coding. The resulting prototype is essentially a website composed of HTML, CSS and Javascript. Moreover, Axure is not limited to prototyping website, they are also great for simulating mobile experiences. However, Axure does have a bit of a steeper learning curve.

InVision & Marvel are rapid prototyping tools most suitable for communicating flows. They deliver the rapid aspect of rapid prototyping flawlessly. An InVision prototype can literally be built within minutes. While I would not use these tools for prototyping very complex functionalities, they are probably the easiest prototyping tools for designers to pick up. They also offer great collaboration features. 

Flinto & Principle are both great tools for prototyping micro UI interactions and UI animations. The resulting prototype created by these tools are beautiful and hyper-realistic mobile experiences. They are the best tools for pushing the boundaries of UI interaction designs (on a visual level) without any coding.

Origami & FramerJS are definitely prototyping tools that have the steepest learning curves. They require the prototyper to have a background in at least basic programming concepts like loops, conditionals, and arrays. However, with these tools, there are also greater degrees of freedom in what can be created.


Additional Demo (open in new window): fish feeder appfunctionality logic demo (low-fidelity visual)