Prototyping tools. 2021 edition.
Advantages of prototyping tools
The major advantage of prototyping tools is to collaborate. Many of the tools we are going to talk about allow you to do that in real time, which is essential for multidisciplinary teams.
Collaboration not only allows the product manager to lead the project but also to proactively solve problems before they happen. If your visual design, content design and development teams are able to collaborate, they can discuss ideas and avoid problems later in the implementation.
Also, if you use these tools, the prototypes will be available at all times, thus preventing important papers from getting lost. Although paper prototypes are still essential for day-to-day work, using some of the options we are going to present to you will definitely help your work.
And, of course, the possibility for your client to always see the latest version and even compare it with a previous one to easily know how the project is evolving.
Low-fi or high-fi prototypes?
The big question is what kind of prototypes to use. In general, low-fidelity prototypes are wireframes or basic sketches of the product that allow us to make decisions about structures by looking at the technical processes instead of the design. On the other hand, high-fidelity prototypes are mostly real and usable designs, where micro-interactions, visual aspects or even texts can be tested.
The tools we are going to share with will mostly work with both, so you can choose when or how to work. Each one is used at a different stage in the project. Wireframes may be useful to validate ideas at the early stages, while high-fidelity prototypes will be useful to validate the design of your product.
Low-fidelity wireframing tools
Mural
Our newest favourite tool in Torresburriel Estudio and one of the new kids on the block. Although at first glance it may not be an option for prototyping, it really is.
Of course, you can collaborate with your colleagues and its integrations will help everyone to work in the best possible way. It is also a good tool for user testing, because it enables you to do live sessions and get feedback directly.
And if you don’t know where to start, you have at your fingertips a good number of templates for almost any project. These templates can also be imported with data to make it easier for you to understand their usefulness.
Balsamiq
This is one of the classics for low-fidelity prototyping, which is one of its strengths. You can use both the cloud version and the desktop app, and also it helps you to learn how to make wireframes with its learning resources.
It does the job and you can also validate your ideas with its built-in user testing features.
Miro
Although in this post we are just talking about prototyping, this tool is actually a Swiss Army Knife for almost any UX project. At this very moment their free tier that allows you to work with an unlimited number of users under the same organisation.
It can be integrated with a wide variety of commonly used tools, and its UX template gallery gives you the possibility to create interactive prototypes, card sorting, design sprints and even moodboards.
Moqups
This freemium tool is an affordable option for collaborative work.
Its templates will fit into any project, from the idea of the product using mind maps to early validations using websites or applications wireframes. It also has Chrome and Firefox extensions that allow you to take screenshots or select colours and use them for projects.
Whimsical
It has quite useful features, such as the possibility of applying colour themes to prototype boards.
One of its coolest features is its icon gallery for wireframes, which includes a fine-tuned search engine to find the one you need at any given moment. It is also perfect for working with cards to organize ideas.
UX Pin
This is the one we use the most, along with Sketch.
Its versatility comes from the many advantages it provides to our workflow, such as collaborative work between all team members. But there is one feature that particularly captivates us, comment management, as you can collaborate internally among the team and separately with the client.
We must also add its flexibility to generate design systems, extensively documenting all the components of the project so that its use is as easy and correct as possible.
High-fidelity prototyping tools
Marvel
One of the freemium options that allow you to learn the basics and get it up and running. Especially designed for freelancers in their starter plans, it has very interesting options, such as the possibility of exporting to CSS so that developers can use the code and it also has the ability to do user testing directly on your prototypes. You will see this feature as developer handoff or just handoff in most of the tools.
Justinmind
A Spanish tool that has opted for the freemium model and is used by a wide variety of companies.
The free version allows you to create prototypes in both high and low fidelity, although with certain limitations such as microinteractions or effects that are only available for higher plans.
One useful feature is the ability to import designs from Sketch and edit them.
Sketch
This is the tool that changed everything. Sketch greatly improved the collaboration between design and development team members. It is one of the most widely used tools, both for its ease of use and for the big number of extensions that you can use to get the most out of it.
One big advantage is that it is a one-time fee tool, but it does have one big disadvantage, and that is that it is only available (for the moment) for Mac, with a cloud version limited to read-only and developer interaction.
Used together with Mural and UX Pin, our team is coordinated across all departments, from UX researchers to front-end developers, with the design team in between so that the more visual side is tailored to the needs of the projects.
Figma
Due to an aggressive pricing, you can start for free with almost no limits: 2 editors and 3 projects. Its great advantage is the unlimited cloud storage (at least for the moment).
Its gallery of plugins and the large number of templates for almost anything you can imagine, have made it the definitive tool for almost any project, not only for prototyping, but also for banners, design systems and even user diagrams.
Adobe XD
Adobe has always been a leader in design and photo retouching (coexisting with tools like Gimp or Photopea, just to name a couple of them); obviously it was not going to miss the opportunity to get into a world for which Photoshop or Illustrator were not properly prepared.
Adobe XD is the prototyping tool that has been incorporating more and more new functionalities, usually through plugins. Its great advantage is the integration with Adobe Creative Cloud shared libraries, so that all the visual elements are coordinated in one place, which is especially useful and critical for design teams, as it allows them to have all the resources of a project at hand.
Axure RP
Axure has one of the most complete and versatile solutions. From diagrams and flows to high fidelity prototypes, it is perhaps one of the best tools for exporting your designs to code.
Its ability to integrate conditional logic into interactions allows your prototypes to be like the real project that your client will see when going live. And all this with a large number of features for collaboration between all team members and additional training resources.
Not all of them are here, but new tools are emerging all the time to improve workflows.
Choose the one that best suits your needs, according to your financial situation or for the type of client you are going to address and, more than anything, think about the future. Many freemium tools can offer you flexibility today that may be limited tomorrow.
This article is a translation of the following article published on our corporate website:
