Studio of Stephen Meszaros
About Email

Blog post—Last updated March 21, 2023

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

In a 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 a few products I’ve worked on, namely Wildcard. I created hundreds of prototypes for Wildcard, and dozens for Daily. Being able to articulate design patterns with something you can hold in your hand is a very powerful tool. Thanks to my design manager and friend Khoi for providing me with the space to explore this area.

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.

Resources

Pros

Cons

Pixate

Update: Pixate was acquired by Google and shut down in October 2016.

Pixate is a free prototyping tool and in full disclosure, it is one of my personal favorites. Pixate has great customer support, yet where they truly shine is with the rapid number of improvements they continuously release.

If you have Xcode and iOS Simulator installed Pixate makes it easy to preview your prototypes on the desktop. This is a fantastic feature and one in which I use regularly. The team also offers a Cloud feature which makes sharing your prototypes very simple, for $5/month you can share unlimited projects and preview your shared prototypes from anywhere.

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.

Example

The following is a video of a prototype I had built in Pixate for a side project, GRYSCL—a black and white only social network. While the project never came to fruition this was a prototype that I built to show a gestural based navigation pattern for uploading photos to the app.

Resources

Pros

Cons

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.

Resources

Pros

Cons

Marvel

What has always drawn me to Marvel is simply how well visually designed it is. I have used many other tools that are comparable 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.

Resources

Pros

Cons

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

Cons

Resources

Framer.js

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

Cons

InVision

The InVision team has built a product that offers many features which fall outside the realm of prototyping. With InVision you also have the ability to sync your design files, review revisions, collaborate with team members, and most importantly, have conversations around deliverables. Neglecting to mention these features would only be telling a portion of InVision’s story. Because of this I found InVision to be overwhelming at first glance. Admittedly though, this was due to the fact that I was only looking for prototyping features at the time.

Since publishing this post however, a lot of folks have sent me emails and Tweets asking why I neglected to write about InVision. We’ve even had a few interviewees for our designer position (here at Wildcard) mention how much they love using it too.

This really inspired me to give it another chance. And, with our first version of Wildcard now in the App Store, I’ve been able to begin incorporating it into my workflow.

At first the prototyping portion of InVision reminds me of Marvel. In short, InVision is great for linking together screens, helping you to build interactive user-flows. Prototypes are built in your browser, with “hot-spots”. You can choose from a range of standard transitions such as instant, fade, slide, dissolve, etc. Outside of these transitions, InVision is certainly limited. For example, as of this writing you cannot add custom transitions or delays.

Like many of the other tools in this list, InVision prototypes are easy to share and view on nearly any device, mobile or desktop.

For myself InVision is differentiated through the idea that prototyping is only one piece of the design process—and it’s certainly a critical piece. I get the sense that prototyping is promoted through more regular use of the product.

Allow me to elaborate. As you work your design documents are synced to the cloud. InVision intelligently pulls your screens (think of a Sketch artboard) from the document and places them into a specific folder. After you login to your dashboard, you can link screens together with hot-spots and transitions—simulating a basic user-flow. Finally, you can share these prototypes with your team and gather feedback directly on the deliverable.

All told, as a prototyping tool InVision is great for developing user flows. I’ve really only begun to mention some of the other capabilities, so please keep your eyes peeled for a more in-depth post about my experience with InVision, coming soon.

Resources

Pros

Cons

Principle

Principle is a prototyping app for Mac from former Apple Engineer, Daniel Hooper. The interface feels much more native than many of the other tools on this list, and I must say, I love that. It’s fast and familiar, a very refreshing app akin to Sketch.

One of the things that I love the most about Principle is the fact that it implies that you name your layers consistently. Core to Principle is animating layers between artboards, and while naming them in any specific way is by no means, required, objects spread across artboards must be named consistently. And hey, admit it, we could all use a kick in the ass when it comes to organizing layers. As a huge organization nut this really resonates with me.

Animating layers is very, very simple. Simply duplicate an artboard, adjust a layers attribute (angle, rotation, position, etc.) and finally add an interaction between the two artboards. Timing and easing curves are adjusted using the Animate palette, which feels similar to the timeline in After Effects. You can read more about animation in Principle here.

Animate is only one way of animating objects in Priniciple, there are also Drivers. Think of Drivers as keyframe based animations that occur in an artboard, versus between artboards. Drivers link properties together and are triggered via gesture-based interactions, like a swipe or drag event—learn more via Principle’s documentation site here.

Drivers are very powerful, albeit a bit more complex I must say. However they open up a ton of possibilites. Interactions and animations that have taken me hours to build in most other apps take minutes in Priniciple.

Finally, one of the most powerful features of Principle is that you can animate almost anything, including masks. As my good friend Antonio put it, “Shit you can animate masks!!” This in and of itself is amazing.

All told, I have found Principle to be great for micro-interactions and view based transitions. Not many tools offer such simple control for both problems. I’ll be following Principle closely to see what Daniel has up his sleeves next.

Example

The following is a video of a prototype I had built in Principle to help hint when a new page of participants is available during a video call on a native mobile device (for Daily).

Resources

Pros

Cons

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 [email protected] or shoot me a tweet.

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