Building a Website Series: 3. Wireframing

In Part 3 of my ‘How to Build a Website’ series, I’m going to be talking about wire framing, what it is and why it’s important. If you’re only just joining us, I’d recommend going back and reading Part 1 where we launch our project, and Part 2, where we cover the importance of defining outcomes.

After defining the outcomes, we were really starting to get under the skin of how we wanted our website to work. Long gone are the days of just throwing up a menu and dumping text and a few stock images. We knew that we wanted customers to do certain things – to sign up to a newsletter, or to follow us on social media, or to attend one of our events, and now we needed to start figuring out how to make them do that.

If you’ve been involved in website work before, you’ll know that we’re talking about user experience or UX.

UX is exactly what it sounds like – what a website user experiences when they’re on your website. It can be broken down into component parts;

• How easy the website is for them to use
• Whether they can find what they’re looking for
• Whether they what they want to do
• Whether the site is quick to load and respond
• Whether the site is nice to look at
• Whether the site is usable on different screen sizes (mobiles, tablets, desktops) and on different browsers

All of these things combine to become UX, and ultimately define how ‘good’ your website is (how likely you are to achieve your outcomes). Wireframing is an important part of creating a good UX, and that’s what we’re going to learn about in this article.

What is wireframing?

Wireframing is the way that a website is designed at a structural level. It’s comprised of the layout of content and what functionality is available on each page, accounting for what you want different users to do. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added.

The aim of a wireframe is to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets under way. Wireframes can also be used to create the navigation system to ensure the terminology and structure used for the site meet user expectations.

One of the great advantages of wireframing is that it provides an early visual that can be reviewed with a client. From a practical perspective, the wireframes ensure the page content and functionality are positioned correctly based on the needs of a client and their customers.


From a content point of view, it makes my job a lot easier, once I can see wireframes and concept designs, as I have a better idea of how many words I’ve got to work with for various pages. Our developers were busy working away on these, but on the content side, I was about to hit major problems with the Project Manager and our programme of works. In Part 4, I’ll be looking at how we overcame scheduling problems and reprogrammed our schedule to keep the project on track.