What is prototyping in design?

While it’s tempting to dive head-first into an exciting new design project, the old saying rings true – fail to prepare, then prepare to fail. Planning and testing your ideas before implementing them is a crucial stage of the process. In fact, it’s the best way to ensure your design accomplishes what you want it to in the first place.

We’ve already discussed the importance of wireframes, but what is prototyping in design? The next stage of the process, prototyping builds upon the basic wireframe by adding functionality and more visual design elements. It’s where you can start to inject some creativity and experiment with ideas to find the best solution.

What is a prototype?

A prototype is an evolving solution; a place to test ideas and changes until it resembles the final product. Experimental by nature, prototypes should highlight what works and what doesn’t from both a design and user perspective. This enables a more robust design to be developed that addresses any issues without having to worry about affecting a live version.

Why prototyping is important

Crucially, prototypes should be used as part of UX testing. Get your users engaged early and test often for the best results. By examining how users interact with your prototype, you can get real-time feedback on what they like and don’t like about it. You’ll also be able to spot anything they struggle with and uncover issues that might not have even crossed your mind during the build. Prototyping should raise questions, but even more importantly, it should answer them.

Types of prototyping

Prototypes can take many forms, each with a unique purpose. The prototype you choose will depend on what stage of the design process you are at and how much detail you want it to contain. Before you start to build yours, ask yourself a few key questions: what is the purpose of the prototype? What do you need to build? Which medium should you use to do so? How long do you expect to work with the prototype? Once you have an idea of the answers, you can then confidently choose which prototype to build.

At Storm, we primarily create functional prototypes. Also known as working prototypes, these are usually built in HTML and allow us to experiment with designs until we reach a version that is as close to the final product as possible. Once the prototype has been tested and we’re satisfied it is the correct direction for the project, we then move on to the live build.

Using HTML prototypes comes with a range of advantages. First and foremost, it lays the groundwork for the final version right out the gate and saves you time further along the process. It also enables testing across various platforms and software, ensuring the solution is responsive to each. This type of prototype also provides the most realistic representation of the final product, so clients know exactly what to expect.

How to get started

Don’t overthink it. Prototypes should enable tests to be performed quickly, so the best advice is just to start building. If you are uncertain about an idea, a prototype will create something more concrete that can be evaluated and improved – or scrapped entirely!

Likewise, don’t spend too much time on your first prototype. It will undoubtedly change, as that’s the whole point. Prototypes are for developing ideas and evolution is crucial, so while it can be easy to become attached to one design, don’t be afraid to ditch old ideas and venture off in new directions.

Throughout the process, it’s important to remember what the end goal is. All prototypes exist for a reason; they’re trying to solve a problem. Remind yourself of this problem regularly and take a step back to assess whether your design is actually solving it. When in doubt, ask yourself whether it is fulfilling the user’s needs – if not, then it’s back to the drawing board.

Get in touch

Our experienced design team are here to help. Whether you’re looking to revamp your existing site or build a new one from the ground up, contact us to get the process started.