Why Should Every Designer Prototype And Which Prototyping Tools To Use

A popular phrase by IDEO company says that “If a picture is worth a thousand words, a prototype is worth 1000 meetings.”

Designers are bound to design websites, web applications and all kinds of different products based on clients’ requests. Since those requests are not often clear and solutions are not always obvious, this is then followed by a series of meetings, phone calls, and emails to agree upon the look and feel of the design. This long process can be avoided by using prototyping tools.

With prototyping, clients get a visual overview of your design, interactions, and ideas. This way you can show your concepts in action and help the client to see how their ideas will take shape. The ability to work fast on different versions of your ideas and sharing them with your team members and clients is a real game-changer.

Prototyping allows designers to produce “Proof of Concept” which is often a key factor for a good relationship with clients.

Numerous prototyping tools can help you design and iterate quicker. Some of them are Sketch, Zeplin, FIGMA, Adobe XD, InVision, Origami, Framer X and others.

Sketch

The Sketch is a vector-based design tool that helps you work faster and more intuitively. It is often described as a combination of Photoshop and Illustrator, but lightweight and has an unlimited number of artboards.

One of the most important Sketch features is a nested symbol feature which makes the designing process much faster and makes sure your design stays consistent.

Compatibility: only for Mac users

Zeplin

Zeplin in combination with Sketch becomes a fantastic tool when using it as a plugin since it is one of the most useful ones. Developers tend to use this tool to check fonts, colors, dimensions, and other design elements. It also allows direct download of elements from artboards.

“Just in September of 2019, 6,287,007 designs from Sketch, Adobe XD, Figma and Photoshop CC were exported to Zeplin by thousands of product teams.”

Compatibility: both Mac and Windows users

Figma

Figma is a relatively new but innovative tool that allows designers to collaborate in real-time.

This tool has multiple great features such as a modern pen tool, instant arc designs, private plugins, flexible styles, accessible libraries and much more.

Compatibility: both Mac and Windows users

Adobe XD

Adobe has been known for its Illustrator, Photoshop, InDesign and After Effects. But in January of 2019 Adobe launched a new UX tool called Adobe Experience Design CC (previously known as Project Comet).

Adobe XD is a collaborative and easy to use platform that helps you to create designs for websites, mobile apps, games, and more. One of its most important features is the ability to work with your team members in real-time. With Adobe you can also preview and share your design with whoever you want.

Compatibility: both Mac and Windows users

InVision

InVision is another popular prototyping tool that also seamlessly integrates with Sketch. The most amazing advantage of this tool is its project collaboration features, which allow users to give feedback and see the product changes in real-time.  This tool also offers a service for building prototypes for mobile devices.

“With intuitive tools for ideation, design, prototyping, and design management, the InVision platform gives everything you need for digital product desk, all in one place.”

Compatibility: both Mac and Windows users

Origami

Another design tool made only for Mac users is Origami, a tool used by designers at Facebook. With this tool, you can create prototypes with layers, bring them from Sketch and play with masks, particle systems, and live cameras. You can literally copy and paste your layers and then adjust, animate and add behavior without going back to Sketch.

Compatibility: only for Mac users

The previously mentioned tools are simple, so it is difficult to build complex interfaces with plenty of interactions and functions in them.

A powerful tool for creating highly complex products and services is Axure RP.

When you are dealing with numerous user scenarios, data manipulation, error handling, and validation, this is where Axure shines. In tools such as Sketch and InVision, you click trough pictures and often need to create a lot of useless screens if you want to show multiple scenarios to your team members or clients.

In situations when you need better UI-design capabilities of Sketch, Axure has a Sketch plugin for those occasions.

Conclusion

It is important to keep in mind that the best tools are not often the most popular ones and vice versa.

We have touched upon just a few, most popular prototyping tools for UI/UX designers. There are lots of other tools out there, but it is safe to say that most of them have similar interfaces and features as previously mentioned ones.

At the end of the day, it all comes down to finding the one that works best for you and your team members, depending on the project you are working on.

Just a few years ago mockups were made in paper and shown in that format to clients…so this is a big leap in technology.

Down the line, we can probably expect to see more innovations, not just in the prototyping area, but in the design industry altogether.