Blog
Copied
Over the past year at MX we’ve made prototyping a bigger part of our mobile design process. We’ve experimented with a lot of the prototyping tools out there, so I thought I’d share what we’ve learned and save you some time if you’re just getting into prototyping and wondering which tool you should use.
I put together the chart below to illustrate where some of the popular tools lie on the spectrum from simple to complex. It’s important to note that simple does not equal better here. The tools towards the left are simpler to build, but have less functionality while the tools towards the right are more complex to build but give your prototype more functionality. Choosing a tool depends on how much time you have and what you need to communicate.
These tools are very similar. They allow you to export mockups from Illustrator/Photoshop/Sketch, upload them, and draw hotspots linking them together. They all have some basic animations to give the prototype a quasi-realistic feel. This is the quickest way to put a prototype together that can be viewed and interacted with on an actual device.
These tools are best suited to situations where you have a flow with several screens to link together. It’s become my preferred way to present designs since it’s much less overwhelming to look at than a diagram with all the screens connected with arrows.
Exporting all the screens and uploading them can be a bit cumbersome. Even if only one word changes on a screen you have to export a new PNG for it. For longer flows, the number of PNGs can add up quickly and it becomes tricky to manage all of them.
While the animations are nice, it’s only possible to animate the entire screen. If you need to do something like animate a button or piece of content, there’s no way to do it without moving everything. This can be a little jarring in some circumstances. One workaround is to use a fade transition instead of something that slides. It creates the illusion that one element on the screen changed.
InVision
I used InVision primarily for a while and it’s really solid. I was just on the free plan which lets you have one project without a lot of the collaboration tools they offer. If you're in a remote work environment or need to collect client feedback, InVision’s collaboration features are very compelling. Also, their new integration with Sketch fixes most of the exporting downsides that I mentioned above.
Marvel
More recently I’ve been primarily using Marvel. Their free plan offers unlimited projects with full functionality for prototyping. It’s hard to compete with free. While InVision’s collaboration tools are cool, at MX I strictly need a prototyping tool and Marvel does the job... well... marvelously.
Also, Marvel's iOS app is a big win over InVision. It gives me easy access to all my projects without having to install each prototype to my home screen separately. I can even edit the hotspots from my phone - which is really handy for those times when I realize I made a touch target too small or linked to a wrong screen. It also has a feature that lets you sketch in the app, which is perfect for wireframing a rough concept.
Files are stored in Dropbox, so everything is synced and you can easily push changes to a screen without having to redraw the hotspots. I do find the initial upload process a little more cumbersome than InVision’s sync tool, though. I wish Marvel would let me pick a folder in Dropbox and automatically add any files in there to the project.
Keynote is a great option since most designers already have it on their Macs. The learning curve is lower than with some of the other tools and it gives you the ability to animate individual elements. I’ve seen some people create some pretty realistic prototypes with it. This Material Design prototype is great.
The biggest downside to Keynote is that you can’t interact with the prototype on an actual device. Sharing is also a bit of a hurdle. The person you’re sending it to needs to have Keynote or you’ll have to do a screen recording.
If you want to learn more, check out Prototyping Animation with Keynote.
Pixate is the new kid on the block. It just came out of beta in October to lots of buzz. I started using it while it was still in beta and have been very impressed.
Pixate is very easy to learn and the interface is very intuitive. It gives you the ability to trigger animations with the most common interactions - tap, drag, swipe, etc - just by dragging and dropping. The animation presets are good and give you just the right amount of customization to tweak things without getting overly complicated. The animations are very smooth since they run in a native app - not just a webview.
It’s possible to do longer screen flows in Pixate, but it is going to take more time than it would with Marvel or InVision. You’ll end up with a much more realistic prototype though.
There are a few things Pixate could improve. For one, there’s no ability to animate on a z-axis. One day I wanted to do a card flip animation, but it’s not currently possible. Exporting assets is another pain point. You have to slice out every piece that you need to animate and the current asset manager in Pixate quickly becomes unwieldy. Pixate has said in their forums that they’re working on both of these issues, so hopefully they’ll be resolved soon.
Adobe’s motion graphics product has been used to prototype animation for a while. Once you get the hang of it there are no limits to what you can do. One of our designers is an AfterEffects master, so when we need to do something highly custom, he’ll work it up in AE. It also has the advantage of fitting well into the Adobe workflow - which also means it doesn’t cost any extra to use if you’re already a Creative Cloud subscriber.
AfterEffects has a bit of a learning curve. It’s a powerful program that can do a lot, but you don’t really need most of the functionality for prototyping so you have to cut through a lot of clutter. Also, you can export a video to be viewed on a device, but you won’t have the ability to actually interact with it.
Here’s a good intro to After Effects if you’re just getting started.
Quartz Composer is an old Apple product that has found new life as an animation prototyping tool thanks to Facebook’s Origami toolkit. And Form is a new tool from Relative Wave which was just acquired by Google. I’m grouping them together because Form looks and works almost identical to QC. They both use a node interface to build native prototypes on iOS devices.
Some of the projects I’ve seen people build with them are pretty impressive. They run native on iOS devices, so the animations are very smooth and the prototypes feel very realistic. There is also a lot of flexibility. You’re not dealing with presets, so you can fully customize each animation. Form even gives you access to the devices sensors and camera.
I’ve only spent about a day with these tools. I gave up quickly because the learning curve was too steep. The node interface looks simple, but you really need a good understanding of programming concepts to use these apps. And once you get a handful of nodes on the screen you end up with a spaghetti-string mess that makes it hard to see what’s going on. One of the requirements of a good prototyping tool, for me, is the ability to quickly get something together that’s usable. I found the barrier to entry too high with these tools.
Framer is an open source Javascript framework for rapid prototyping. It allows you to build a web prototype of your app. You can buy their Framer Studio product or, if you comfortable setting up an environment yourself, pull down the open source project for free. I’ve only used the open source version, so I can’t weigh in on the benefits of Framer Studio.
We’ve built some very robust prototypes with Framer. It can handle longer screen flows pretty well in addition to intricate animations. Since it uses Javascript, the animations are only limited by your Javascript skills. One other benefit is that Javascript works well as documentation to send developers.
The Framer Generator tool is great. It significantly speeds up the process of slicing out assets from Photoshop or Sketch. Also, their documentation is solid and there is a rapidly growing community around this tool.
You really need to know Javascript to take advantage of Framer. If you don’t know Javascript, this is a good tool to get your feet wet. But the learning curve is significant.
Since Framer animates images (and sometimes large ones) in a browser, we’ve run into performance issues a few times. The animations get slow or jumpy and just don’t feel as smooth as a native app does.
It’s always beneficial if you can work in the medium that the final product will be built in. On the web that’s HTML, CSS, and Javascript. For iOS, that’s Xcode. There has been a growing discussion about the need for iOS app designers to learn to work in Xcode.
The biggest upside to prototyping in Xcode is that you’re building something that can be used in the production app. It’s not a throw away asset. You can build the UI with interface builder, start to put some transitions and animations together, and then hand it off to an iOS developer to do the heavy lifting on the programming side. Performance should be very smooth since the prototypes are native apps.
The learning curve is the biggest downside. You’re going to have to learn some code to really take full advantage of Xcode. Fortunately, Swift seems to be much more accessible than Objective-C for designers. So it’s not an impossible task and you get the benefit of being able to contribute to the final app. If you’re interested in getting into Xcode, Meng To and Scott Hurff have courses that will get you started.
At MX, we use a mix of these tools depending on the level of fidelity that we need to show. Our current process starts with Marvel for clickable mockups and then moves to Pixate and After Effects to show animation and more realistic interactions.
Prototyping is a key part of making great mobile apps and there are now more tools than ever to help designers communicate their vision for an app. Adding some of these tools to your arsenal will make you a better designer and improve your ability to work with developers.
June 13, 2023 | 3 min read
March 10, 2023 | 1 min read
December 13, 2022 | 1 min read
