Three more prototyping tools compared
Principle, Flinto for Mac,
and Tumult Hype
This is a follow-up to last month’s article in which I looked at Proto.io, Pixate, Framer, Origami and Form.
In the last few weeks, two completely new prototyping tools have been launched, and each work in a very different way: Principle and Flinto for Mac.
The third one, Tumult Hype 3, is not new. I’d had this HTML5 animation tool since version 2, never actually used it, and never realized that it could be used for app prototyping until a commenter pointed it out.
All three tools have layer-based animation and it was possible to recreate a pretty close rendition of the IF by IFTTT user onboarding in them. (People at IFTTT might start to think, “Hey, we’ve moved on. Check out the DO Button onboarding!”. — Which actually is even cooler.)
This is how the recreations compare to the original:
Principle
Mac application with a player for iOS.
Ah! The one thing that was missing in the other prototyping tools: timeline animation. The high-fidelity tools I tried earlier had three ways of working:
- Signal Flow: Connecting different nodes (Origami, Avocado, Form)
- GUI: Clicking buttons and setting values (Proto.io, Pixate)
- Code: Writing code that gets triggered by events (Framer)
Animating with a timeline will be familiar if you used Adobe After Effects or — remember those days? — Adobe Flash. (I have to mention, Proto.io also uses a timeline for animating between states in a page.) Principle uses a timeline on the bottom of the screen for animating objects between pages.
And there’s a second timeline: With the Drivers timeline (actually a valueline, top of the screen) you can use the continuously changing position of a draggable or scrollable layer to animate other objects in the same page. Scrolling left or right in this IF prototype drives the positioning of almost all objects.
Since in this prototype the paged scrollview (a.k.a. carousel) drives so many other objects, I had to plan well and carefully place my keypoints on the timeline. I even had to place my screen in look-at-me-I’m-a-programmer portrait mode. (Not needed anymore: I was using the first version of Principle in which you couldn’t yet scroll the list.)
But then again, the average project will not contain this many moving parts all connected to one scrolling gesture.
Previewing while creating the prototype
Principle has a built-in preview window, which also lets you record a video or animated gif of a prototype. It works great.
Previewing on a device is also how it should be: connect your iOS device via USB and open Principle Mirror; it will be recognized automatically. Any changes you make are updated instantly, without even needing to save. The prototype will also continue to run after disconnecting from USB.
Sending a prototype to a client
The Principle Mirror iOS app can open and play Principle files. (Pro tip: A triple-tap will restart the prototype.) Note that the files are not saved in the app, so it’s best to keep the .prd file in Mail app or another place for reopening in Principle Mirror.
Differences between this prototype and the app
None, except that the white button on page 6 is not tappable. I tried to add a touch down state to this button, but every interaction that is not triggered by a scroll or drag gesture needs a new page. It’s easy to duplicate an existing page and make some changes, but in this case it’s a big page, and any changes to the drivers in the original page made objects fly around unpredictably when I released the button.
Pros
- Timelines! A nice visual overview of every property that is animated.
- Quick and easy video and animated gif creation.
Cons
- No 3D.
- Animations always happen between pages (called artboards in Principle) representing different states, so you’ll have to create many. (Except animations driven by a scroll or drag gesture, like in this prototype.)
The prototype
Mac application:
Download free trial
iOS app:
Principle Mirror
Price:
Principle is $99.
There is a 14-day trial, and only the days that you actually use it are counted.
Flinto for Mac
Mac application with a player for iOS.
At first I thought, “This is like the existing page-based Flinto (the web app) with the difference that you can tweak the transitions between pages a bit. Big deal.”
But the transitions have direct feedback: when you use a swipe gesture to go to the next page, you can control the speed of the transition with your finger and go back and forth (like you often can in native iOS apps). Plus, the fact that objects on a page can also be animated during a transition meant I could make the prototype, if I broke it up into seven pages, each with transitions between them.
But that does not imply that it took more work to finish the prototype. The Transition Designer (a separate view from the canvas, in which you can quickly switch between start and end states of a transition) is a very quick way of tweaking a transition because of the direct visual feedback. I finished the IF prototype in Flinto faster than in any of the other tools I tried.
The transition-based approach does have drawbacks, though: If you want to animate different properties on the same object with a different timing (say opacity + position), then you’re out of luck. As an example: the beams behind the iOS icons on page 4 stay visible when swiping to the next page because I couldn’t give the opacity animation a shorter duration.
Previewing
There’s a viewer in the Mac application, and you can use the iOS app (over WiFi) for a live preview. Both work perfectly and update instantly, without even having to save to see the results of your change.
Sending to a client
The (free) iOS app can open .flinto files, so you can just email the file to the client for them to run on their iOS device.
Differences with the app
The Instagram and Google Calendar icons are in the back when swiping to page 2, because pages are on top of each other or behind each other. The four light beams behind the iOS icons appear too early and disappear too late, because a separate timing for the opacity animation wasn’t possible; same for the notifications icon. Swiping backwards will give some animation artifacts: reversed transitions don’t always seem to work perfectly.
Pros
- The Transition Designer, hands down the fastest way of tweaking a transition.
- Sketch import. (Only one time, though; no updating afterwards.)
Update February 3, 2016: Flinto now re-imports.
Cons
- Limited to only transitions between pages (but a page can contain scrollable areas).
- Same as Principle: when a screen has different states, you’ll need to make different pages.
The prototype
Mac application:
Download free trial
Also on the Mac App Store
iOS app:
Flinto
Price:
Flinto for Mac is $99.
There is a free 14-day trial.
Tumult Hype
Mac application with a viewer for iOS.
And another tool with timeline animation!
This prototype is actually kind of a hack: you’ll notice that the animation doesn’t follow your touch 100 percent. It’s an approximation. What’s actually happening is that a horizontal pan gesture will scroll though a paused timeline.
I think that I’m lucky this prototype was possible in Hype, because it probably cannot simulate all kinds of mobile interactions. But I always wanted to learn how to use Hype; it’s a great tool…for creating HTML5 animations.
Previewing
Hype’s preview function (⌘⏎) opens the project in your browser of preference, or in the Hype Reflect app running on the same WiFi network.
Sending to a client
A Hype project is just a webpage, so you can upload to a folder and mail your client a link, or — even easier — publish to Dropbox directly from within Hype.
Differences with the app
You can’t go back to a previous page because each page is another scene, with a trigger to load the next scene when you reach the end of the animation. There’s also no overshoot: you can’t scroll past the first or last page and see the animation continue.
Pros
- Hype can also be used for creating pretty nifty interactive websites. The Pro version ($49.99 upgrade) also does responsive layouts.
Cons
- Animations don’t look as smooth as in the other tools.
- Probably not usable for recreating every possible app interaction, because that’s not what it’s made for.
The prototype
Mac application:
Download free trial
Also on the Mac App Store
iOS viewer:
Hype Reflect
Price:
Tumult Hype 3 is $49.99.
There is a free 14-day trial.
The other ones
I still had to try Axure and Indigo Studio, and commenters to the first post mentioned (or promoted) a few other tools: PencilCase, Atomic, Justinmind and Mockingbot. And what was that thing with Apple’s iAd Producer? Can it really be used for prototyping?
Axure
It seems to be popular, and even considered an industry standard. Denis, my UI designer neighbor in the co-working, loves it. But he designs websites, and websites don’t use a lot of gestures. And that’s what Axure and many other tools lack: a simple scrollable view is possible and a scroll or pan gesture can also trigger something else. But there are no scroll or pan gestures that can drive other animations.
Indigo Studio
Silverlight… It needs Silverlight installed, and I don’t even have Flash on my machine.
I would put Indigo Studio in the same category as Axure: it’s mainly for clicking, for prototyping websites, and not so much for the interactions you might have on mobile devices. Scrolling and panning have to be simulated.
Update: the folks at Infragistics were kind enough to recreate the IF onboarding to show what’s possible in Indigo Studio.
PencilCase
It seemed appealing at first because of the promises:
- 100% less coding: program using natural language.
(“When button x is tapped, go to card xyz.”) - Animations with physics.
- Easily incorporate 3D models.
- Control your prototype with hand and arm movements using Myo.
- iBeacon integration.
- And, when your prototype is done: Publish directly to the App Store!
Wait… What?!
All true, of course, but at the same time, it’s hard to get many simple things done in PencilCase. Apps also tend to run very slow.
Atomic
Another page-based tool. It’s not possible to make a scrollable view, but apparently you can make things scroll vertically on devices with a hack.
The automatically generated transitions between pages are very neat, though. Since a recent update they are also customizable with a timeline.
Justinmind
I took a quick look at this program, but it also seems to be too limited. As an example: there’s no way to create a paging scrollview or carousel; it has to be simulated using swipes. (See linked video example of a photo gallery: you swipe…and then it animates to the next picture — no panning or dragging to advance to the next picture.)
Mockingbot
Same thing: gestures are limited to using a swipe to trigger an action. Only vertical continuous scrolling is possible.
iAd Producer
I wanted to try this one because of this post by Linda Dong. iAd Producer is actually pretty user-friendly. It also has a paged scrollview (carousel) in the toolbox, but this scrollview cannot trigger other animations.
Or maybe it can… There is an extensive JavaScript API which will look familiar to iOS developers. It looks like a JavaScript version of UIKit (including datasources and delegates). So yes, it might be possible to recreate the IF onboarding, but then I would have to dive deep into the JS API to track touch gestures.
What to use?
So many tools… 2015 seems to be the year of interactive prototyping tools. My advice already differs from last month’s. Here it goes:
If you have not yet used any of these (eight tools, including the five I reviewed earlier), and want some quick prototyping done:
- Flinto for Mac
- or Principle
But if you’re ready to invest time into learning a powerful tool, or cannot get something done in Principle:
- Form, when you prefer visual programming
- Framer, if you would rather write code
If you’re on Windows: Pixate or Proto.io for quick prototyping and Framer.js (with CoffeeScript if you want) for the more advanced stuff.
In any case, it’s good to know different tools. Try a few to get a feeling of the differences and possibilities.
I’ve gotten acquainted with all of them, so I might use different tools for different situations:
- To make a tap-through prototype to figure out the flow of an app: Flinto for Mac. Any of the online page-based tools might do as well, but Flinto is pretty sweet, has the desktop advantage, and lets me work fast.
- When there are not yet any graphics, and a quick mock-up with standard UI elements is needed: Proto.io. It has a library with (configurable) interface elements for iOS, Android and Windows Phone.
- Form when the device’s sensors or camera need to be used in a prototype.
- For everything else: Principle when possible, Framer when needed.
A book coming up
After trying all these tools, I decided to write a book about Framer.
Surely it’s not the easiest tool to get started with for most designers (you’ll have to write code), but it’s pretty powerful. Code is versatile, so there are not many limits to what you can create. Framer lets you use live data in your prototypes, integrates perfectly with Sketch and Photoshop, and is expandable (you can add modules created by other users).
Update March 30, 2016: The book is available!
Originally published at cptv8.com.
