Getting ideas down on paper and whiteboards is an important first step when creating a new product, or going through a redesign. Sketching ideas gives team members and other stakeholders an early visual for how a product is going to appear, but sketches have several limitations.

Even wireframes – the next stage after sketches – can’t capture dynamic elements, such as flow, interaction and animation. Product managers, designers and developers can’t walk stakeholders through the user-experience with static images, which is why clickable prototypes play such a valuable role in product development.

Firstly, I should clarify what a prototype is not.

A wireframe is not a clickable prototype. Neither is a visual mockup. Anything that is static is not a prototype. At the same time, a clickable prototype is not the final product. It won’t look like the final product; it won’t, for example, have high fidelity or look amazing.

Designing and developing a product is a complex iterative process, from conceptualisation to final delivery. None of this would be possible without user testing, especially if you are applying Lean principles. Consequently, you can’t apply effective testing without a version of the product that allows high degrees of interactivity, which is the purpose of clickable prototypes.

What is a clickable prototype?

Prototypes are product simulations, interactive mockups that can take users through the various features of the product. They don’t necessarily need to look great – since that would take more time – but they do need to test whether the flow, the user journey through the product is smooth, consistent and easy to navigate.

Not only are clickable prototypes invaluable from a testing and a UX perspective, but often discoveries that influence the product development and features emerge as a result of early-stage prototype user experiences.

making sketches and wireframes

Although wireframes can’t replicate the journey a user takes through a product, you can use high fidelity wireframe drawings in some clickable prototypes, if they are loaded and connected using prototyping software.

Now you are clear on what a prototype is – and isn’t – let’s take a look at some of the most popular prototyping tools on the market.

Tools to create clickable prototypes

 

#1: InVision

 

InVision prototypingWith over 2 million designers and dozens of enterprise-scale brands as clients, including Salesforce, Evernote, Nike and Sony, InVision is one of the most popular prototyping tools around. Pricing starts at Free – forever – for 1 prototype, with unlimited prototypes from $25 per month.

Invision app interface

InVision has a clean, easy-to-use interface, not too complex and not too simple; with three preloaded demos (and a video) so you can get a better feel of how to use InVision before starting work on your own projects. Collaboration is easy, with tabs designed to make it simple to share designs with colleagues or clients.

#2: Webflow

 

Webflow prototype

Webflow is positioning itself away from traditional prototyping tools, ever since it launched a CMS for prototypes. Developers that have tried it prefer it to WordPress, with it possible for you to create a prototype, then turn your design into a production-ready site with a touch o