For a UI/UX designer, the ability to prototype your designs is now a much sought after skill, and prototyping’s importance in the product design process shows no sign of letting up anytime soon.

The ability to create prototypes in the design process enables you, as a designer, to explore interactions that would be impossible to achieve with just static wireframes. You have the ability to go from small micro-interactions (such as a simple button or slide-out menu) to full-page prototypes that are nearly identical in both design and function as the final build of the app or website that you’re currently working on.

Now, there are designers out there who feel that prototyping is a road-block in the product design process and should always be avoided. “Sign off the design mocks/comps and move straight to code,” they exclaim. That’s maybe not the smartest route to take, and it has the potential to set yourself up for a mighty and costly fall in the latter stages of a project.

Today there is a variety of different tools and services to assist with prototyping, many of which I’ve had the pleasure of using, and I’ll be touching on a few of those later in the article.

Still unsure if prototyping is something that you want to bring into your design process? Let me try and put your mind at ease with the following points…

1. Prototypes allow you to present across different devices with ease

Now, more than ever, we’re expected to test our designs across multiple devices with the many different methods of interaction they have to offer, such as: touch, mouse, keyboard and even remote control.

Many of the prototyping tools available can assist in designing for these different devices, screen sizes and their various levels of interaction, and help you achieve this much more efficiently than static wireframes ever could.

2. Prototyping enables you to bring users into the design process

Presenting static wireframes, or pulling out your favourite Sharpie and placing hand-drawn sketches in front of users can only give you so much insight, and doesn’t truly enable you to gauge the best responses in a round of user testing, for example.

You can ask a user how they’d approach a specific task, but following the aforementioned method, interactivity is very limited and there is only so much information you could gauge from a user in that kind of scenario.

To gather any kind of insightful feedback from the user, and make user testing truly beneficial to you and your team, you need to be presenting them with an interactive prototype that has enough visual fidelity and interaction to elicit more detailed and valuable responses when testing out your product.

3. Prototyping allows you to test with real content and data

If one of your aims is to better involve users in the design of a product or service, as well as being able to communicate as clearly as possible to clients and stakeholders, the ability to present real content or data within your prototypes can enable you to do that.

Many of the tools out there make it easy to incorporate real content into your prototypes quickly with minimal effort.

It could be a database that you can query or set as a data source inside of your prototype, or it could simply be content that you’ve copied and pasted in. Either way, you can receive much better feedback when real data is being presented to the user inside of the prototypes that you’re showcasing.

Creating a card animation in Principle

4. Prototypes help avoid issues later in the process

You can bring prototyping into the design process at different stages, and this all depends on the project at hand. I’ve done a round of wireframing and then created low-fidelity prototypes at an early stage to gain feedback. These have been nothing more than to show team members or the client the flow of the application, how you simply move from one screen to the other. Just to open up a conversation at that very early stage can help avoid issues later on in the process.

The hi-fidelity prototypes (which I’m mostly referring to in this article) can come at a later stage after the artwork that you’ve created in Sketch or Photoshop has been signed off by the client.

Finding issues via the method of prototyping before you move onto the build stage of a project can save you a lot of headaches and potential lost time and earnings. It allows your developer to have a greater understanding of what’s possible to implement before you sign anything off and also avoid costly mistakes later in the development process.

5. One (prototyping) tool does not always fit all

There is not a right, nor a wrong tool when it comes to prototyping, and it all depends on the project at hand, and to what fidelity you want to take the prototyping to.

I’ve used tools such as Flinto and Marvel for certain projects, but when I get a request for a more detailed prototype I tend to veer more towards tools such as Principle or Framer as they can offer a lot more functionality.

Prototyping with code inside of Framer

Certain prototyping tools such as InVision, Marvel and Mockplus offer low-level prototyping features such as hotspots and simple page transitions. Others such as Framer, Origami Studio and Principle allow greater depth and bring your prototypes much closer to the look and feel of a native app.

6. Prototyping allows you to define, refine and evolve ideas

Prototyping helps you evolve your ideas throughout multiple iterations of a prototype to help you define and refine your design’s core functions and the goals that it needs to achieve.

They enable you to move much rapidly, and freely, with the intention of presenting something to your client that closely resembles the intended final product.

Simple page transition created inside of Flinto

7. Prototyping is not the same as wireframing!

There is still some confusion over prototypes and wireframes. Are they one and the same? Well, no.

Prototyping is intended to show (as much as possible) your team, client, user or stakeholder, how the final product will look, feel, and to give them the ability to physically interact with the product the same as they would with the final build.

Wireframing, on the other hand, is a practice enabling you to make decisions on the structure, features, functionality, content, and user flow of a product without focusing too much (as little as possible to be honest) on visual design, and interactions.

8. Prototyping can save you time and money

Placing prototypes into the hands of users, clients or stakeholders as early as possible means you can test, discuss, and identify issues in an efficient and cost-effective way.

It is possible to deliver your projects on time and on, or under, budget without calling upon prototyping at any point in your process, but while an individual project might come in on time and on budget with a different method, studies have shown that it’s very unlikely that a team will succeed in making this happen in a repeatable manner.

9. Prototyping can help with collaboration and communication

Prototyping can be highly beneficial for all parties involved, help invoke insightful conversation, and build a stronger understanding between users, clients, engineers, and anyone else that may have a say in the final product.

There’s a famous saying that describes prototyping perfectly: “If a picture is worth a 1,000 words, a prototype is worth 1,000 meetings.”

10. Prototypes enable you to engage well with stakeholders. Always a good thing, right?

Presenting prototypes to your stakeholders can greatly improve their understanding of your design intentions, and make them feel more involved in the whole process, much more than presenting them with deliverables such as hand-drawn sketches or wireframes.

They can interact with the prototype themselves and quickly and easily understand what the product can do, making it a great way to gain approval quicker than using various other methods.

Prototyping, I feel, is now an essential part of the product design process and, when done correctly, the prototypes that you produce have the potential to save you, or your company, a lot of time, frustration and money, and help you deliver a much stronger product, aligned correctly with the needs and requirements of the client and user.

Oh, before I go. If you’re interested in some of the prototyping tools that I’ve mentioned in the article, don’t miss my next article with a brief rundown and my thoughts on each one.