The value of website prototypes

A good UI/UX process should include prototyping. By definition, a prototype is an early sample, model, or release of a product built to test a concept or process. It's a valuable step to make sure the resulting website or web app is a success.

In this post, we’ll discuss all things prototyping, including:

• What are UI/UX prototypes?
• What benefits do they provide?
• Which tool do we use to create prototypes?

First up, what are prototypes?

In the context of designing for web, prototypes are a simulated version of what will eventually be produced. The goal is to test our ideas and expose any usability issues as early as possible. They add a layer of interactivity to traditional static compositions. Instead of presenting a series of unconnected image files, prototypes allow you to click through the designs in a simulated environment that more closely resembles how the website or application will appear once developed.

What benefits do they provide?

Gather clear, actionable feedback

By far one of the most helpful reasons for producing prototypes is how much easier they are to present. The feedback is often much more valuable because of that.

You can present stakeholders with something tangible that neatly stitches everything together and requires less imagination on the part of the person viewing the designs. You don’t need to picture how something will work, how it will flow or which actions produce which results. It the words of the late, great Steve Jobs, ‘it just works’.

Demonstrating interactions with prototypes helps to gather actionable feedback much more quickly. Prototypes bring ideas to life, spark discussion and help to chart the course for future design iterations.

Test user journeys and evaluate design decisions

User journeys illustrate the steps required to get from A to B in a website or application. Prototypes are a great way to test how well your user journeys hold up. Having connected the designs together in the form of a prototype, you can run through all of the user journeys to see how smooth it is to complete. Are there any roadblocks? Is it clear to a user what action they should take?

Without being able to click through designs, it’s much more difficult to expose potential user experience pitfalls. Identifying issues early gives a project a better chance of staying on time and within budget. As soon as you begin interacting with a prototype, you’ll soon learn where the areas for improvement exist.

Provide clarity during the handoff to developers

Prototypes aren’t just useful for gathering stakeholder feedback. They can be an effective way of communicating ideas internally too. Prototypes help to illustrate how something is intended to work and can present animations and interactions in a way that can’t be achieved with static compositions. This requires less guessing on the part of the developer. Not only that, but with a prototype, a developer is better placed to be able to spot any functionality that might present technical challenges down the road.

Create excitement

Beyond the practical application of prototypes, above all else they are great at creating excitement. And that’s as good a reason as any to produce a prototype!

A prototype is the first tangible deliverable in the web design process - it presents stakeholders with the first opportunity to see how their website or application might eventually look. And that reveal should be an exciting one.

Which tool do we use to create prototypes?

There are numerous ways to approach prototyping. We know, we’ve tried them!

Earlier this year we switched to Figma as our primary design tool and Figma’s robust prototyping was one of the reasons why. We’ve previously used Marvel and Sketch’s built-in prototyping functionality, but neither have proven to as effective or efficient as Figma.

Prototypes in Figma are easy to create, maintain and share.

Summary

Prototyping is quickly becoming an irreplaceable part of the design process - not least because they are easier and more affordable to produce than ever before.

We love prototypes. They provide us with actionable feedback, allow us and client to test out design decisions, make for a smoother designer-developer handover, and help to bring designs to life. And with Figma, prototypes are integrated right into our design workflow.

All of the above makes the decision on whether to create prototypes an easy one.

Yes! 👍