A day in the life with Pixate, Flinto, Principle, Proto.io and Keynote
In April 2015, I began work on the design for A Game of Thrones: Get into the Books. The speed at which we were iterating designs for user testing meant that we needed a rapid way of producing realistic application interactions. At the time Keynote was my go-to tool for animated interactions.
Fast forward to today, a few months later, and the contenders to be your tool of choice has reached fever pitch, with prototyping heavyweights Invision set to release Motion soon, adding to that ever growing list of ‘tools I really need to check out’.
The Brief
I set aside a day per toolto recreate the core interaction of the Game of thrones App (we’ll call this ‘Expanding Moment’) using Pixate, Finto, Principle, and Proto.io. I would be attempting to reproduce this interaction using an earlier design I’d created in Keynote as a guide.
The ideal interaction prototyping tool would:
- Work well with Sketch
- Easily to mirror and test on device
- Render silky smooth animations
Keynote
I designed the transitions for the Game of Thrones app in Keynote, before presenting to the rest of the team. This helped drive decision making and developers could make a call on how long it might take to achieve. The process worked well as my design was only a guide; I knew a lot of what I’d included in the transition might not be achievable within budget.
Pasting assets from Sketch meant I could quickly put transitions together and helped validate my ideas with the rest of the team. The biggest drawback was not being able to test it on mobile. On the flip side it’s designed to be shared on screen so works well if you need to present ideas in front of a small army of stakeholders.
Keynote is free on Mac and iOS.
Pixate
It took a little while to get my head around how interactions work in Pixate. Recreating Expanding Moment meant hiding assets at the start point and, through dropdown fields and parameters, specifying how those assets should transition into view. It didn’t feel intuitive and required some guesswork to get right, but the result was a smooth interaction.
Pixate doesn’t have pages, making transitioning between screens more difficult than it should be. You might consider using Pixate for in-screen interactions.
Designing native interactions on iOS and Android is one of the biggest selling points for Pixate. You can duplicate an interaction you originally designed for iPhone 6 and, with the tick of a box, change it to Nexus 5 — handy if you’re releasing an app on both platforms.
The studio version of the Pixate is available for free since being acquired by Google.
Flinto for Mac
Flinto for Mac was released just after the launch of A Game of Thrones: Get into the Books. I’d used Flinto web app to piece together click-through prototypes for the app so I was keen to see how it could have fit within my workflow.
The great thing about Flinto for Mac is how easy it is to create transitions between screens, but doesn’t offer much in the way of in-screen interaction. Like normal Flinto, you create a button on screen A and tell it to go to screen B, except now, if the same layers appear on both, the app will animate the change in properties and you can fine tune it. I created the Expand Moment interaction with lighting speed but it didn’t have much more to offer than Keynote.
Flinto for Mac is included with Flinto, starting at $20/month. It’s also available for $99 without subscription.
Principle
Recreating the Expand Moment transition was quick and easy with Principle. It was so quick that I had time left over to experiment with other transitions in the Game of Thrones app.
Experimenting beyond recreating Expanding Moment
The use of timelines takes me back to Flash, the large arrows hovering over screens make it easy to keep track of transitions, and it runs super smooth on the iOS mirroring app.
Sketch works great with Principle too. Pasting a layer with export settings @3x will bring it in @1x dimensions, with all its retina goodness intact.
I can also see myself using Principle in the early stages of interaction design, validating ideas by jumping from paper sketches, to simple shapes and movements.
Principle is available for $99
Proto.io
The learning curve with Proto.io is steep, and coupled with a sluggish web interface, makes it almost unbearable to use. To recreate the Expand Moment interaction there was a lot to learn in one day. In the end I used a combination of tutorial videos and hacking my way around interaction logic. This got me close to the transition I wanted. The resulting animations were buggy and I wouldn’t be comfortable presenting it beyond internal team members.
Proto.io is a tool you’d use to build prototypes from scratch, not to fine tune a animated interaction using lots of image assets.
Proto.io starts at $24/month.
And the winner is…
Principle stood head and shoulders above the competition as the quickest, easiest, and most powerful that I could see becoming a part of my day-to-day workflow. It combines the simplicity of transitioning between screens in Flinto for Mac, with power of in-screen interaction, which can quickly become intricate and difficult to follow in Pixate.
The ability to create and share native android prototypes would be the biggest reason to use Pixate over Principle. That being said, Principle only launched a few months ago. It has huge potential. Here’s hoping they release native Android capabilities in the coming months.
Final thoughts
As I write this, the team at Invision are cooking up their animated interaction tool, Motion. Invision is already our prototyping tool of choice at Reason, and the ability to fine-tune a transition between a couple of screens in a journey would fit easily into our workflow.
With only a day spent on each tool this isn’t a comprehensive review — I purposely left out Framer and AfterFX for the time it would take to learn and give any useful insight — but it gave me (and hopefully you, too) an idea of the learning curves involved. It also exposed me to varying approaches to designing animated interactions.
I see Principle becoming a part of my workflow in the coming months and will be considering its use in the early, and final stages of designing animated interactions.
