Why do we use Wireframes?

Mobile Website Wireframes

An often overlooked part of the website design process is the initial wireframes. When discussing budgets with clients, it’s a common request for this stage of the process to be skipped. Usually justified by the fact that “why would anyone need to see a boxy, shell of a website layout when we’re going to see a vibrant, interactive prototype anyway”.

A completely valid point when looking at it from a clients perspective. That is until you realise the benefits of beginning a project with a wireframe and how a seemingly unnecessary stage of the process can actually save time an money in the long run.

What is a website wireframe?

A wireframe is a simple, low-fidelity layout of a website. It consists mostly of basic text and shapes, free from any real “design” elements such as colour and font choices. Each of these shapes represent an element of the overall layout, like a header or conversion area for instance. When these elements are arranged into a logical and hierarchical layout, a wireframe is created which will form the basic foundation of a web page.

A house analogy is often used when referring to wireframes and websites. If you thinks of a website as the house, then the wireframe is the architects drawing. The drawings don’t dictate the interior design features just as a wireframe doesn’t include colour, font and design elements. It does however show the structural placement of each element in the layout.

An important part of wireframing is to see first hand how a user will interact with your site. Wireframes make this collaborative process much easier to manage when arranging elements to guide users to the content you want them to see in line with the overall goals of the website. Simply omitting this phase in order to dive straight into the prototype is likely to be a costly mistake. After all, you wouldn’t build a house without an architectural drawing.

Mobile Website Wireframes
Website wireframes can show how content will reflow on smaller devices

So why do we use a website wireframe?

For an overview of website features

Being able to visualise the basic structure of a website makes it easier to see how the the main features work in context. There could be many different features that make up a website including, navigation, search facilities, enquiry forms, 3D model viewers, etc. Seeing them all collectively allows you to identify what features are most useful, if some features are really needed or, if any additional features would increase the achievability of your websites goals.

Focus on information hierarchy

While we always start any website project with research followed by a sitemap, the wireframe stage marks the beginning of the creative journey. The sitemap is moulded into something more conceivable throughout the wireframing process. The features contained within each web page are positioned in a manner that will drive users towards the content you want them to see. Without the distraction of colours, fonts and design elements, the main focus becomes the information flow and how a user will journey through the website.

NP Aerospace Website Wireframe
A comparison of the wireframe and the live website we created for NP Aerospace

Save time on revisions

It’s perfectly understandable for a client to be craving the opportunity to see their website’s proposed design in full bloom. However, when asking for feedback on functionality and visual aesthetics in the same step, the latter commonly receives the most attention. Information flow and user journey feedback becomes an afterthought, or even overlooked as the client delves into a myriad of design details.

Reviewing a wireframe for feedback lets clients focus on functionality and the order that information is presented to the user. If changes are required, then it’s more time and cost effective to make adjustments to a low-fidelity wireframe than it is to update a high-fidelity prototype which must be reworked with a greater level of precision.

Functionality vs Aesthetics

Now that you have a greater understanding of how important a wireframe is to the website design process, you can see why this step shouldn’t be underestimated. At Reflection we recognise that a websites functionality is equally as important as how it looks. This is why we always begin a website’s creative journey with a wireframe.

Original Life Website Wireframe
Wireframing was an essential part of the process for the ecommerce website we developed for Original Life.

Begin your website design the right way