For obtaining client sign-off, we already use Invision (and we love it). Invision is perfect for linking screen to screen and gaining perspective on the entire flow of a project. However, we are looking to go one step further. We need a way to demonstrate more complex transitions and animations to both our clients and our developers, which will improve communication and cut down on misinterpretations. Invision has teased their upcoming ‘Invision Motion’ tool, which looks incredibly promising. But until this product surfaces we still need to find the perfect tool for our more complex prototyping needs.

Recently I have been reviewing available prototyping tools to find one that would fit into our dynamic workflow and complement Invision’s somewhat limited capabilities when it comes to animation. I focused on finding the tool that would allow us to prototype parallax effects – because if it handles parallax it probably does everything else, too.

The tools I looked at were Framer.js, Atomic, Proto.io, Pixate, Relative Way Form and Flinto for Mac.

First thing’s first – HTML5 vs Native

Of the tools I reviewed, half were HTML 5 based, and the other half were native. If your prototype has to be reviewed by many people, the safest option is the HTML tool – simply send your clients a link to the prototype. The additional benefit is that most of these have collaboration options, so clients can leave feedback directly on the screens.

If a person who signs off your designs owns a device you’re prototyping for, you should consider choosing native – these generate much more realistic prototypes, almost indistinguishable from the actual apps.

Atomic supports layers, but transitions aren’t made by manipulating layers directly. It treats pages like animation keyframes, creating transitions between them automatically. It’s possible to adjust each layer transition on the timeline. While it’s very fast and convenient to create prototypes, maintaining prototypes can easily turn into a time-consuming and mundane task. You often have to make an extra screen, not only for each of its states but also for in-between-states. Keeping a single screen as an entry point to all its states often creates side effect transitions that can be misleading.

“Overall, Atomic’s interface feels straightforward and organising layers seems effortless and snappy”

There is one exception – Atomic doesn’t support @2x assets, meaning you’ll end up with slightly blurry screens when viewing on the device. I went around that by uploading retina sizes and scaling them down inside Atomic, but it took extra time to calculate each asset width and height (there’s no option to lock width-height ratio).

Pros: Great for quickly exploring a concept and testing whether certain interactions would actually work.

Cons: Not very well suited for precise interaction design. Using different gestures in the same area – e.g. if a user taps on one element, do this, but if she swipes, do that – is not possible. The most upper hotspot dominates. Scrolling has to be simulated by transitions, which don’t feel realistic. Avoid for projects that rely on complex gestural interaction.

Proto.io’s approach is very ambitious. It aims to deliver a complete layer-based prototyping environment. That means you don’t have to create separate screens for the sake of visualising the transition – you act within a single screen by manipulating its layers. This takes longer to set up but pays back when updating and maintaining the prototype.

In Proto.io, not only can you make things move, you can actually make things in the first place. Rather than uploading chunks of bitmap extracted from your designs, it’s possible to recreate them as vectors to take advantage of truly responsive layouts, colour transitions etc. At your disposal are Vector Shapes, Lines and Rich Text to craft custom UI elements plus a comprehensive collection of components you may find in most common systems – iOS, Apple Watch, Material, Windows 8 – and I’m not talking about a few buttons but interactive forms, date pickers, page controllers, web views, audio players, icon collections… you name it. Everything comes neatly organized in an Xcode-inspired layout.

“Proto.io really is a powerhouse of prototyping.”

Because it’s intended to run in the browser it won’t give you access to a phone’s camera and sensors, but almost everything else is possible – including scroll-based interactions. These are achievable because Proto.io gives you access to variables behind the transitions, which you can use simple maths to, for example, reduce or increase the scrolling speed of certain elements in relation to others. Additionally you may dynamically change the text displayed on the screen depending on input or while meeting certain conditions. By utilising the callbacks (transitions triggered at the end of other transitions), you may program really complex logic into your interface behaviour.

Packing so many features into a single application slows down its workflow and learning curve. Proto.io isn’t as straightforward as its HTML equivalents. You will have to spend some time familiarising yourself with all of its features and finding the best practice for certain scenarios. Setting things up takes longer than in Atomic.io or Pixate. Having said that, Proto.io definitely isn’t a feature creep. Given a number of options it offers I’m highly impressed by how clean and intuitive its interface remains.

“By putting in slightly more effort, you gain the advantage of responsive layouts, dynamic text, clearly indicated screen states, portrait and landscape versions, and plenty more.”

Designers new to mobile platforms can utilise the pre-made components to create realistic designs, without fear of developers coming back to yell at them that “iOS doesn’t work this way”. Customization options in these go only as far as the frameworks allow.

Pros: Excellent for prototyping bigger iOS/Android apps that are predicted to evolve or be subjected to many subtle changes before the sign-off

Cons: Not so good for fast idea-testing or impressing clients with smooth animations as HTML-based transitions might get jerky.

Pixate definitely wins when it comes to realism. Fast to start with, easy to master, precise and powerful. With every other reviewed tool I didn’t manage to implement all intended features within the timeframe I limited myself to, but Pixate was different. Pixate combines a simple interface with the ability to access variables hidden before the interactions you design, including the scroll position. If it sounds scary to you, relax – it’s happening behind the curtain and the word “variable” never comes up. You will be expected to write simple conditions here and there but again – fear not, it’s not programming.

“Once you go through Pixate’s tutorials (and watching all of them would take something like 20 minutes) you’re all set and ready to go – there’s nothing more to learn here.”

Pixate’s drawback is that it’s been intended as a prototyping tool for a single screen rather than an entire app so implementation of a complete app flow isn’t so obvious here. It’s possible to include multiple screens by keeping them off-canvas and sliding into the viewport when called. While doing so, one thing to be careful about is your assets’ naming convention – keep it tidy, you rely on it. Due to the lack of screen separation, all your assets end up piled into the same list.

You will need to own a device to work with Pixate as there’s no desktop preview. Luckily you can use iOS to preview Android designs and vice versa. Work made in Pixate could be done faster if it weren’t for the fact that its player refreshes the prototype every time you make a change. The refresh is quite fast, but it reverts to the landing screen and it can get slightly annoying to navigate back to where you were all over again.

Pros: It’s free and you only pay for cloud-based sharing and collaboration features. It is very flexible in its simplicity and is easy to master. Advanced effects can be achieved quickly and effortlessly. Pixate would be an excellent choice for complex interaction design, evolving-screen design and parallax.

Cons: It’s not that straight-forward to send a prototype to a client’s device if they are not a member of Pixate’s cloud service. It’s also not well suited to hold the entire app – you might have to fragment your app into multiple files.

Flinto is the main competitor of Invision – a web-based screen-flow prototyping / collaboration tool. Like many, I thought that Flinto for mac was a client for their web service. Turns out I was wrong. Flinto for mac is a standalone tool that introduces an interesting prototyping method.

“Its UI resembles Sketch and its streamlined user experience, combined with the unique way to create transitions, results in the most effective prototyping tool I have used so far.”

The Flinto for Mac approach is similar to that of Atomic.io – simulate screen states by creating the transition from one screen to another, but you won’t need to duplicate the in-between screens forever. The Flinto team came up with one really clever process. A page on its own can have multiple nested scroll views. While making a transition to another screen, its layers are always at this transition’s end-position. This ensures that no matter what craziness you would apply to animation, the screens will always end up looking as they are supposed to. And indeed – the craziness can be done with minimal effort. As a matter of fact, it’s so easy to get creative that if you aren’t careful your developer might soon go on strike!

Flinto for mac is native (100% Swift coded) so the prototypes it generates are smooth and highly realistic. Scroll views are snappy and bouncy like the real thing. Unlike Pixate or Proto.io, the simulator preview updates seamlessly, so there’s no need to refresh the prototype and navigate too far away from your current screen just to see how a certain transition behaves after you move a layer to the left by 1px, for example.

Flinto’s Sketch plugin is still slightly buggy, but it’s nothing that can’t be quickly corrected. The point is – even though it’s made in-house and is limited, it saves time – a lot of it.

Surprisingly, Flinto for Mac doesn’t support parallax, which was the main focus of this research. However, it’s so good at doing everything else that it simply can’t be ignored. Parallax in Flinto for Mac can be done to a certain extent by hacking around with swipe-based transitions, just like in Atomic.io.

Pros: Flinto offers ingenious transition modelling. Its Sketch integration enables you to instantly turn your design into a prototype, and it is equally good for fast concept proofing and advanced interaction design.

Cons: Flinto lacks Android support, does not offer scroll-based interactions, and doesn’t handle parallax very well.I spent some time trying to embrace Framer.js and Relative Way Form enough to build the prototype I had in mind. I quickly realised this was overambitious. I couldn’t learn these in one day. While ‘prototyping tool’ is a technically correct term to describe them, what these systems offer goes way beyond what we’re looking for. These are definitely the most powerful tools providing nearly limitless capabilities for highly accurate concept testing.

Form and Framer give you access to device sensors and camera, real data feeds and an ability to craft advanced algorithms. You can use them to design new functionality in your photo editor or build an International Space Station spotter. Framer.js uses coffee script, a simplified JavaScript framework. Form is a signal-flow programming tool – a rebuild of Origami without the need of Quartz Composer – similar to Pure Data or Max/MSP. As much I love exploring and playing with these tools, my bosses would probably see it as a wasted effort because all they asked for was a way to move layers on the screen.

Pros: Form and Framer would take weeks of practice to learn, although they’re worth it. Mastering these can elevate your career and inspire you to come up with the next big app idea.

Cons: Not the fastest way to build simple prototypes. They are made for bigger things. However, if you’re a natural in Framer or Form, you can definitely use them for this purpose, giving you the advantage of a highly maintainable prototyping environment.

I love the accessibility that web-based services provide, but they don’t compare to the ease of use and sense of quality that comes with native solutions. Proto.io surprised me with its ability to deliver way beyond my expectations, but it suffers from JavaScript jerkiness and a time-consuming workflow. I also wasn’t able to quickly figure out how to create parallax animations, and the lack of a tutorial on that matter is disappointing.

What I aim for is fast and effortless prototyping, not app simulation. Putting advanced Framer.js and Relative Wave Form aside, I’m left with Pixate and Flinto for Mac. The more I explore these tools, the more unsure I am in deciding which serves me better. Both present highly streamlined UI but follow different philosophies. The Sketch plugin for Flinto for Mac is very easy to use and allows you to test and communicate your ideas in less than ten minutes, which is a huge benefit. Pixate, on the other hand, is more powerful when it comes to accuracy and is definitely a more elegant solution to produce parallax effects, rotating elements, and plenty of other scenarios you wouldn’t be able to recreate in Flinto.

“I would say that Flinto and Pixate are equally useful depending on the task, and for now the best solution is to stick to both.”

After all, Pixate remains free and Flinto for Mac is a one-time purchase.

I didn’t have time to try all of them, but I’m definitely going to look into these two:

Principle

One I haven’t tried, but often used by fellow designers. I’ve seen impressive interactions designed with this tool.

Floid

It seems that Floid builds on Pixate’s approach, amending import from Sketch / Photoshop, preview on desktop and export prototypes for a native device or the web. It seems that every new tool that comes out tries to improve upon its predecessor’s User Experience and fulfill missing features. While I’m sure that teams behind existing apps won’t give up improving their products, it’s worth to keep your eyes on the new cool kids on their way to join the gang.

Adobe Comet

Comet is Adobe’s answer to prototyping and is set to release early 2016. From what I see on the provided video, Adobe decided to merge features lifted from Sketch and Flinto for Mac and build on top of that concept to deliver the ultimate UI design tool. However sneaky this sounds, this is a standard practice for software entrepreneurs (hey, It’s a jungle out there!). With Comet, Adobe is attempting to reclaim its dominance by building a new platform rather than haphazardly adding Sketch-like features to Photoshop. Comet may muscle some of the startups mentioned above out of the market, but what it promises is very tempting.

Plexi joined Marvel

Marvel is a very neat screen-flow prototyping service. I have never used Plexi, but I trust that joining these two has huge potential.

Invision Motion

Invision team is working hard on the most anticipated component to their platform. Motion is expected to advance Invision into a full-scale prototyping tool that will introduce animations on a layer level.