Before you launch any website, you’ll need to prototype it. An interactive, functioning site will show more than you could ever tell. Here’s a few tips on how to do it right.

But first, let's clarify some terms we'll be using through

Wireframes, mockups, and prototypes: stages in a process

The map is not the territory

–Alfred Korzybsk

Before we get started on best practices for prototyping, we’ve got to define what a prototype is. A prototype isn’t a wireframe and it isn’t a mockup, though you may create one or both along the way.

Wireframes, mockups, and prototypes can be seen as stages in the design process, with each step coming just a step closer to representing the final, functional website. Thus, you can refer to each one by its level of “fidelity” to the final product.

Wireframes: low-fidelity

Wireframes communicate layout via abstract graphic elements like lines and boxes, similar to an electronic schematic. You can see where all the circuitry is, and how each element relates to others, but you don’t see the end product: a radio that’ll soon pump out your favorite jams.

‍Doesn’t look like much, but soon it’ll pump out your favorite song ever. (Diagram by Sweidman via Wikimedia Commons.)

Mockups: mid-fidelity

Mockups are similar to wireframes, but their bare bones have been beautifully skinned. Instead of grey boxes representing images, you see real graphics, fonts, and colors consistent with a client’s brand identity.

Mockups are great for showing how a website will capture the essence of a brand.

Wireframes can help in the beginning stages of development. They’ll make it easier to start laying out a prototype and they don’t have to be super fancy. Mockups may be good to get buy-in from a client about how a website will look (though moodboards and style tiles can be better tools for this).

Just don’t get bogged down in revising mockups when you could be making these changes on an actual prototype.

What’s a prototype?

‍A recipe can give you an idea of how an ice cream flavor will taste, but to know for certain, you’ll need to try some. Prototyping is a way to sample a website without committing to a full serving.

A prototype is an interactive representation of a website. It isn't necessary for every interaction and animation to be in place. But you need to have the key elements present to show how it’s going to function. Obsessing over every bell and whistle will only cause frustration when you have to revise or undo them in the review process. In this sense, a prototype is a high-fidelity version of the final website: most, but not necessarily all, of the components are in place.

In "Always choose prototypes over mockups," Neal O’Grady makes the point that because of their interactivity, prototypes are much better than mockups at demonstrating a website. That’s why we say skip the mockups, proceed directly to the prototype.

When you’re discussing a website — a dynamic, interactive thing — lengthy explanations can only go so far. To instead show your clients exactly how your work of design genius functions is the most direct way to wow and win them over. That’s why prototypes are the perfect way to pitch a design concept to clients.

Related reads: 13 best prototyping tools for designers

Know your audience(s)

Audience 1: Your clients, coworkers, and other stakeholders

The design and development process can involve many different people, from content writers to CEOs. What you show a marketing department can be different from what you put in front of a group of backend developers.

So, whatever stage you're at, make sure your prototype has those features that are relevant to your audience. As spectacular as those animated transitions may be, a copywriter’s probably more interested with how their content fits the design (both metaphorically and literally).

As with marketing, this isn’t so much a matter of not adding features and functionality you want, but of how you talk about various elements of the site. Focus on what your audience wants to see and needs to know, and you’ll go a long way toward selling your design. And improving the collaboration process.

Audience 2: The website’s ultimate audience

It’s one thing to get your prototype in front of people who’ve been in meetings about it for months and can repeat each of its goals in one breath.

It’s a whole other thing to get an outsider’s perspective from someone who will actually be using the website.

You need to:

Know who your end users are going to be Understand their expectations for this sort of site Run usability testing on a prototype with them

Remember, most people aren’t familiar with the languages of design and development. You’ll need to ask straightforward, jargon-free questions to get meaningful feedback.

There’s nothing like watching someone struggle to complete a task you think is “easy” to adjust your thinking about a design problem!

Find out what websites they visit on regular basis and what makes them return. What features and functionality make these websites an enjoyable experience? On the flipside, how do they feel that these could be easier to use?

Once you know their website habits and particularities, you can then ask them what their expectations are for your prototype. What do they hope to learn about? What tasks do they want to accomplish? And what features do they hope it will have?

You’ll also want to give your test users common tasks to complete . For example, if you’re building a restaurant website, you might ask people you’re testing with to:

Find out what tonight’s special is

Make a reservation

Find reviews

Putting a prototype is front of an unaffiliated user is invaluable in testing its functionality, information architecture, and overall usability. During this process, you’ll discover design problems only a fresh set of eyes can reveal. Issues with navigation, element functionality, and dead-ends a user may find themselves stuck in can all come to light during this stage.

These problems can be taken care of early on, saving time, money, and headaches before the code and design have gone too far.