10 Best Design Prototyping Tools
A t work, I’m constantly faced with prototypes of all thinkable fidelity grades. From simple click-dummies to paper prototypes, video prototypes and high fidelity ones that are completely designed and hand-coded.
Yet, we are in a situation where designers require multiple tools in their workflow to go from concept over visual design to final product. Even if there are more and more tools coming up which try to solve that issue (thinking of Adobe XD and InVision Studio), I still don’t feel that we have the perfect solution.
Of course, this story won’t fix the issue either, but I want to provide you with a comprehensive overview of the tools out there that I appreciate for different specific reasons. I hope that you find something of the following useful for yourself! 💪
There are many, many different tools out there, mostly suited for one of the many, many different purposes of a prototype and approaches to prototyping itself. The following list reflects my views and a rating in terms of how often I use the tools and how easy they are to learn.
10. Framer X
Framer X is a prototyping tool that heavily relies on code, or at least used to do so. When compared with Origami, which uses a node-approach, Framer provides a code editor, but also an editor that’s more on the graphical side. For the coding part you need to work with CoffeeScript.
To be honest, I don’t really use Framer that often. In my feeling it just has quite a steep learning curve and I’m simply missing the time and or motivation to dive into it.
But I know that you can do absolutely amazing things with Framer that go far beyond prototyping. From database integration to custom animations, interactions and on any platforms. It’s a really cool tool and if you have the time to dig yourself into it, you should probably do it.
9. UXPin
UXPin is a platform that put its focus on collaboration and a wide span of products that help teams work together. One component is UXPin Prototyping, a solid web-based prototyping tool that handles most of the use cases. The second component is UXPin Systems that adds design systems, specifications and documentation to it.
And the cool thing about the specs is, that they are automatically generated. And this is a big plus if you consider how much time and effort goes into creating specifications for your interfaces. By the way, if you know of a nice tool that does specifications as a stand-alone, even manually, please let me know!
8. Webflow
Webflow is a web-based tool for creating websites without having to code but with all the freedom you want. It’s not like those platforms where you pick a template and just insert content, but rather a code-free coding environment.
It’s really easy to learn and make quick progress. You can try out techniques or effects and actually use the output afterwards for your web project.
By the way, I made video about how you can do some Material Design stuff with Webflow — you should check it out.
7. Marvel
Marvel is a nice tool with a similar prototyping approach as other web-based screen link apps, like for example InVision. But I like Marvel especially because of it’s smartphone app. Since it acquired POP, you can easily digitize hand drawn wireframes with your smartphone and link those screens with each other.
This has proven to be a great time saver and even to show people outside of our industry how easy it can be to create a working app prototype on your smartphone.
6. Adobe XD
https://www.adobe.com/products/xd.html
Adobe XD, or Experience Designer, is a tool built for designing, wireframing and prototyping. The good thing about it is that you have both worlds, designing and linking your screens in one place. Some say that it’s not very original. It’s not filling a gap. I personally just did not get the hang of it, but I saw people create amazing things with XD.
If you’re all into the Adobe ecosystem, you should definitely try it out. But if you’re more a Sketch guy, you’ll probably want to stay with Sketch.
5. InVision Studio
https://www.invisionapp.com/studio
So there’s been a big hype around InVision in the last few months. And it’s truly remarkable what they did so far. They built themselves up from a small team and a limited functionality tool to one of the industry leaders in digital product design. They acquired many companies along the way, e.g. Muzli, Macaw, Silver Flow, Brand.ai or Napkin.
And the guy who made Napkin is now one of the lead designers for InVision Studio, which is said to be the next big thing in digital design and prototyping. What I understood from their launch party presentation is that it basically combines all goods from InVision, Sketch and Flinto within one tool. And since it’s now in early access there are plenty of screencasts popping up that showcase the great things you can do with Studio. If InVision does well, and we will only see this some time after its public release, it could really become that next big thing.
4. Flinto
Flinto is a tool for animations, similar to Principle for Mac. It calls the animations behaviours and transitions, where behaviors are kind of repetitive and relate to one object or a group of objects, whereas transitions are related to screens. You can of course use interactions to trigger those animations. Flinto uses native device resources what makes your prototypes feel very natural and close to a final product’s feel.
Regarding the interface they pretty much aligned on what we already know from Keynote and a bit later also from Sketch, so it’s very straight forward. Also, they created a deep integration for Sketch, so if you’re already working with Sketch, it’s very easy to integrate Flinto into your workflow.
I mostly use Flinto for animations that need to look nice and feel close to the final product. It’s great for mobile animations and if you need to provide a developer with transition strings.
3. Paper Prototyping
Paper Prototyping is one of my all time favourites. It’s super simple to do, it’s fun and you can gather valuable input through it really fast. And of course it’s also cheap and almost always and in every situation available.
While you can of course just use wireframes for user questioning, the Wizard of Oz method might provide an even greater benefit. This method basically describes the acting of an “invisible” peer in the background who “magically” changes the interface when the user interacts with it, just like the software would do.
2. Axure
Axure has always been one of my standard kit tools that I never really questioned. It’s easy to use yet very powerful if you know how to make your wireframes intelligent. It perfectly fills the gap between too simple and too complex solutions. If you need to build interactive prototypes but you don’t need a database or a complex algorithm behind it, yet struggle to implement it with tools like Flinto, Axure might be the one for you!
I have to say, though, that many of the other use cases left, can also be handled, and even handled better, by other tools. I somehow have the feeling that Axure is not up on speed anymore. Maybe this will change in the future but I’m not sure how they will handle the competition in the next years.
1. Keynote
Yes, Apple Keynote. So much underrated but so powerful. I released some videos on what you can do with Keynote earlier. If you have a Mac, then you have Keynote. And it’s not only a great tool for presentations. It combines many of the previously mentioned tools if you just use a bit of creativity.
It’s no problem to draw wireframes. It’s no problem to animate objects. It’s also no problem to use existing layouts and animate those within Keynote. And interactivity is also integrated! You can even custom size the slides and export it in native resolution to your smartphone so that you have a shockingly good interactive prototype with real designs on your smartphone.
And it’s so easy to use. And it’s free. I could go on like this for hours! 😅
Seriously. If you haven’t tried out Keynote as a prototyping tool, do it now. You won’t regret it.
Conclusion
I hope that I was able to provide some useful information. If you want to compare prototyping tools on your own you should try out platforms like Prototypr.io or UX Tools.co. By looking around you are likely to discover tools you didn’t know before but that may suit exactly the issue you need to solve in your certain situation. My suggestion is to always be open for something new and to keep on learning new tools.
I am super interested in your thoughts and tools that I don’t know of — please comment and share your thoughts! ❤️
