Choosing The Right Prototyping Tool

The most versatile tool for prototyping will always be pen and paper, but when our designs require some next level prototyping to bring them to life we turn to software for help.

Creating a prototype is great for a number of reasons. Firstly, prototypes help us explain the behaviour of complex interactions. Interface ideas that seem straight forward in our head, rarely actually are, so a quick prototype makes things clearer, both for us and any stakeholders.

Secondly, prototypes are a great way to validate designs and user journeys with real users. There is no point spending weeks building something that users will not understand or enjoy using. So before any development time is spent, we create prototypes to take to usability testing sessions.

Here are the tools we have used recently:

Jetstrap

Jetstrap is a way to build bootstrap websites without having to know all the ins and outs of how Bootstrap works. We had created sites using bootstrap before, but for a quick prototype it can be difficult to do anything fast especially for non tech-savvy types. So having a programme with bootstrap built in, seemed perfect.

Unfortunately, Jetstrap’s interface is a bit clunky and on small screens it can be quite difficult to use.

If you can live with the interface, I think Jetstrap could be a nice alternative to starting a site from scratch with Bootstrap, but don’t expect to be able to do anything very advanced without knowledge of CSS.

Muse

Muse from Adobe is great if you want to prototype sites that require a parallax effect. If you want the background to move at a different speed from the foreground or you want your navigation to shrink and then stick to the browser, then Muse is for you.

Some of the fundamental principles of how Muse works, for instance, it’s motion control feature may take you a while to get your head around, but there are some handy video tutorials that will soon get you up to speed.

We recently created a mock up of an iOS app for a client using Muse and it was really flexible. It also has a nice but quite basic preview mode where you can select a number of different devices to preview your interface on.

Because Muse is a standalone piece of software it feels robust, you can put the tool bars and menus where you like so you can make use of bigger monitor sizes. Unfortunately you have to pay for Muse as part of the Creative Cloud, there is a free trial so I would recommend trying it out before you buy.

Flinto

Flinto allows you to make simple clickable prototypes of your app ideas in seconds. The speed at which you can go from jpgs to a prototype is amazing. We were mocking up and tweaking our ‘Flintos’ as we received feedback from the client. It was great for them to see ideas come to life so quickly.

Flinto puts your prototype online using a unique URL, you can then email that to your client or stakeholders. You can then add the prototype to your device’s homescreen and upload an app icon. Flinto now works on iOS and Android.

The Flinto editor is all browser based, so you can access your prototypes wherever you are. You upload your images for each screen and then draw on your tappable areas, linking them to different pages. There is practically no learning curve with Flinto, which means you can start prototyping straight away.

Proto.io

Proto.io is similar to Finto. With Flinto you upload jpgs of your creatives and ‘stitch’ them together, with Proto.io you drag and drop components onto the different screens. For example you might want to test a complex user journey and you haven’t got the time to mock it up, drag the pre-built components on each screen to test your hypotheses.

If you have a bit more time you can include custom graphics to create a really rich prototype. But I think Proto.io’s real strength lies in you being able to test your ideas super early in the design process.

Proto.io is also also web-based with everything you work on saved in the cloud. It also has a great preview mode and allows you to send your work to others really easily.

Webflow

Webflow is more for prototyping responsive websites rather than apps. I came across Webflow by accident as it’s not strictly a prototyping tool. Their website claims it is possible to create production ready websites, not just mock ups.

With Webflow you can create responsive prototypes using draggable widgets or you can design your own elements within the software. The best bit about Webflow is the way you can preview your website at five different breakpoints really quickly.

Some parts of the interface is clumsy at times, this might be partly down to Webflow being completely web based. For example you cannot copy and paste multiple things from one page to another at the same time.

But all that aside, I love the powerful CSS editor that comes with Webflow. If you know CSS basics you can create some great prototypes.

Summary

It is a really exciting time at the moment for prototyping and it reflects just how much the design process has changed over the last couple of years. So if your digital agency or user experience team are not prototyping regularly, then get them started with one of the tools above!

Each tool is great at different things so it is difficult to choose a favourite. We do however, use Flinto and Webflow most at the moment, but this is likely to change in the near future as the market is full of competitors. Of course we are looking forward to trying them all.

Furthermore is a user experience design agency based in London. We create apps and responsive websites. Get in touch if you want to know more about prototyping or a chat about your latest project. www.furthermore.co.uk.