Prototype

What does prototype mean in design?

When you talk about a UI and UX design prototype, that usually means a collection of clickable visuals you can use for usability testing.

Depending on the design tools you use and the project stage you're in, a prototype can mean several things.

Paper prototype

This is a very basic design prototype that you can create in minutes. You create buttons, text fields, and different screens on sheets of paper. When your user clicks on a button, you add the next design screen on top to let your user navigate. Paper prototypes are used in the very early stages of a project. It is recommended to only use wireframes for your paper prototype.

UI prototype

The next step for you would be to create a digital UI design prototype. You can use Figma or a similar design tool for that. Compared to the paper prototype, you go for a much higher fidelity here. In most cases, you use color, typography, and as much actual content as you can.

Interactive prototype

The most extensive prototype you can create is an interactive design prototype. You can do this in two ways. The first is to use a prototyping tool like Axure. Within Axure, you can let your users enter data and save it to use later during your test. This is something that's not possible in Figma. The second way would be to create your design in HTML, CSS, and Javascript.

How do you prototype an idea?

How you prototype your ideas depends on the project phase you're currently in. Before you decide, make sure you're aware of that. Let's look at how you can best prototype your ideas for different project stages.

In the early stages of a project, you can best use a paper prototype or UI prototype to test your idea. If you want to continue after some promising initial results, the interactive prototype methods mentioned above would be an excellent next step later on in your project.

To validate an idea, you need to get feedback from your target audience. For example, if you use a prototype, give your users a scenario to work on.

Let them narrate their thought process to help you better understand what they're going through while using your prototype. Then, at the end of your test, you can ask for feedback to gauge the success of your prototype.

Is prototyping UI or UX?

Prototyping is positioned at the crossroads between UI and UX. UX designers mainly use it during the early stages of a project. However, to fully utilize the power of prototyping, UX designers need to understand the fundamentals of UI as well.

Mockup vs wireframe vs prototype

Mockups, wireframes, and prototypes are often used interchangeably. And for good reasons, because they're closely related. There are some differences, however. So let's take a look at the differences and similarities.

First, a mockup is a visual of your product that you mostly use for sales and portfolio purposes. You can use your design in combination with a device.

For example, if you've designed a mobile app, your mockup might show a phone with the app design displayed on the screen. You don't have to follow technical restrictions here since it is mainly used to show off your skills.

A mockup partially consists of a UI design. Because of that, you can repurpose this UI design as a part of your prototype. Furthermore, you could even create a mockup of your prototype to show off your prototyping skills.

Wireframes are the outside player here. They have less overlap with mockups and prototypes. The only overlap here is that you could prototype a wireframe design using the paper prototyping or UI prototyping method.

Useful resources

What Is a Prototype: A Guide to Functional UX - UX Pin