16 Prototyping Tools & How Each Can Be Used

Everyone is asking: “Which prototyping tool is the best?” That’s the wrong question.

The correct question is: “Which prototyping tool is the best for my current objective?”

Spoiler alert: everyone should be skilled in multiple prototyping tools. One is not enough. More on that later.

Ask These 4 Questions When Starting a Prototype

Prototyping is an intimate part of the Design Thinking process. It’s the necessary part of the design process where we get the chance to prove out our crazy ideas. And when the prototype is finished, we test it. We validate and challenge our assumptions. We adjust our designs when new information arises.

But how do we know which tool to use? How far should we go with the prototype? Here are 4 questions you should be asking whenever you approach a prototype:

1. Are you building for mobile, tablet, or desktop?
2. How high fidelity does your prototype need to be?
3. How fast do you need to go?
4. How much of the experience do you need to show?

The correct prototyping tool depends on the experience you need to create (Credit: Vignette Interactive)

5 Scenarios and The Right Prototyping Tools for Each

To illustrate my point, I’m going to give you a few use cases — and tell you which prototyping tool is best for each. We’ll use the questions I outlined above to create the context for each scenario.

Scenario #1 — Low Fidelity, Quick Mobile App

1. Building for mobile
2. Low Fidelity
3. Need to go fast!
4. Need to link screens together and show how they flow

Showing the flow of an app (Credit: New Signature)

There are a ton of great tools available for this scenario. The best tools to use for this scenario are tools that can showcase the flow of a whole app experience in a low fidelity way in a short amount of time. Great for tools our four objectives include:

• Invision
• Marvel
• Craft (by Invision, Plugin for Sketch)
• Adobe XD
• Flinto
• Principle
• Origami
• UX Pin
• Pixate

Scenario #2 —Low Fidelity Desktop Website or Web App

1. Building for the desktop browser (website)
2. Fidelity can be low
3. Need to go fast!
4. Need to link screens together and show how they flow

Showing the flow of a website (Credit: Jeremy Wells)

Tools are more a little more scarce for the desktop experience, as many prototyping tools tend to focus on mobile. Great tools for our four objectives include:

• Invision
• Marvel
• Flinto
• Principle
• Adobe XD
• Keynote
• UX Pin

Scenario #3 — A Responsive Experience

1. Building a responsive website (mobile, tablet, desktop breakpoints)
2. Fidelity of the responsiveness needs to be fairly high
3. I don’t have a crazy deadline, but would like to be efficient
4. Need to link screens together and show how they flow, and show how the responsive experience breaks down

Showing the responsiveness of a website (Credit: Web Ascender)

Quick — a brief disclaimer: whenever a client asks me to demo “responsiveness” — I tend to try to reframe the conversation. Why must we prototype responsiveness? What’s the real goal? Can we show each modality separately? Prototyping responsiveness effectively can be very difficult without just going ahead and coding the front-end.

That being said, sometimes it’s necessary. So great tools for our four objectives include:

• Raw HTML/CSS/JS (true responsiveness)
• Axure (static breakpoints)
• UXPin (static breakpoints)

Scenario #4 — A Specific Feature

1. Building a specific animation for a mobile app
2. Need a really high fidelity
3. I don’t have a crazy deadline, but would like to be efficient.
4. Need to show movement, element animation, and timing well — I’m not concerned about flow between pages

Showing a specific feature animation using Principle (Credit: Anna Gerasymenko)

Prototyping a single animation can be a lot of fun, and I find that users find a ton of value in these little nuances, even when they don’t notice the animation happening. The overall experience will feel more pleasant and fluid when you take the time to “smooth the corners.”

• Principle (fastest way to fake it)
• Adobe After Effects
• Raw HTML/CSS/JS
• Flinto
• Origami
• Phonegap
• Xcode
• Framer

Scenario #5— High Fidelity Experience (Mobile or Desktop)

1. Building for mobile and/or desktop
2. Must be as High Fidelity as possible
3. I have time to spend on this task
4. Need to show the flow of screens together while also showing high fidelity animations of screen elements and features

Showing high fidelity mobile flows that could just be real (Credit: Think Mobiles)

Sometimes your prototype needs to be really high fidelity while also showing an entire flow within the app. This is a pretty time intensive task, sometimes so time intensive that I may ask, “Why aren’t we just building this for real?”

If you need to build a high fidelity prototype that has interesting and unique animations and allows users to navigate between pages, creating a really authentic experience — than here are some great tools you can use.

Mobile

• Proto.io
• Principle
• Flinto
• Origami
• PhoneGap
• Framer
• Xcode

Desktop

• Raw HTML/CSS/JS
• Principle
• Flinto
• Framer
• Xcode

Don’t Commit to Just One Prototyping Tool

There are so many prototyping tools on the market. And this article by no means is meant to be an exhaustive list of prototyping tools. Instead, it is intended to just focus on a few of the most popular tools.

The point is, instead of focusing on the tool, focus on the goals you have for the prototype. What do you need to communicate? What do you need to show? What do you need to test? What modalities must you build for? What fidelity is needed? How fast?

When you focus on the goals motivating the prototype in the first place, the tool to use will become apparent.

Ultimately, everyone should have experience with a wide breadth of prototyping tools. You need to be ready to use the right one when the need arises.

In the end, prototyping is just about communicating something.

Whenever you approach prototyping, I’d encourage you to focus less on the act of prototyping and focus more on the reason why you’re doing it. What are you trying to achieve?

Often times I find myself prototyping a really high fidelity experience just for the sake of prototyping, instead of focusing on prototyping just the things that are needed to communicate and test the overall concept.

Beware of prototyping just for the sake of prototyping! Prototypes exist for the sake of proving a concept, communicating an idea, or testing an approach. Everything else is wasted time.

Sources:

Designer’s Toolkit: Prototyping Tools http://www.cooper.com/prototyping-tools

Thanks to Marty Laurita, Manuel Dahm, Raphaël Guilleminot, Bert Vanhooff, Martinho Oo, Merel Backers, and Hamsa Ganesh for their post-publication contributions to this article!

I am a UX guy who works as the Director of Experience Innovation at Universal Mind — A Digital Experience Agency. Follow me on Twitter at @joesalowitz.

Find out more about design and prototyping tools.