Why do we wireframe?

By Steve / Industry, Work /

What’s a wireframe and why do we use it? Planning is an important part of any project here at The Hideout. But particularly for a website, the discovery phase is key.

Website UX & Wireframe Sketch

Your website won’t look grey.

I guess some of the most common questions we get at this stage are, will my website look like this? Will it be grey? Why are there no pictures? It’s important to note this is not a stage to show off final styling.

When we start to plan a website, we plough through a rigorous discovery phase. It allows us to identify the core components of a company or product that we are aiming to promote online.

It’s important to fully understand a business and every requirement for the product they require, before beginning to form a single visual element. Function preceding form (i.e. design) is extremely important for a successful product. Understanding how it will work and be structured comes before visuals and pixels. We do though, of course, require a method of communicating this in an understandable visual form. For this we use wireframes.

A wireframe is not a design, and your website will not look like this. It will be much prettier.

Wireframes are a blueprint

A structural framework

An important thing to remember about a wireframe is that it is not a design. Wireframes are used as a blueprint of the website. It represents a structural framework, which is used to aid the design process. Think of it as a floor plan. Here we take all of the elements required and decide where best to arrange them to accomplish the desired purpose of the website. It establishes a functional hierarchy.

The wireframes are not supposed to look nice, and are intentionally grey. It’s all about communicating the page layout or arrangement of the website’s content to you, including interface elements and navigational systems, and how they work together. It’s easier to amend the structure at this stage compared to when we have made everything look pretty.

Organising A Deck Of Wireframe Cards
Lost In Thought During Conversation in Meeting

Functionality, behaviour, and priority of content

Allowing ourselves time to scope out the website has its benefits for us and for you. We will spend less time designing, as we already know where everything is going to go, and how it’s going to function. You will understand the site much more before seeing the high fidelity designs (which can sometimes be a distraction from the inner workings).

On Screen Close Up of A HTML Code

Increased project efficiency

It’s not just in the initial phases where wireframes have an impact. Because there are fewer design amends, the project moves to build stage quicker and our developers understand the structure of the site more so they can build faster and more accurately. Project efficiency increases, staying within your budget and timeframes.

InVision Logo

Helping you understand the wireframes

We want you to understand the structural templates as much as possible before agreeing it’s what you’re after. We use an extremely valuable tool to do so. InVision lets us add every page of your site to a project, and we link them all together, so you can click on the images and it will take you through the user journey.

Here’s an example of what we mean, have a play.

Baby steps are better than giant leaps

Including the wireframe process into our web development arsenal bridges the gap between project discovery and web designs. We test the usability of the site internally, and you can do the same too. It allows the entire product to become stronger, fine-tuned, and more resilient enhancing the quality of communication from us to you. And most importantly gets you more involved in the stepping stone process of building an online product.

if you’d like to start a website project with us, then get in touch!

The Hideout

Previous

Five things the studio are currently in love with #04
The Hideout

Next

Fear no colours