Why we love wireframes and prototypes

If you were going to build a house, you probably wouldn’t start by buying bricks. If you were going to make a dress, you likely wouldn’t start with the scissors. Builders need plans and dress-makers need templates.

In the same way, when building websites we don’t start by writing code – we use wireframes.

And we love wireframes- this article tells you why.

What is a wireframe and what are they used for?

Let’s start by explaining what we mean by a wireframe. A wireframe is first and foremost a planning tool. It’s (most often) a black and white representation of what a website might look like.

We create wireframes very early on – shortly after we’ve had all our initial discussions about the project’s scope. We use them to help us decide what pages a website might need, and how these pages could link together. Adding real content to our wireframes is important too so that we can check we’re using the right phrases and keywords.

At this stage we’re not interested in font or colour or imagery – we want to get the building blocks down first. If we continue our architecture analogy, our wireframe is a combination of foundation and blueprint.

Because our wireframes run in a web browser (like a real website) we can ask people to test them. We call this usability testing – and it’s a fascinating process. There’s more on this further down the page.

You can look on a wireframe as an interactive prototype – the first draft of your website.

Why create a wireframe?

There are several reasons for creating a wireframe.

You get to see what we are going to build

Seeing something on the screen is always going to be better than trying to imagine it from a written description. Through our wireframes, you get to see how the end product will function. That can help you to decide whether what you originally thought holds true – is what we’re about to build what you want?

It saves money

Putting a wireframe together is a very quick process compared to coding a website. This means we can test & change things as many times as we like. And we can do this at very low cost because we aren’t dealing with lots of code. Changes become more expensive the further a project progresses – so if you can make changes early on, it’s much better value for money.

Everyone understands what they’re building

Wireframes are visual – they can look and function like a finished website. Whilst we always write a project scope document – describing what we’re delivering – the wireframe shows us what we’re aiming for.

Real people can test them

There’s nothing more informative than sitting down with a group of people to ask them to test your product. Web design is no different and we can use wireframes in the same way. When other people test your product they’ll uncover all sorts of things you didn’t think of.

Do I need a wireframe?

No, wireframes are not essential. They’re an early prototyping tool which we use to better understand the project scope. They’re thrown away once the build starts. For smaller projects where the scope is well understood, we probably wouldn’t use a wireframe. The project size wouldn’t justify the cost.

Why don’t you build whole websites this way?

In our experience, the code which our wireframe software writes is nowhere near as good as the code which our developers produce. It’s fit for purpose – early prototyping – but you wouldn’t want to put it into production. For one thing, it’s not mobile responsive. We can create breakpoints in our wireframe so that we can show how a mobile or tablet view would appear, but it doesn’t allow us to create a fully responsive website.

Can I show people my wireframe?

We would love you to show people your wireframe. We put our wireframes on a development server so that you can do exactly that. You could show friends, family, existing or potential clients and ask them what they think. Their feedback can influence any changes. You can ask us to make those changes, and you can then go back and test again to see if they’ve made an improvement.

Usability testing

For larger projects, we offer usability testing sessions. These are 1:1 practitioner-led sessions where we sit down with a small group of people to ask them what they think. We have a ‘script’ to work from – a set of questions we ask everyone so that we can compare the results. Our users respond to our questions and we observe how they use the wireframe. Usability testing can show us how people think, what they expect to see or do, and can uncover problems we’d not realised were issues!

The last thing you want to do is spend money on creating a new website or piece of software only to find that people have problems using it! It’s likely that you would have uncovered this through early usability testing sessions. And because you can address it at the wireframe stage, you don’t incur the cost of having to change an almost finished product.

What happens after the wireframe is finished?

Once we’ve completed the wireframe, it’s sent to our graphic designers and development team. Our designers use it as a starting point for adding font, colour and pictures. Our developers use it to work out how best to structure their code. They can also tell us whether something we’re planning might be particularly difficult to do. There may be a better way to do it – this would involve further discussion with you, some modifications to the wireframe and then more testing.

You’ll get a final chance to sign off the wireframe, the graphic designs and the project scope document before we begin the build.

Then the fun begins and your project really comes to life!

What software can you use to build wireframes?

There are lots of different pieces of software you can use to create wireframes. We use Axure RP here, but Balsamiq or Figma are two other leading contenders.

Final thoughts

We’ve been using wireframes for more than 10 years and we’ve never looked back. They are almost always the first tool we use when developing new websites. And they are always the place we start with software systems development.

Wireframes can be as complex or as simple as you like (or need). They can be very basic or can include colours and pictures if that helps.

The quality of our work has improved immeasurably since we’ve introduced wireframing. We can’t recommend it enough.

If you would like to have a chat about wireframes, usability testing, web design or software development please don’t hesitate to get in touch.