Five app prototyping tools compared

Tes Mat
Tes Mat
Aug 6, 2015 · 12 min read

Proto.io, Pixate, Origami, Framer & Form

There are 🇺🇦 Ukrainian, 🇷🇺 Russian (+ another one) and 🇨🇳 Chinese (+ another one) translations of this article, and there’s a follow-up with Principle, Flinto for Mac & Tumult Hype.

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

Image for post
Image for post

I’ll explain it a bit more.

Page-based tools

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.

Layer-based tools

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.


Proto.io

Web-based, with players for iOS and Android.

Image for post
Image for post

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

Sending a prototype to a client

  • 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 app

Pros

  • 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

  • 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 $5 / month.)
  • No 3D animation possible.

The prototype

Image for post
Image for post
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.


Pixate

Desktop application for OS X and Windows.
Players for iOS and Android.

Image for post
Image for post

Update October 5, 2016: Pixate will no longer be updated or supported after October 31, and Pixate Cloud will be shut down.

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

Sending to a client

  1. You can also add unlimited collaborators to your Cloud account and give them access to prototypes. They’ll have to log in to their account in the app.
  2. Or you can simply mail somebody the .pixate file. They can then open and run it in Pixate Studio (but also see how it’s made and change it).

Differences with the app

Pros

Cons

The prototype

Image for post
Image for post
www.pixate.com

Mac or PC application:
Pixate Studio

Mobile apps:
iOS | Android

Price:
Pixate Studio
Free! (It used to be $149, until Google bought Pixate in July 2015.)
Pixate Cloud
$5/user/month or $50/user/year. (There is a free 30-day trial.)


Facebook Origami

Runs in Apple’s Quartz Composer for Mac.
There’s a viewer for testing on iPhone or iPad.

Image for post
Image for post

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 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

Differences with the app

Pros

Cons

  • 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.

The prototype

Image for post
Image for post
facebook.github.io/origami

Mac application:
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.


Framer

Framer Studio is a prototyping application for Mac, but Framer.js only needs Safari or Chrome.

Image for post
Image for post

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 a device: There are apps for Android and iOS. They all 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

Differences with the app

Pros

  • Anything that is possible with JavaScript — like using live data from web services, or using the accelerometer — is also possible in Framer.

Cons

The prototype

Image for post
Image for post
framerjs.com

Mac application:
Framer Studio

iOS apps:
Framer Preview | Frames

Android app:
Framer

Windows 10 Mobile app:
Framed

Price:
Framer.js, the JavaScript framework, is open-source and free.
Framer Studio is $129. (There is a free 8-hours-of-active-use trial)


Form by RelativeWave

Mac application with a viewer for iPhone or iPad.

Image for post
Image for post

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

Sending to a client

Differences with the app

Pros

  • You can use your device’s camera and location. (Origami can use your Mac’s webcam.)

Cons

The prototype

Image for post
Image for post
www.relativewave.com

Mac application:
Form

iOS app:
Form Viewer

Price:
Free! The Mac application used to be $79.99, but when Google bought RelativeWave in Nov. 2014 (only months after launch) they made it free.


What to use?

  • 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’ve gotten 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

Image for post
Image for post
https://framerbook.com/

The Framer book will be a manual for people without any programming experience, and will start with the basics of CoffeeScript. It will also contain tutorials in which you rebuild popular apps.

Update March 30, 2016: The book is available!


Originally published at cptv8.com.

Design + Sketch

The best collection of articles, tips, tutorials, and…