How do I choose a prototyping tool?

When choosing a prototyping tool, consider factors such as your project requirements, user interface preferences, collaboration capabilities, learning curve, and budget to find the best fit.

Insights

Making Prototype: Best Tools to Choose From

Aleh Kanoika

Tech Lead

7 mins | March 28, 2022

A close-up of a watercolor painting on a piece of paper

The term prototype is used in many spheres of life starting from healthcare and finishing with manufacturing. Prototyping in software engineering means the activity of creating models of software apps, which are incomplete versions of software programs. Such prototypes can and definitely will vary greatly from the final product version.

Why build prototypes?

There are several strong advantages that prototyping brings including:

Prototyping helps to explore and try out functionality or/and design ideas aiming to increase innovation, creativity, and attractiveness of the product;
Prototype development validates design and functionality requirements;
It reduces risks and costs for developing poor designs and extra functionality;
Coding rework is being kept to a minimum.

What are the stages of a typical prototype development process?

Like any other development process, prototype development has its own stages. Some general steps include:

Basic requirements identification.

Basic and principal requirements are being determined. Attention is paid to the core functionality and details such as security issues, safety, and beautiful design can be ignored.

Initial prototype development.

The prototype consisting of user interfaces is developed.

Prototype review.

Potential customers examine and check the prototype and express their opinion on it, and share their feedback and reaction. They can also provide their ideas on improvement and additions.

Prototype revision and enhancement.

During the final stage, with the help of the feedback received before the prototype is being improved. If changes are introduced and their necessity has been negotiated and agreed on, then stages 3 and 4 can be required.

How to choose a tool for prototype development?

As the advantages of prototyping get validated by more and more companies, new tools for building prototypes appear. All of them have their own characteristics such as fidelity level, collaboration and sharing level, usability and testing availability, support, device testing level, etc. Some of the tools provide quick development, so it takes less time to launch a prototype. Other tools are good at simulation the intended interactivity of the prototype.

So, which things should be addressed while choosing the most applicable prototype development tool to match your requirements and needs? Before you start, answer the following set of questions to make a decision in favor of any tool:

How much time do I have for prototype development? How much time are you ready to spend on building the preliminary model of your idea? The amount of time required for a prototype development is strongly influenced by the ease of use and learnability of the tool itself. Of course, in this vision the quicker the better.
Will I have a chance to simulate well the intended interactivity of the prototype with the help of the tool? It means that you have to check whether the tool you are going to give your preference to is able to simulate pages scrolling, transitions and etc.
Does the sharing/collaboration opportunity meet your requirements? Before choosing the tool for prototype development, make sure it provides sharing options or the opportunity to work on the prototype in collaboration with other people.
What is the level of usability testing features? Examine carefully the level of usability testing features the tool provides. You should be able to conduct such testing with the prototype in the future.
Which support level has the tool? Check if there are enough libraries, tutorials, materials, and help documentation, templates, and widgets to obtain support and help.
Is it possible to add animated behaviors? The ability to add animations to screen transitions and individual elements within a screen is an advantage.
Can I test the prototype on other devices? If the tool provides good and efficient options for testing the prototype on different devices, you’d better prefer this tool to the rest of them.

Which prototype development tools exist?

As we’ve already said, today there are hundreds of tools that are of good help in prototype making. All of them have their own specific features and support various tasks and requirements, and definitely, some tools will fit you better then others. For instance:

if you want your prototype to be developed from scratch, you can use proto.io, Axure, Easel, Justinmind, or Fluid. These tools allow to create of elements and details from scratch to add some interactivity and actions to each of the elements;
if you are striving for a fast release of the prototype, such tools as Flinto or InVision will help you best. Both of the tools being the fastest ones in the class don’t have some of the interactive functionality the rest of the tools boast. You have to choose between speed and interactivity, though;
in case you have no experience in working with prototype development tools, you should better resort to the easy-in-use variants. Luckily, there are dozens of such tools for first-timers: Flinto, InVision, and Solidify provide fast operability and limited functionality, while JustInMind and Fluid are more robust and offer more support;
in case you are in need for a prototype with many dynamic details and much content including a high level of interactivity between these elements, you are recommended to use Axure or JustInMind. Easel can be also used due to easy HTML/CSS generation, etc.

We’d like to provide a well-summarized analytical table compiled by Emily Schwartzman on the existing – and what is more important – the most effective systems and tools for prototype development. As of 2016, the tools for such development vary from “building from scratch” to “building the least”. Have a look at the evaluation of the prototyping tools to see which of them can potentially bring more benefit to you.

What are pros and cons of the most popular tools?

Name and Description	Pros	Cons
Flinto ‍A prototyping tool for iOS apps, designed for Web and ideal for Mobile development.	– Easy to learn and very fast. – The sharing options are handy and fast: share the prototype just in one click. – You can drag and drop new files over the existing ones to edit the prototype. – The scrollable area for overflow content is being created automatically. – Is able to add transition effects from a limited set of links.	– Only control on the screen level is available – All screens and mockups have to be imported, so no options for creating or editing elements in the tool directly are available – Limited interactivity
InVision ‍A collaborative tool for the teams of designers, best for Web, Desktop, and Mobile	– Easy to learn and very fast. – Drag+drop system for adding screens and creating hotspots. – Feedback collection is available due to sharing and commenting options. – Easy file sharing and editing due to a Dropbox-like system availability.	– No support for gesture based interaction is available. – Elements cannot be created or modified in the tool, and all screens and mockups have to be imported. – No options for adding animation to the elements or transition effects to links available.
Proto.io A prototyping tool for mobile devices designed for The Web, and ideal for Mobile development.	– Animation to individual details and transition effects to links can be added. – Good simulation of high-fidelity interaction behaviors. – Gesture based interaction and good support are available.	– Better for a professional user, not the first-timer. – Not very fast. – Animated behaviors often are buggy and work properly. – Screens have to be built out in the tool.
Axure A prototyping tool for apps and websites designed for Windows and Mac	– Animation to individual details and transition effects to links can be added. – Good simulation of high-fidelity interaction behaviors. – Gesture based interaction and good support are available.	and transition effects to links can be added. – Good simulation of high-fidelity interaction behaviors. – Gesture based interaction and good support are available. – Better for a professional user, not the first-timer. – Not very fast. – Animated behaviors often are buggy and work properly. – Screens have to be built out in the tool.
Axure A prototyping tool for apps and websites designed for Windows and Mac	– Decent support level. – Very flexible and can be used for prototyping products intended for any digital platform. – A built-in library of useful widgets is available, and it can be customized with specific actions and behaviors. – Complex interaction behaviors can be prototyped.	– Not easy to use for a first-timer. – Exporting to HTML is necessary to preview the prototype. – Not all browsers support the web display of the prototype. Chrome even requires a special plug-in to view.
JustInMind A prototyping tool best for the web and mobile apps for Mac and Windows	– Supports gesture based interaction. – Interactivity can be added to separate elements. – Animation can be added to separate elements, as well as the transition to links. – A full web preview of a prototype with a device frame is available. – Drag+drop system is available to add features and assets.	– Not so easy for a beginner. – Actions implement in sequence, not simultaneously if multiple actions are assigned to a single element. – Animations and transitions are buggy and operate slowly.