** Everyone asks, “Which prototyping tool is the best? !” That’s the wrong question. The right question to ask is, “Which prototyping tool is best for my current goal?”

▎ There are four questions at the beginning of prototype design:

Prototyping is an intimate part of the design thought process, and it gives us the opportunity to prove our crazy ideas. When the prototype is complete, we test and validate our vision. We also adjust our design as new information becomes available.

But how do we know which tools to use? How far should a prototype go? No matter where you go in prototyping, here are four things you should be aware of:

  1. Are you designing for mobile, tablet, or desktop?
  2. What level of fidelity does your prototype need?
  3. How much time do you need to complete the design?
  4. How much experience do you need to show?

▎ Six scenarios and appropriate prototyping tools for each

I’ll give you some examples to illustrate my point and show you which prototyping tool is best for each scenario. We will use the questions outlined above to create context for each scenario.

A,Fast online prototyping interface design

In the early stages of a project, which may involve collaboration between multiple colleagues, including design, product, operations, and team leadership, online tools are often used to quickly provide the team with a preview of the prototype.

The prototype design tool of this stage is recommended for copycat: strong ability of high fidelity prototype design and teamwork. It not only ensures fast output and fine design, but also meets the needs of product managers and designers. The online tool’s collaborative ability is not to be overlooked: real-time editing by multiple people, convenient team review, engineers view page data, copy code and other powerful functions are very suitable for team use.

Supported platform: Windows&Mac

Features:

  • Preset components with interactive effects, a large number of ICONS, convenient editing methods, fast design.
  • Support page interaction, state interaction, component interaction, and set a variety of trigger modes and interactive actions, easy to produce fine interactive effects.
  • Pen tool, pencil tool, Boolean operation, responsive layout and other features, design and creation of free.
  • Support multiple people to edit the same project online at the same time and complete the prototype design together.
  • Design draft support direct drawing flow chart, clear presentation of project logic.
  • Powerful collaboration features: team review, engineers view page data, copy code, write online documents, task management… .

** Scenarios: ** Mid-fidelity prototyping, Rapid prototyping, team collaboration, WEB/ mobile/tablet prototyping, Wireframes, visual artwork

Low fidelity, fast mobile applications

  1. Build for mobile applications

  2. low-fidelity

  3. Quickly build

  4. You need to link screens together and display their flow

There are many useful tools available for this scenario. The best tool for this scenario is one that can show the entire application experience in low-fidelity in a short amount of time. These tools are:

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

Low-fidelity desktop websites or Web mobile applications

  1. Built for desktop browsers (websites)
  2. Low fidelity is allowed
  3. Quickly build
  4. You need to link screens together and display their flow

Tools for the desktop experience will be limited, as many prototyping tools tend to be more mobile focused. These tools are:

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

4. Response experience

  1. Build responsive Websites (mobile, tablet, desktop)
  2. High fidelity is required
  3. I’m not in a hurry, but I want to be efficient
  4. Need to link screens together, show their flow, and show how responsive websites crash

A quick disclaimer: Whenever a client asks me to demonstrate responsiveness, I tend to try to re-dominate the conversation.

Why do we have to design responses? What is the real goal? Can we display each module separately? Without coding on the front and back ends, it is very difficult to design efficient response designs.

Here are the tools you’ll need to get there:

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

5. Specific functions

  1. Build specific animations on the mobile application
  2. Requires extremely high fidelity
  3. Need to be efficient
  4. I need to show movement, animation elements and timing — I don’t care about jumping between pages

Prototyping an animation can be a lot of fun, and I’ve found that even if the user doesn’t notice the animation happening, they can make a big difference in the nuances. When you pay attention to the details, the overall experience is much more enjoyable and fluid.

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

Vi. High-fidelity Experience (mobile or desktop)

  1. Build for mobile or desktop
  2. Must be as hi-fi as possible
  3. I have enough time for the task
  4. Need to display the flow of the screen, while also displaying animations of screen elements and functions in high fidelity

Sometimes your prototype not only needs extremely high fidelity, but also needs to show the entire flow of your application. It was such a time-consuming task that it sometimes became so overwhelming that I wondered, why can’t we build a real one?

If you need to build a high-fidelity prototype that contains fun and unique animations that allow users to navigate between pages to create a true experience, then you can use these tools:

Mobile devices:

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

Desktop:

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

▎ Don’t use just one prototyping tool

There are so many prototyping tools out there, but this article is not meant to be an exhaustive list of them all. Instead, we focus on just a few of the most popular tools.

The point is, you should focus on your design and not the tool. What do you need to communicate, show, test? What modules do you need to build? What level of fidelity is required?

When you focus on the goals of your prototype, you will know which tools to use.

Finally, everyone should have extensive experience with prototyping tools. When you need it, you can use it right away.