Cooper’s piece about “Prototyping Tools,” released in 2015, has received millions of page views. Three years later, the time was ripe for a refreshed analysis. Three Designits, Jake Barnett, Navit Keren, and Tammy Su, took on the task…
An overabundance of choice can stop us from taking action. That can be true when selecting breakfast cereals, life partners, and…. prototyping tools. When it comes to choosing a prototyping tool, spending too much time deliberating a myriad of tools feels wasteful since we haven’t even started making the thing. And it will become immediately clear to anyone who researches which prototyping tool to use that there are tons of options to choose from. There’s also an abundance of resources to help you choose the right tool (for example).
So how do you cut through the noise? Take an endorsement from someone you trust. We’re here to serve as your trusty friend and inform you about digital prototyping tools* that designers at Designit prefer.
As a general rule, we take a light and swift approach (versus deep and comprehensive) when it comes to prototyping digital experiences. There’s no need to build out a fully functional prototype that shows all the bells and whistles when developers will duplicate all that work in code. We convey only what’s needed and are nimble about delivering the right prototype at the right fidelity and the right time — all the while working closely with our development partners to ensure they fully understand the design intentions. That means communicating everything from flow to pixel animations and providing bite-size prototypes that add to the developers’ understanding.
So, what tool should I use?
Short answer: It depends on your intent. Here’s what we tend to use when we find ourselves in the following scenarios, whether we need to convey an overall experience flow to gain stakeholder buy-in, a complex interaction to inspire clients, or the nuances of the experience to development partners.
For Fast Turnaround:
InVision
Craft + Sketch
XD
Marvel
These tools are a great compromise between fidelity and ease-of-use. They won’t give you the most robust interactivity or animation but will allow you to quickly and effectively communicate the gist of the experience.
For Complex Interactivity:
Axure
Framer
We know, Axure’s interface is cold sweat-inducing for designers, and the learnability isn’t a positive for either of these tools. But these two tools actually render the code and have the capacity to create high-fidelity interactions that mimic the actual experience a user will have with the software you’re designing.
For Detailed Animation:
Principle
Proto.io
Keynote
Again, some time investment will be required to learn how to use these tools as they are powerful and advanced in nature. They’ll give you the swooshes, fades, wiggles, and micro-interaction nuances that some prototypes need to communicate an idea.
For Wow Effect:
Keynote
Framer
These are great when you need to dazzle and inspire a client or stakeholder in a pitch, whether you’re looking to sell a project or a design direction. They’re our go-to’s for concept-level work.
For Delivery to Development:
InVision
Principle
Our ideas are only as good as the way they’re brought to life in code. And they’ll only be brought to life properly if they’re well-documented and communicated to those building them. At the same time, we want to spend our time designing, not documenting. We rely on these tools when we need to clearly communicate flows or complex animations to help developers understand the intentions or the pixel-level details.
*To be clear, we’re talking specifically about tools for creating digital prototypes, which is only one part of what we do at Designit. When it comes to prototyping business models, services, or physical products, we’re looking at a whole other toolset.
So there you have it, a quick peek behind the curtain in terms of how we approach UX / UI prototyping at Designit. Hopefully this will help you make decisions as you build your digital toolset or simply satisfy your curiosity. Either way, we’d love to hear from you, whether you think we’re wrong, misguided, missing something, or right on the money!
Appendix
If you’re interested in our process for evaluation, we looked at the tools according to the following criteria. Of course we have day jobs, and conducting an extensive, methodical, quantitative exploration of all the tools on the market would take more time than our work life allows. These scores should be viewed as subjective impressions from industry experts, based on initial explorations for products we don’t use or personal experience for those that we do.
Time to Create: How long would it normally take to create my end product?
Ease of Learning: How easy is it to learn the first time?
Fidelity: What degree of fidelity does the tool support? How well does it support the creation of intended user interactions?
Sharing: What capacity does it have for collaboration and sharing?
Support/Community: What kind of resources (tutorials, FAQs, forums) are there to get help and connect with others about the tool?
Mobile/Touch: How well does it support mobile and touch interactions?
Here’s the overview:
Honestly, there are a lot of great resources out there that go in-depth into all these tools. Here are a few we recommend if you want to dig deeper:
Interactive comparison tool — also references our original article in the Cooper Journal
Methodical comparison of five tools ability to create the same prototype
