cptv8

I recreated the IF by IFTTT user onboarding in five different high-fidelity prototyping tools to get an idea of the differences between them: Proto.io, Pixate, Framer, Facebook’s Origami and RelativeWave’s Form.

See how these five recreations behave compared to the real thing:

Pages versus Layers

Why did I select these five? I discovered that recreating something that is this animation-heavy (icons moving around in different directions and at different speeds) is not even possible in most prototyping packages. The majority of tools only let you connect static pages, while only the more complex ones let you animate different objects or layers within a given page.

I’ll explain it a bit more.

In a page-based tool, you lay out different screens, and then you make hotspots or buttons to connect them together. You tap a button somewhere on one screen to go to another screen. Page-based tools generally also have a choice of different transitions between screens, like fade in, slide in from the right, slide up from below, etc. It’s a bit clunky, but it’s a good way to make quick mockups when you’re still figuring out the flow of an app (which and how many screens are needed, how they would appear, where buttons should go, etc.).

Examples of page-based tools are: Briefs, InVision, Notism, Flinto, Fluid, Mockup.io, Prott, POP, Marvel, Balsamiq, Red Pen and Keynotopia. Granted, in some of these tools you can have animations or scrollable areas within a page, but you cannot use them to emulate every interaction possible in real native apps. For this you will need a…

Layer-based tool: Every asset, interface element, or in other words, layer can be made tappable, swipe-able, draggable… but also animated. Prototyping a complete app in a tool like this would be crazy, though; it would be too much work (you might as well build the real app). But they’re great for trying out new interactions, or for tweaking the timing of an animation.

Proto.io, Pixate, Framer, Facebook’s Origami and RelativeWave’s Form are the tools I tried. To be honest, there are a few others – Axure and Indigo Studio – but they seem to be more enterprisey (read: rather expensive). I might try them out some other time.

So, onwards with the chosen ones.

1. Proto.io

Web-based, with players for iOS and Android.

Proto.io is a surprisingly powerful web app; it has many, many functions. But because everything works by drag-and-drop, clicking buttons and selecting values from lists, it can be a bit overwhelming sometimes to find the setting you need.

Because of the nature of the IF prototype – different objects moving at different speeds – I had to add several custom JavaScript calculations. The provided single-line text field was too small for the lengthy calculations so to have an overview I kept them in a text file on my computer. Important to note is that these JavaScript expressions can fail without warning. Be sure to check the console of your web browser when something doesn’t work. (I had an error caused by a variable containing a negative value.)

Previewing while creating the prototype

This is rather annoying: you have to click [Save Project] and then [Preview] every time you want see the result of the changes you made.

Sending a prototype to a client

• On the web: Easy – you can generate a public link, like this one. (These links can also be opened in a mobile browser, and added to the iOS home screen as an ‘app’.) You can also present your work to the general public in Proto.io Spaces.
• On a device: You can make (free) Reviewer accounts for clients and give them access to a project. They can run the prototypes in the iOS or Android app.

Differences between this prototype and the actual app

Not many. The animations are less fluid, though, because I had to attach many interactions containing custom JavaScript calculations to the scrollview. It’s not too bad on the web, but it’s way too slow on a device. Playback speed seems to be more normal for simpler prototypes.

Pros

• Easy to make a quick mock-up because of the extensive library of standard UI elements, many of them customizable.
• Proto.io is the only one (of these five) that’s also page-based: you can have multiple screens within a single project and create transitions between screens.
• Dropbox syncing for assets.

Cons

• No live preview.
• Animations can become slow when you add many interactions, like in this example.
• All your prototypes are saved on their web platform, which means that you can’t even run them when you would cancel your account. (There is the possibility to park your account: your projects will still be there when you reactivate your account. Parked accounts are free.)
• No 3D animation possible.

This prototype view on Proto.io Spaces (sign up to import it to your account)
Website proto.io	iOS app Proto.io	Android app Proto.io Player
Price $29/month or $288/year for 5 active projects. There are also plans for 10, 15 or 30 active projects, and a free 15-day trial.

2. Pixate

Web-based, but there’s also a desktop application for OS X and Windows: Pixate Studio. Players for iOS and Android.

Pixate seems to strike the right balance between ease of use and functionality: it can do a lot more than the simpler page-based tools, but the learning curve is not too steep: after going through the User Guide and video tutorials you will be on your way. There are also several demos that you can deconstruct to see how they’re made.

Previewing

• On the web: You can connect the iOS or Android app to your account and run the prototype while working on it. It will update automatically (after a small delay) with the changes you made in the web app.
• On the desktop: Pixate Studio – which, by the way, looks and works identical to the web platform – can use Xcode’s iOS Simulator (on Mac) to run the prototype. You can also connect with the iOS or Android app over local WiFi. This works great, especially because both (Simulator + app) update instantly.

Sending to a client

People can run a project in the iOS or Android player by scanning the QR code on a page you shared. You can also add unlimited collaborators to your account and give them access to prototypes. (They’ll have to log in to their account in the app.)

Differences with the app

• The sixth page is missing, because the canvas in Pixate is only so wide.
• The light trails under the iOS icons (page 4) don’t fade in when sliding in from below.
• The iOS app icons flicker sometimes, because I had to make three copies of each (and show and hide them) to work around a bug in Pixate.

Pros

• It’s easy to learn how to use it.

Cons

• Still a bit buggy; sometimes you might need to work around a bug.
• You’ll need an active paid account to send prototypes to clients, because Pixate Studio cannot share projects and limits the playback to only your computer (and devices on your local WiFi).

This prototype view in app | download .pixate file
Website www.pixate.com	Mac or PC Pixate Studio	Mobile apps iOS | Android
Price • $20/user/month or $200/user/year (There is a free account limited to 1 prototype) • Pixate Studio costs $149. (There is a free 7-day trial)

3. Facebook Origami

Only for Mac, because you need Apple’s Quartz Composer. There’s a viewer for testing a prototype on a connected iPhone or iPad.

As you probably know, Origami is built by the design team at Facebook working on Paper. Origami is not a standalone program, it’s kind of a plug-in for Quartz Composer, a visual programming environment that is part of Apple’s developer tools.

You program in Quartz Composer by connecting patches to each other. Different patches have different functions, and Origami is mainly a set of extra patches made for app UI design. Many people (not me, though) will prefer this to having to write code, but when you have to describe something like “if this, then do that, with the value from this calculation, but if not…” you’ll still have to program, but by connecting several patches instead of writing lines of code.

On a side note: IDEO also created a prototyping framework based on Quartz Composer, called Avocado. It has a few functions that might be handy for some projects: Bluetooth integration, an iOS interactive keyboard, a dial patch for scroll wheel-like interactions and a flippable card patch. Layers can also be made draggable.

Previewing

• On the desktop: Quartz Composer has a viewer, and any change you make in the editor will instantly be reflected in the viewer.
• On a device: With the Origami Live app you can test on an iOS device plugged into your Mac. The app reacts to all gestures (taps, swipes, etc.) but is a actually just a viewport to what’s running in Quartz Composer. So if your Mac has difficulty running the prototype at 60fps, it will not run any faster in Origami Live.

Sending to a client

This is going to be difficult. You can of course make a screen-recording of your prototype, but this defeats the purpose of making an interactive prototype; you might as well make something in After Effects. The only real way to try a prototype on another machine is to have the same setup. So if your client uses a Mac, she can install Quartz Composer + Origami to run your prototypes – after registering as an Apple Developer, of course.

Differences with the app

It might run a bit slower than the real thing, depending on your computer. Quartz Composer is quite a power hog, and might have your computer’s fan spinning, especially when your Mac doesn’t have a powerful graphics card (like my Mac mini) or have a few monitors connected (guilty). I get maximum 20 fps, even when using just one monitor.

Pros

• The documentation might be a bit lacking but there’s a very active user community. Plus you can find several videos, tutorials and blog posts.

Cons

• It can be hard to find out how to do things and which (of the many) patches to use.
• It’s unclear if Quartz Composer is still in active development. The last version is from November 2011. But at the same time, Apple would probably launch a replacement tool (for visual interaction design using Quartz) before mothballing this one.

This prototype download .qtz file
Website facebook.github.io/origami	Mac install instructions	iOS viewer Origami Live
Price Free! You do need an Apple Developer account, but that’s also free, as in beer, or whatever Apple developers might drink.

4. Framer

Framer Studio is a prototyping application for Mac, but the JavaScript framework it runs on, Framer.js, is open-source. You only need Safari or Chrome to use Framer.js.

No dragging and dropping, pushing buttons, or connecting dots here – in Framer you will have to code. Programmers will feel at home, designers maybe less so. But it’s not too hard – Framer Studio uses a simplified version of JavaScript: CoffeeScript. But the fact that the actual engine (Framer.js) uses JavaScript makes for a lot of possibilities: you can do everything that’s possible in a web browser, so you can connect to servers to use live data, or create a Twitter client that shows real-time tweets.

Previewing

• On the desktop: Framer Studio has a live interactive preview on the right; it updates instantly when you change something.
• On a device: There are apps for Android and iOS. They both connect to Framer Studio when on the same WiFi network, and automatically refresh the prototype every time you save in Framer Studio.

Sending to a client

With one click you generate a public page (like this one), which can be viewed in Chrome or Safari, or in a mobile browser. (The link can be added to the iOS home screen as an ‘app’.) The same link can also be opened in the viewers (actually just chromeless browsers) for iOS and Android. A big prototype like this one might take several seconds to load in the viewer, but then it animates smoothly.

Differences with the app

This prototype does a bit more than the other four: you can switch between the Sign in, Sign up and Reset Password modes on the last page. (You cannot actually log in or sign up, but even that would have been possible to recreate in Framer.)

Pros

• Integration with Sketch or Photoshop is as good as it gets: you can refer to layers or objects by the names you gave them while designing. (Framer.js has a Framer Generator Mac application included that does the same trick.)
• Anything that is possible with JavaScript – like using live data from web services, or using the accelerometer – is also possible in Framer.

Cons

• You’ll have to write code for everything, for every animation or interaction. You’ll need to be or get acquainted with CoffeeScript, maybe also JavaScript.

This prototype view online | download .framer project
Website framerjs.com	Mac Framer Studio	iOS app Frameless	Android app Framer
Price Framer.js, the JavaScript framework, is open-source and free. Framer Studio is $99. (There is a free 14-day trial)

5. Form by RelativeWave

Mac application with a viewer for iPhone or iPad.

Form is still very young (it launched September 2014) and is clearly inspired by what Facebook and IDEO are creating on top of Quartz Composer. The folks at RelativeWave probably thought, “How would Origami look without the Quartz Composer baggage?” Origami users will feel right at home; many patches are the same and Form contains only the patches you need.

Previewing

The prototype actually runs in the connected iOS app. You’ll notice that there will be no readout of the values (when double-clicking a connection between two patches) when no device is connected. A viewer in the Mac application, like in Quartz Composer, would be definitely handy, and seems to be planned.

Sending to a client

Let’s hope your client has a Mac, and an iOS device, because they’ll need both to be able to run your prototype. Fortunately both the Mac application and the iOS app are free downloads.

Differences with the app

The scrolling is bit off. I had to hack it because there isn’t yet a patch included that does paged scrolling (a.k.a. carousel), the type of scrolling that lets you swipe from page to page.

Pros

• Compared to Origami: the prototype runs natively on the device, so it’s a lot more responsive compared to Origami Live.
• You can use your device’s camera, accelerometer, gyroscope and location. (Origami can use your Mac’s webcam)

Cons

• Having a complex prototype with many patches will slow down the application considerably. Make sure to group patches when Form gets slow; it seems to alleviate the problem a bit.
• It’s not clear what Google’s plans are with Form – they might even kill it. But at least a 1.3 update should be launched soon. (The last version, 1.2, is from January 2015)

This prototype download .form file
Website www.relativewave.com/form	Mac application Form	iOS app Form Viewer
Price Free! The Mac application used to be $79.99, but when Google bought RelativeWave last November (only a few months after launch) they made it free.

What to use?

If you have not yet used any of these, and want some quick prototyping done:

• Pixate
• or Proto.io

But if you’re ready to invest time into learning a powerful tool:

• Form, when you prefer visual programming
• Framer, if you would rather write code

I got acquainted with all of them (at least a bit), so I might use different tools for different situations:

• A page-based tool when I’m still working on the flow of an app. There’s no need for high-fidelity prototyping in this early stage.
• But also Proto.io could be used for low-fidelity prototyping: it contains standard interface elements for iOS, Android and Windows Phone, and you can link between screens. And it would have the added advantage that the prototype could be made prettier afterwards with assets designed in Sketch or Photoshop.
• Pixate when there’s already an existing UI design and assets, as long as the animations are not too complicated.
• Form when the device’s sensors or camera need to be used in a prototype.
• Framer for everything else.

One more thing

These tools are all very young, and we’re all still figuring out what the best way would be to do interaction design, but I see a great future for Framer. I like the versatility and performance of Framer a lot, and I’ve found the perfect excuse to play with it some more: I’m writing a book about Framer!

The Framer book will be a manual for people without any programming experience, starting with the basics of CoffeeScript. It will also contain a bunch of tutorials in which you rebuild popular apps. And the book will show you how to add real data to your prototypes using a Parse or FireBase backend, or plug in live data from services like Twitter, Flickr, Dribbble, etc…

Sign up below to receive an early-bird discount when the book is released.