What’s the difference between prototyping and wireframing?

We’re all guilty of throwing out words, phrases and descriptions of things out into the ether without checking that the people on the receiving end understand what it is we’re talking about. This is something that happens a lot in UX and in different industries too.

One such example is prototyping and wireframing - when we’re speaking to potential clients, we often come across people who aren’t quite sure what the difference is. They are easily confused - they look similar. People often tell me they thought they were interchangeable or that one is better than the other. Actually, they are different, but one isn’t always better than the other - in fact, they can be equally useful.

Let’s start with the basics

What is a wireframe?

A wireframe is a simple diagram used in digital product design. Its core function is to show the information required for that particular page, as well as its structure and prominence .  These days, some UX designers prefer to create their wireframes in programmes like Sketch or Balsamiq but at a basic level, a pencil and paper is just as effective.

Some examples of wireframes we created as part of our ecommerce redesign project with education supplies specialist The Consortium.

What is a prototype?

Prototypes are often confused with wireframes because they can look similar. What makes them prototypes one key thing: interactivity.  They can be low fidelity (like wireframes) or high fidelity (fully worked up designs). High fidelity prototypes resemble something closer to the finished design and are clickable. These are often built and used for usability testing for example (although you can do this with low fidelity too).

How do I know which one to use?  

Wireframes are useful for defining structure, prominence and layout. They are generally quicker to produce too so if you’re working at speed and need to get several ideas out at once, this is a good option.

Wireframes are also more likely to be hand drawn than prototypes - we often sit with our clients at the start of a design project and work collaboratively to sketch out some ideas - these then evolve into wireframes.

The purpose of a prototype is to show rather than tell people how a design might work or look. It’s a detailed representation of a website or piece of software with elements of interactivity such as clickable links and joined pages.

That's useful for 3 audiences:

1) Research participants can complete tasks on prototype with a user researcher observing and feeding this back to the design team.

2) Clients can understand how the design is supposed to work and provide feedback.

3) Developers can understand what it is they will be building. It’s much easier to click through a prototype than read a massive spec document!

Still a bit confused about the difference between prototyping and wireframing? Or, perhaps you're a visual learner? Check this out. It’s Adam talking about wireframes in more detail as part on our UX Easy mini series.