←

Prototyping Tools

Breaking down the pros and cons to some of today’s most popular prototyping tools and applications.

In my previous post Getting Started with Prototyping I highlighted three reasons why I believe we should all be prototyping our designs, along with three points to remember when choosing a tool. This is part two: the tools themselves.

Below I highlight some of the most popular tools used for prototyping interactions. These tools can be used for both iOS and Android. They are constantly changing, and new tools seem to enter the market every week. With that said, these are the tools of early-2015.

I briefly describe and expose some of their key characteristics and shine light on their pros and cons. In complete candor I must say that these are my thoughts. As I mentioned in my last post no tool is going to work perfectly for everyone or every situation. In order of appearance, the tools highlighted are:

These products have been pivotal to the design of Wildcard. Without them we surely would not be where we are today. Download Wildcard for your iPhone and see for yourself how our product was influenced through the process of prototyping.

Quartz Composer

Yosemite replacement icon by Louie Mantia

Quartz Composer (QC) is a node-based visual programming application—at first look it appears incredibly intimidating. Prototypes are built by connecting patches with noodles. There are many types of patches, like an interaction patch, which allow you to track a mouse event for example, or transition patches, which allow you to change a variable. To really convey the power of QC, I’d need to write a much longer post. I recommend checking out the resource links pasted below.

QC is developed by Apple and is available for free as a developer tool. You can follow instructions on how to install it here. Unfortunately the last stable build was released in 2011, which in and of itself is troublesome.

I have found QC to be great tool for developing micro animations and transitions. Live feedback on the desktop is one of its biggest benefits in that I do not need to check my phone each time a change is made. Moreover, QC has been given great revival in recent years with thanks to Facebook and the release of their internal patch library, Origami—which was used to prototype Paper. Much has been written about Origami, so I won’t go into too much detail—though I have linked to some resources below.

My biggest gripe with QC of late has been that it eats up a lot of my CPU. This coupled with the lack of support from Apple worries me.

Example

The following is a video of a prototype I had built in QC with Origami while designing the interaction of a navigation card for the Wildcard app. The prototype itself allows us to physically click (with a mouse) on the interface to trigger the interaction—simulating a tap on a touchscreen.

Quartz Composer prototype example
Resources
Pros
  • Real-time feedback on desktop
  • Lots of tutorials
  • Great patch resources, see: Origami and Avocado
  • Free!
Cons
  • Lack of support from Apple
  • Cannot preview on your iOS device
  • Cannot share prototypes very easily
  • Learning curve is kind of steep

Form

When it was released not long ago, Form really caught the of attention of the Origami community. It seemed to come out of left field during a time when Quartz Composer was quickly gaining attention and speed. Here is a Facebook post about that release of Form (you’ll need to join the Facebook group to view).

Form borrows many of the same UI patterns that exist in QC. Its interface is very similar in that prototypes are constructed by connecting patches by way of noodles. The company that makes Form, Relative Wave, generated so much attention that they were scooped up by Google in 2014.

Out of the box, the biggest difference between Form and QC is that you can interact with your Form prototypes on an iOS device. The team also touts that prototypes built in Form are native, which in short gives you access to a device’s sensors—camera, accelerometer etc. This is indeed pretty neat.

In full disclosure I have not had much of an opportunity to play with Form just yet. The product came into market just as we were approaching the first release of Wildcard, when we had largely completed our prototyping stage. I fully intend on tinkering with Form in the future.

Resources
Pros
  • Live feedback on iOS devices
  • Native code
  • Use devices sensors
  • Free!
Cons
  • Intimidating like Quartz Composer
  • Learning curve is again a bit steep

Pixate

Update: The folks at Pixate just informed me that they do offer a free plan as well! You can check out all of their plans here.

Pixate is a subscription based product and in full disclosure, it has certainly become my favorite tool of late. Pixate has great customer support, yet where they truly shine is with the rapid number of improvements they continuously release.

With Pixate you can view and share prototypes directly on an Android or iOS device, though as of this writing you cannot interact with the prototypes on your desktop. Coming from QC, I miss the ability to preview on the desktop as Pixate requires me to pick up and interact with my phone every single time. This may seem trivial, but in practice it quickly becomes heavy-handed. Pro-tip: Give it time, once you become familiar with Pixate it’s really not so bad.

Rumor has it that the folks at Pixate are working on enabling the export of native code as well. Imagine a world in which the values from easing curves, springs and bounces could simply be handed to an engineer with line-for-line perfection! I cannot wait to see this in action.

For myself Pixate is also great for micro animations and interactions. It’s also a slightly easier tool for developing more complex view-based transitions. Being able to interact with your designs on an iOS or Android device gives Pixate a leg up over the competition.

Resources
Pros
  • Free and paid plans
  • Live view on devices
  • Easily shareable
  • Asset library
  • Student discounts
  • Production code coming soon!
Cons
  • Poor desktop Mac app
  • Cannot work offline

Adobe After Effects

I know, this one may be a shocker. However while building Wildcard, After Effects (AE) was integral to developing time and loop based animations. For those of you familiar with Flash, stepping into AE will be a breeze.

As one of the older products on my list, After Effects also benefits from a wide range of resources and tutorials. Originally designed for use in motion graphics, this extended community makes learning and unlocking the potential of AE far more accessible than it may seem.

Of course Adobe products can become quite pricey for the independent designer, which may steepen the barrier to entry. Rendering files can also take a long time and any prototypes you develop can only be viewed as videos (without a lot of extra work). Even so, when you accept these constraints, you open up a wide range of possibilities.

Example

This prototype was used for the “loading cards” animation (in Wildcard). It takes a bit of time to get going, longer than any user would probably hold out for, but I hope that you find the final transition to be worth the wait.

Loading Cards prototype built for Wildcard in After Effects
Resources
Pros
  • Lots of tutorials for free
  • Quick to pick up from Flash
  • Simple, timeline based UI
Cons
  • Pricy for independent designers
  • Exporting and rendering times
  • Non-interactive prototypes

Marvel

What has always drawn me to Marvel is simply how well visually designed it is. I have used many other tools that are comperable to Marvel, like InVision, but at the end of the day I find Marvel to take the cake for it’s focus on simplicity.

Until rather recently I had only used Marvel on and off. At first it took me quite some time to realize where a tool like Marvel could fit into my workflow. With time though I soon realized that I should have been using it all along—simply put, Marvel is fantastic for designing user flows.

As a web based application Marvel includes many modern conveniences like the ability to drag-and-drop image files directly from the desktop. When prototyping the interface allows you to define hot spots by simply dragging a rectangle over an image. From here you can link images together through a set of standard transitions such as a slide, push, fade or pop.

Sharing prototypes also couldn’t be easier. Email a link to a colleague or friend and they’ll have the ability to interact with it on any device—from desktop computer to mobile phone. iPhone users can even save prototypes to their homescreen via Safari. What I like most about this is that users do not need to install a third-party app to view a prototype.

Example

Unfortuantely I cannot show a prototype built for Wildcard here just yet. Instead here is an interactive prototype of Twitter’s purchase flow to give an example of how Marvel works. This also is proof of how easy it is to share a Marvel prototype.

Twitter purchase flow documented with Marvel
Resources
Pros
  • Free and paid versions
  • Simple intuitive interface
  • Easily shareable, with anyone
Cons
  • Stock transitions
  • No custom controls

Keynote

I must say that this one is fairly creative. When I first had learned about using Keynote to prototype designs I was very intrigued and just had to give it a shot. Given that Keynote ships for free with essentially any new Mac, there really isn’t even an excuse not to.

For me, when all is said and done, I quickly found Keynote to be very limiting and tough to control. For instance, Keynote has no notion of layers, which makes locating objects on a busy canvas very difficult. This forces me to work across a wide range of slides. Ultimately I end up with lengthy documents, which are difficult to manage.

Another gripe I have with Keynote is: how we have to interact with the application. To preview a prototype you constantly have to “Play” the file which in turn takes over your display, and only when you exit can you then make an edit.

What’s even more frustrating is Apple’s iOS Keynote application. It really is an app with so much potential, yet to this day you can not view a presentation in portrait orientation. So an app like Twitter for instance, which is predominantly designed and used in portrait orientation, requires a tilt of the head should you decide to view a prototype on an iPhone.

Still, Keynote has a very vibrant community and is great for developing rather rudimentary prototypes. I had found it great for articulating design thoughts rather quickly once I understood these constraints. It may be that it’s just not for me.

Pros
  • Essentially free with a new Mac
  • Very intuitive and familiar interface
Cons
  • Tough to preview prototypes
  • Quickly can become tough to manage
  • Hard to share with others (hint: they need Keynote too)
Resources

Framer.js

Peronally, I have had a tough time finding a spot for Framer.js in my tool belt. Yet I am determined to do so for one reason alone: by learning Framer one inherently also must learn and understand JavaScript as well. Unfortunately however learning to code is undoubtably one of the biggest red flags for most designers and in turn is used as a strike against Framer.

This obviously makes Framer intimidating, which is unfortunate since learning to code, while a different topic unto itself, is one of the best things about the application.

With a backbone built on top of JavaScript there are many advantages, namely the millions of resources and tutorials strewn all across the web. This massive open source community is avaialble not only to those building Framer but to anyone using it as well. While Framer offers a library of its own it also enables us to experiment. We are not forced to wait for a new app release to try something new.

There is also the fact that your prototypes work across devices and browsers without too much concern. Again this is a prototyping tool, so no need to QA your code much.

Framer is really great for a wide range of design problems. I have seen prototypes of micro animations all the way up to full transition views. Check out some great examples here.

Resources
Pros
  • Learn JavaScript!
  • Free and open sourced (Framer.js)
  • Framer Studio (paid) OS X app
  • Wide browser compatibility
  • Benefit from a large JS community
Cons
  • Intimidating to learn
  • Browsers can require tinkering to get that native feeling

Closing

All told I have only begun to scrape the surface of what is possible with these tools and applications. As I mentioned earlier my experience may differ from yours for a number of reasons—technical experience and the design problem at hand being just a couple. The constraints of a project should of course always be considered too.

These are just a few of the tools that I have found to work for me. There are new tools being introduced into the marketplace all the time. Each time I turn around I see something new and inspiring. So I encourage you to try a new tool, get your feet wet and test the waters.

In my mind prototyping simply allows us to articulate our design thoughts more clearly. It gives designers the ability to engage in a better dialogue with our engineering partners—our conversations become richer when we all huddle around a prototype. Design failures are discovered earlier, and we can test prototypes with real people in user testing sessions. Prototyping encourages creativity and iteration. It helps spawn ideas—a digital, interactive sketchbook if you will.

If there is anything you think I should add please let me know. I’m happy to continue the conversation and add to this post. You can email me at contact.meszaros@gmail.com or shoot me a tweet.

Special thanks to my colleagues Khoi and Doug for helping with this post.