Wireframes – What are they?

Wireframes are one of those jargon words you might not have come across before. When we are talking to prospective clients, we often spend quite a bit of time justifying why we need to create them. Unsurprisingly most of our clients question why we insist on creating wireframes before the "proper" designing gets underway.

In essence, wireframes are to websites, what blueprints are to buildings. They help structure information and layout upon which the design can be implemented — assisting the designer in solving problems.

At the wireframe stage, we are planning how we are going to achieve the goals of the project, such as;

  • What is the purpose of this page
  • What key messages need communicating
  • How should call to actions be implemented
  • How are we going to include required elements
  • Have we met the brief

Wireframes are purposely basic, void of colour, graphics and stylised fonts. Focusing on the user journeys, how are your customers going to get to the product page and hit buy now? They also are an effective way to identify usability issues early on in the design process. It is much easier to move wireframe elements around then it is a fully designed website. Spotting potential problems early in the process save a lot of time and money later on.

These benefits appear to be only helping the designer, but the client can also gain benefits from the wireframe process. For example, you can see if the designer has met your brief? Is there some functionality you were expecting that is missing? They provide a means for you to get involved with the process and provide feedback, figuring out flaws with the designer, thinking about functionality and structure of the design will be something you will find hugely rewarding.

If you intend to write your content, supply photos and graphics, wireframes can serve as a map, guiding you towards what needs providing. The plan will help you to understand the gaps that need filling, speeding up the content gathering phase of the project.


Wireframes put usability and layout a the forefront of the client, designer conversation, helping both parties prioritise information and functions over colours and fonts. Objectively looking at usability, element placement and customer journeys will save time for both parties and create customer-focused website designs.