This post first appeared on www.bolser.co.uk

A digital designer’s toolset is constantly evolving. It sometimes feels as though there is a new time-saving, innovative software release every week. Many of the new releases fall flat, and others have the potential to become an essential part of a designer’s process, or even life. Prototyping tools — software which allows a designer to fabricate and imitate digital products such as apps and websites without code — are no different, most of the time.

Here I discuss, compare and critique some of the different prototyping tools I’ve been lucky enough to work with and try out over the last two-or-so years. Some used in R&D projects, others in client work.

Framer
I can’t code to save my life! This is something I want to change, but that’s the fact. Framer.js is a code based prototyping tool. It uses Coffee Script, a compiled version of JavaScript. Coffee Script is surprisingly easy to grasp, even for me. With the vast range of resources and tutorials available, from Framer themselves and various other sources, it’s easy to cobble together an interaction.

As far as I’m aware, it’s difficult to create a full app prototype, as you may as well just build it if you’re going to prototype it in any form of code. However, Framer.js is amazing for creating precise and accurate animations using code. Animations which can be interacted with as if they were created for real — if you can figure out the code!

Framer also offers a viewer application for iOS, which opens up the possibility of user testing and presentations.

If you want to create a short screen sequence, and prototype it to an extremely high fidelity, and — more importantly — if you’re comfortable with code, Framer.js is the tool for you!

Principle
Principle, for me, is the sweet spot. A lower fidelity of animation and interaction design than you might have in Framer.js, or in JavaScript, as you’re not controlling any elements with code. But, a much higher fidelity than apps like Invision of Marvel. You have the ability to control animations, timing and transitions to a relatively decent standard.

I went from no prior Principle experience, to creating a massive prototype in a matter of days. It’s incredibly easy to get to grips with. You have the ability to sync your entire Sketch file with Principle or copy over elements directly using your clipboard. It’s pretty cool stuff! Great for supercharging your prototyping process.

The downside I found, is that Principle isn’t as up to date as it could be. Principle works with other applications such as Sketch, which often adds new features, features I take advantage of to supercharge my design process. Principle is yet to support some of these newer features, which often screws up direct Sketch imports. (An example of this would be using symbol overrides in Sketch, Principle reverts the overrides back to their default state).

Adobe Experience Design
Formerly known as XD, Adobe Experience Design is an all-in-one design and prototyping tool. Strictly speaking, this software still is in BETA. The software is still being built, and there are open channels to communicate to the software developers, so they can implement features that designers want and need in the future. Potentially, this software has the potential to be king.

In its current form, Adobe Experience Design is actually pretty slick, for what it is. In the past, I’ve used it to quickly throw together wireframes and link the screens together as a shareable prototype. XD did this really well, I was able to distribute the prototype for multiple testing rounds and get some really useful feedback. The prototyping feature is very smooth, with the ability to create links by dragging components and artboards together using magical blue lines.

I was able to distribute the prototype for multiple testing rounds

As for design, XD’s tool set as it stands is slightly hit and miss. There are some great built-in features, features like the repeat grid function (the ability to duplicate content in a grid format). And the ability to drag images directly into masks from finder or windows explorer. But, on the other hand, XD feels like a stripped back version of Photoshop, having a limited set of design tools to utilise. You are limited to a set of basic shapes and lines, the pen tool and a text input. Not to mention the lack of guides!

As it stands, I use XD for wireframes and rapid prototyping. I wouldn’t use it to create any form of high fidelity design, I’ll stick to Sketch.

Invision & Marvel
If your goal is speed, to quickly upload, link and distribute screens, InVision or Marvel might be for you. Both products are one and the same, almost identical in terms functionality. In our experience, we’ve found InVision invaluable to our process. Being able to push design changes to an existing InVision document at the click of a button has saved us some serious time.

These designs can then be distributed internally and to clients. Who then can either flick through the screens with their arrow keys or navigate their way through the entire document as a hot-spot prototype. The hotspots, for the most part, are quite basic, with a limited number of gestures at your disposal. (Tap, double tap, and swiping). All of which have to be performed over the required hotspot, otherwise the user will be taken to the next screen in the series, by default.

Personally, I would not recommend either for User Testing. Due to Invision’s ‘casual’ usability, a test participant could swipe through numerous screens accidentally, or even find themselves back in the dashboard view, disrupting the flow. (Which has actually happened in the middle of a testing round…)

Kite Compositor
The new kid on the block, Kite Compositor is a UI animation and prototyping application which might just be the rival for the long-standing Principle. Literally released days before writing this post, it is being praised by many designers.

Apart from a slightly different interface, it’s hard to distinguish Kite from Principle. In terms of functionality, there really isn’t any difference within the app itself, so I don’t need to go over the amazing in-app prototyping abilities I mentioned earlier.

Kite lacks a native mobile viewer app, an app which allows you to view your designs directly on a device. So you’re unable to use Kite for any form of mobile user testing, which is a big drawback. Kite becomes almost useless as a testing tool, rather just an interaction prototyping tool.

TLDR
No application is flawless, there isn’t a prototyping tool which trumps all the others in the market.

Each app has it’s own use case; for speed and topline prototyping without much fidelity. For example, consider Adobe Experience Design or the web applications Marvel or Invision. All of which offer rapid prototyping using hotspots and links, and can be quickly shoved into an app viewer for user testing or demos.

If you’re after some a little more robust, controlled animations and interactions, consider using Principle or Kite. The trade off for the higher fidelity is time. Depending on the size of the prototype, and the complexity of the animations, Kite and Principle can be very time-consuming. For user testing, I’d personally recommend Principle — mainly because Kite doesn’t offer a viewer app.

For detailed interactions, not an entire app or a section of an app, I’d suggest Framer.js, especially if you’re comfortable with code.