How can we help?

Design? Check. Strategy? Check. Bulletproof code? Check! People who can manage it in an agile and efficient manner? Check. Someone to help you create your next big product? Of course.

Denver

- 1201 18th St. Suite 250, Denver, CO 80202

Grand Rapids

- 125 Ottawa Ave NW Suite 270, Grand Rapids, MI 49503

Blog

BLOG:16 Prototyping Tools + How Each Can Be Used

16 Prototyping Tools + How Each Can Be Used

Everyone is asking: “Which prototyping tool is the best?” That, however, is not exactly the right 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 process where we get the chance to prove 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?

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.

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 tools for these 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.

Tools are a little more scarce for the desktop experience, as many prototyping tools tend to focus on mobile. Great tools for these 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.

prototyping-gif-3_compressed-1 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. Some great tools for these 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.

prototyping-gif-4_compressed

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.

prototyping-gif-5_compressed

Sometimes your prototype needs to be really high fidelity while also showing an entire flow in 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 — then 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. By no means is this article meant to be an exhaustive list of prototyping tools. Instead, it is intended to focus on a few of the most popular tools.

The bottom line - 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
  • 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!