Published on | Prototyping: From UX to Front End — Medium Sanette Tanaka

Testing tools so you don’t have to

A few weeks ago, my design director asked if I’d mind making a quick six-screen prototype that we could test with users. The mocks were done, and all I needed to do was string them together into a prototype that we could load into our testing suite.

I flipped through my mental rolodex of prototyping tools. Sure, I said. I estimated a few hours, tops.

Those few hours soon stretched into a week. I tried a half dozen prototyping tools hoping that one would satisfy the ask, but each fell just short of ideal. My design director Yesenia Perez-Cruz tweeted for help. Our user researcher Gregg Bernstein turned to his network for advice. I cycled through Slack workspaces looking for ideas.

What started with optimism…

…turned into head-banging.

Some (like Marvel and InVision) didn’t support dual left/right swiping from a single hotspot; others (like Flinto) don’t generate public URLs. Framer didn’t render consistently across screen sizes when we loaded the prototype into Validately and Lookback for testing. (In fairness, we’re not sure if that’s the problem of Framer, Validately, or Lookback.)

So where did I eventually end up? One, with a working prototype, fortunately (we went with Atomic, which got us 90% of where we wanted to be). And two, with a heavily annotated mental rolodex of ten prototyping tools that I’m now sharing with you. The list is nonexhaustive, and tools are ranked roughly from least effort to most effort. I hope you find it useful in your own prototyping adventures.

One final note — I am not trying to suggest that any product is superior to another. If there’s one thing I’ve learned, there is no perfect product (yet). Choose the prototyping tool based on what you need. (Are you presenting to stakeholders? Testing in person? Testing at scale? Creating an artifact to communicate with devs?) Design for that purpose, create assets accordingly, and revisit these products often. They change all the time, and get better with each passing month.

Note: Prices listed apply after any free trials.

Pop/Marvel* (mobile apps)

* Marvel owns both of these apps, and they’re so similar, I reviewed them together

The Claim: Pop or Marvel “helps you transform your pen and paper ideas into an interactive iPhone or Android prototype.”

Price: Free

Desktop, mobile, or web app? Mobile

Pros: Lightweight, fast, and easy to learn; create screens by uploading images, taking photos, or designing in-app; has advanced transitions (like pop and slide fade); generates a public URL that you can share with others

Cons: Does not support advanced gestures (tap only); doesn’t support overlays (where separate components display and move independently of the background); doesn’t support multiple actions per hotspot

The Verdict: These apps are delightful to use, especially if you have a set of paper sketches or want to get a design out of your head and into a prototype (the “Create Design” option lets you sketch in the app itself). Use if you want to prototype a quick mobile idea or flow, for yourself or to share with your team.

InVision

The Claim: “Get high-fidelity in under 5 minutes. Upload your design files and add animations, gestures, and transitions to transform your static screens into clickable, interactive prototypes.”

Price: First prototype is free, plans start at $15 per month

Desktop, mobile, or web app? Web

Pros: Fast and easy to learn; can make prototypes for multiple devices and screen sizes; supports advanced gestures (like swipe and double tap); supports overlays; connects with some testing suites (Lookback and UserTesting); has version history; generates a public URL

Cons: No option to design in-app (your screens and assets need to be added in advance); gestures and transitions can’t be tweaked; doesn’t support multiple actions per hotspot

The Verdict: InVision is one of my go-tos because it’s easy to use and suits 80% of my needs. Also, InVision’s dark background makes it ideal for stakeholder presentations. A few workflow quirks, however, make me question my commitment — when I’m logged in, navigating to invisionapp.com doesn’t automatically redirect to my dashboard; deleting projects can be buggy; and certain features, like deleting or rearranging multiple screens at a time, aren’t obvious. Use if you need to present to stakeholders and want one simple, no-fuss tool.

Marvel (web app)

The Claim: “Simple design, prototyping and collaboration. Create screens directly in Marvel or add your images from Sketch or Photoshop. You can even sync designs from your cloud storage!”

Price: First two prototypes are free, plans start at $16 per month

Desktop, mobile, or web app? Web

Pros: Fast and easy to learn; can make prototypes for multiple devices and screen sizes; supports advanced gestures (including mouse over); supports overlays; can design simple shapes and out-of-the-box components in the design mode; generates a public URL

Cons: Prototypes are a little slow to load; gestures and transitions can’t be tweaked; doesn’t support multiple actions per hotspot

The Verdict: I’m a fan of Marvel because I appreciate the Marvel UniverseTM. The separate web and mobile apps, paired with their respective design modes, all help satisfy needs without packing features into one massive application. Sadly, the prototypes my team made in Marvel didn’t work nicely with Validately and Lookback when we started to user test. Use if you need to design for multiple screen sizes, support simple interactions, and want a single tool.

Flinto

The Claim: “Flinto is a Mac app used by top designers around the world to create interactive and animated prototypes of their app designs.”

Price: $99

Desktop, mobile, or web app? Desktop

Pros: Fairly quick and intuitive; can design simple shapes in-app; supports advanced gestures and transitions; supports multiple actions per hotspot and screen; has a canvas view with artboards, layers, and groups

Cons: Gestures and transitions can’t be tweaked; does not generate a public URL

The Verdict: Features like the freeform canvas view, which makes it easy to work with lots of screens, and the fast-loading preview mode make Flinto very appealing. Unfortunately, not generating a public URL is a sticking point for me, so Flinto is best when you’re working out ideas on your own. Use if you prefer a canvas view, need to customize your device sizes, or want to support more robust gestures and transitions without having to code.

Adobe XD

The Claim: “Go from concept to prototype faster with Adobe XD, the all-in-one UX/UI solution for designing websites, mobile apps, and more. With smooth, powerful performance, it’s easy to deliver experiences that work and feel as good as they look on any screen.”

Price: $9.99 per month for a single app on Creative Cloud

Desktop, mobile, or web app? Desktop

Pros: Fairly quick and intuitive; can design in-app; supports advanced transitions (including easing); has a canvas view with artboards, layers, and groups; has screen recording; easy to move between design and prototyping; generates a public URL; can pull in elements created in Photoshop, Illustrator, etc.

Cons: Doesn’t support real hotspots or overlays; difficult to fine tune interactions, doesn’t support advanced gestures; doesn’t support multiple actions per screen

The Verdict: XD is at its best if you design and prototype mostly within the Adobe suite since you can pull in images, colors, and character styles using the Creative Cloud Libraries integration. XD has some thoughtful workflow considerations too, like the Repeat Grid feature. Use if you have full screens that you want to prototype and you primarily work within the Adobe suite.

Atomic

The Claim: “Atomic has everything you need to create amazing prototypes and it comes with all the happiness of being 100% in the cloud.”

Price: First prototype is free, plans start at $19 per month

Desktop, mobile, or web app? Web

Pros: Can make prototypes for multiple devices and screen sizes; can design simple shapes in-app; supports advanced transitions and gestures (including tap and hold, mouse over, and mouse out), as well as precise fine-tuning of those interactions; supports overlays; supports multiple actions per hotspot; can tie interactions to conditional behaviors or variables; generates a public URL; works well with Validately

Cons: A slight learning curve, especially regarding features like tying actions to variables; overlays can’t be placed in a specific spot relative to the screen while fixing the background in place

The Verdict: Atomic is a powerful tool, but fairly easy to use — an exciting combo. I was able to spin up a prototype quickly, but at the same time, I know there are more advanced features at my disposal, especially in terms of components and variables, which can be used to power something like forms. Use if you want to work in a web app, support more robust gestures and transitions without coding, or feed a URL into Validately or Lookback.

Principle

The Claim: “Principle makes it easy to design animated and interactive user interfaces. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.”

Price: $129

Desktop or web app? Desktop

Pros: Great dual-screen preview window; supports advanced gestures and transitions, as well as precise fine-tuning of those interactions; can tie interactions to “drivers” based on some sort of action or property; can design simple shapes in-app; can animate with an After Effects-like timeline; has screen recording

Cons: Slight learning curve, does not generate a public URL

The Verdict: Principle has the best preview mode that I’ve seen. As you make changes, you can see the final prototype in a tiny window on the canvas. My one disclaimer is Principle may be overkill for a simple page-to-page prototype. Use if you want to customize complex interactions, motion, or animation largely within a single view, and prefer to share a video over a link.

Kite

The Claim: “Visually drag and drop layers to build complex interfaces on a WYSIWYG canvas. Add animations and tune them with the integrated timeline.”

Price: $99

Desktop, mobile, or web app? Desktop

Pros: Provides a slew of out-of-the-box static and animated components; combines drag-and-drop UI with written code; supports advanced transitions and gestures (but strangely not touch gestures, as far as I can tell); can fine-tune interactions and animations; can animate with an After Effects-like timeline; has screen recording

Cons: Medium learning curve, does not generate a public URL

The Verdict: I’m new to motion design but Kite made it easy for put together some pretty nice animations. Similar to Principle, Kite might be overkill for a simple page-to-page prototype. Use if you want to customize complex interactions, motion, or animation largely within a single view, and prefer to share a video over a link. Also, as my teammate Andrew Johnson pointed out, Kite is especially great for iOS/OSX prototyping since it can export designs to native Swift or Objective-C code.

Framer

The Claim: “Draw, animate, and share high-fidelity work. Framer is a complete workflow for creating interactive designs.”

Price: Plans start at $15 per month

Desktop, mobile, or web app? Desktop

Pros: Start with a blank slate so you can design from scratch; entirely flexible and custom since it’s code-based; can fine-tune interactions and animations; great preview mode; generates a public URL

Cons: Steep learning curve; complex prototypes may be hard to organize if you aren’t used to writing code; fewer out-of-the-box interactions

The Verdict: Framer is incredibly powerful and I’m a big fan, but it definitely took me some time to learn how it works and write effective code. Use if you are familiar with code and want to completely customize your prototype.

Got a favorite I haven’t covered? Let me know @ssktanaka.

Special thanks to my colleagues John Ratajczak, Andrew Johnson, Yesenia Perez-Cruz, and Ryan Gantz for their thoughtful edits. Finally, thanks to those who offered their help during our prototyping search — @_callil, @we_are_atomic, @GK3, @jornvandijk, and @McKay_1988.

This post originally appeared on product.voxmedia.com.

A Highly Subjective Guide to Design Prototyping Tools was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

A Highly Subjective Guide to Design Prototyping Tools

Cool stuff, every week

More Articles