It’s natural, for clients, to want to rush into the design phase of their website once all of the content pages have been finalised. We’re excited too; eager to bring your online branding to life. However, there is an essential step wedged in between resolving the sitemap and creating an initial design proof. This structural stage is called the ‘wireframe’.
Most people are familiar with the concept of a sitemap (a list of pages and menu structures), however, ‘wireframes’ are still not universally understood. So what exactly are these mysterious planning pieces? Let’s start with a familiar analogy.
A wireframe analogy
So, you’re building a house. You’ve decided which rooms are needed and you have a rough idea where all of your belongings, fittings and furnishings will go once you’ve moved in. The next stage of the project is to establish a floorplan of where the rooms, hallways and thoroughfares will be positioned. This architectural floorplan is similar to a website wireframe. Until there is an underlying structure in place to support your design objectives, it’s impossible to produce an accurate finish.
Imagine contracting an interior designer to fit out a space that isn’t 100% confirmed. While it’s possible to get an idea of style elements; the placement of the walls, windows and doors must be approved before making any concrete design decisions.
What to expect from a wireframe
It’s important to remember that a wireframe is only a blueprint of a website’s visual structure; not the final design. To ensure a clients’ focus is firmly fixed on the content, and not the appearance of the page, design elements are kept to a minimum.
Black writing, grey boxes, a white background and no branding elements whatsoever. Not particularly ‘appealing’ but entirely necessary to emphasise a site’s functionality; without the distraction of bold colours and elaborate imagery.
To some, a website wireframe may seem like yet another step before they can get their hands on an initial design proof. However, there are way too many advantages in establishing a watertight visual structure, to abruptly bypass this part of the process.