What are wireframes and why are they important?

If you’re starting work on a digital project, you might hear the term ‘wireframes’ thrown around. You might be wondering what they are. You might be wondering why they’re helpful. And you might be wondering if they’re an unnecessary step in a project – why not jump right into the final build?

We’re going to run through what wireframes are, how they can be used effectively and how they can help you look at your project with a critical eye whilst you’re still in the planning stage.

So, what is a wireframe?

A simple wireframe consists of labelled boxes laid out to depict the structure of a digital experience. You strip all the unnecessary elements away – the colours, the pretty pictures, the body copy – until you’re left with your pages, your headings, and your calls to action. You turn those into labelled boxes, and you have the building blocks of your digital project.

As an example, with a website homepage, you’d have boxes for all the other pages on your website, and you’d have boxes for the key pieces of content that need to appear. For an e-commerce shop those boxes might be featured collection, featured image, testimonials, email sign-up, about us, shop the collection, find out more etc.

Then with these boxes you create an initial plan of the website – or an initial wireframe.

And you do all the above so that you can plan and examine the user’s flow through the content. You can examine in this most simple form the blocks of your digital content and how a user navigates through it. Then easily rearrange content, menus or calls to action if the flow isn’t working and you feel a different layout would give a better user experience.

Why are wireframes helpful?

Wireframes really help focus the mind. You don’t want to reach the final build stage of a website, then for the first time be considering how a user moves through it. You want to start with that.

You might have key aims and objectives which you’ve nailed down in a written brief, but you’ve not necessarily moved that into the specific content and elements which will help take users from A to B, to meet your objectives. By creating a wireframe and mapping a user journey out you can immediately see content helps users on their journey and you’ll also see what content results in a dead-end. Or if content and page names are confusing/unhelpful/add unnecessary steps etc.

For more basic wireframes you don’t need any specific software, they’re relatively easy to create in Microsoft Office using rectangular blocks. So alongside a written document, you can bring one as a briefing tool to a digital agency like ourselves. Then we can work together to explore if that user journey does look correct and engaging.

Then if the simple wireframes are agreed, we might take the wireframes further to slightly more sophisticated wireframes that allow clickthrough’s. This can allow you to journey through the wireframe site and pretend to be user. Or we would add basic images in to bring the flat visuals to life and give a flavour of how they’d look with branding applied.

This can also help if photos or videos need to be commissioned – you can get a sense of the space that content will take up, or where the focus of the image needs to be to fit the space available.

All of that is done before we get to the build stage.