What is a design prototype? The complete guide
Find out what a prototype is and how it can help you test out your designs ideas
At one point or another, almost every product you know was once a prototype. Regardless of your industry, when creating a product from scratch you will reach a point where you need to validate your idea before stakeholders commit major resources to it. And that’s why prototypes are a central part of the product development life cycle.
In the design field, you might be creating prototypes for mobile apps or websites. In this article, we’ll be explaining what exactly a prototype is, why they’re so useful and the different types.
What is a prototype?
At its simplest level, a prototype is an early model of an object that you build to test a design. Prototypes are drafts of your final version, focusing on functionality and giving your stakeholders a clear picture of your final product.
The right prototype for you
One important characteristic of a prototype is that you don’t have to create a 1-to-1 model of the final product. Commonly, you only need a specific portion of the final product that you want to test. You don’t even have to create just one prototype for your product — you have a few different options:
- Build from scratch: Start with one base prototype and build on it until you’re done. You could think of this as a test of your MVPs (minimum viable products) which focus on creating a shippable product with only the critical functionality of the product.
- Test and move on: Create different prototypes for specific parts of your product, knowing that you may discard or iterate on them after you’ve finished testing. This helps you take an Agile approach to your design process.
- Early iterations: Prototypes don’t have to wait until the end of the design cycle. You can validate and test any idea as early as you like with prototypes. By constantly iterating from the discovery process until after shipping, you can keep a consistent cycle of improvement going.
Prototypes vs other design tools
Prototype is a broad term. It can mean a model of the entire project, a model focused on functionality rather than design, or a model focused on design and no functionality. But the most common use case is a design with a focus on functionality — which helps you separate them from wireframes and mockups. And with this added focus on functionality, prototypes are the perfect tool to use in testing.
Sketch can help you create interactive prototypes to test out your designs.
What are the benefits of prototyping?
As we’ve explained, prototypes are an essential part of the design process, no matter which approach you’re taking. Since prototypes are the best design models to take into testing, let’s look at what they can help with:
- Idea validation: You can use prototype designs to share your idea as early in the design process as you like. It’ll help you and your team work out exactly what you’re trying to achieve.
- Collaborative designs: The design process is very collaborative. As prototypes test out designs, you can and should involve as many stakeholders as possible. UX writers can help test out and validate navigation, developers can test out the functionality, and product managers can help you test out user flows.
- Tempting investors and updating stakeholders: Often you need a prototype to prove to investors and stakeholders that this idea is worth taking to the next step. Devoting resources to a project is a lot easier when you have a prototype to show what you’re planning to deliver and how it might look.
- Usability testing: Prototypes are great for putting a working version of your product in users’ hands and checking your design is actually useable before it ships.
Now that we know how useful prototypes are, let’s look at the different kinds of prototypes we can create.
Prototype examples
Similar to mockups and wireframes, prototypes can have different fidelities depending on your needs. So let’s go through the differences between low and high-fidelity prototypes and see an example of each.
Low fidelity prototypes
Low-fidelity prototypes are the go-to option for you when you’re at the very initial stages of a design. They’re usually pencil-and-paper sketches that you use to convey a design as quickly and roughly as possible.
If you’re just getting started with prototyping, sketching out your ideas will keep you organized and on-task.
Depending on your needs you’ll sometimes need to go with a low-fidelity prototype. So let’s look at the pros and cons of using one.
| Pros | Cons |
|---|---|
| Fast — Quickly sketch ideas to convey them to stakeholders. | Rough — A rough sketch might look different in the final design, which could cause friction later. |
| Cost-effective — You don’t need any specialized tools or products to create a prototype. | Inaccurate — Without exact measurements, it’s hard to tell whether something would work in practice. |
| Flexible — Pencil-and-paper lets you make quick adjustments during meetings and brainstorming sessions. | Simplistic — There are only so many details that you can add to a paper design, which isn’t the case for digital prototypes. |
| Accessible — Anyone can sketch out an idea wherever they are to help shape the final product. | Scalability — Unlike with a digital prototype you can’t easily iterate on a paper design. |
Now that we have some ideas of why you might consider a low-fidelity prototype, let’s take a look at what high-fidelity prototypes bring to the table.
High fidelity prototypes
When you think about a prototype for a digital product, a high-fidelity prototype is likely what you’re imagining. They’re closer to the definition of what a prototype is — a test version of the final product. You can create high-fidelity prototypes using digital design tools like Sketch.
High-fidelity prototype are accurate designs and are much closer to the final product.
So let’s take a look at the pros and cons of using a high-fidelity prototype for your designs.
| Pros | Cons |
|---|---|
| Accurate — You can create something that is incredibly close to the final product. | Time-consuming — Detailed designs take longer to create. |
| Detailed — Color, components, copy and finished assets can make a huge difference in usability testing. | Inaccessible — You’ll need design skills and specific tools to create a digital prototype, which creates a higher barrier for entry. |
| Flexible — It’s easy to change designs, color, layouts and copy on the fly. Plus, you can get more granular feedback. | Cost — You’ll need skilled designers to create and evolve a prototype over time. |
| Scalability — You can start with one screen, then add more as you get further into the design and testing process. |
It’s important to note that low-fidelity and high-fidelity prototypes aren’t mutually exclusive options. Depending on what you need to test, you may need both during the design process. The key thing to remember is that you should constantly test your designs, in any way that works for you. That way, you won’t run into major surprises down the line.
