The importance of a wireframe in web design

In our article Focus on website structure and messaging, not design, we introduced the analogy that building a website is similar to building an extension for your home. Before even going to the drawing board, the architect will ask you a host of questions about your family, hobbies and what the space will be used for.

Carrying on that theme and progressing to the next stage, when you have decided what you want to use the extra space for, the architect can commence on the floorplan and blueprints. The floorplan allows you to visually see how everything will be laid out and identify any practical issues, such as the sink being too close to the hob or the breakfast bar not having enough space around it.

The same applies to the next phase of the website project.

The Wireframe

Creating a wireframe, which is the third step in the Square Daisy Website Process, is the website equivalent of the floor plan.

The wireframe doesn’t have any aesthetic design to it, neither should it. It is a blueprint to show how the website will be laid out and how all the pages interact with one another.

The wireframe allows you to get a feel for how the user journey will take place and how sections integrate with one another. It can also highlight if anything has been missed.

Rather than using the old fashioned method of drawing the wireframe in Adobe Illustrator and then converting to PDFs and writing notes all over them, we build the wireframe using HTML code from the outset on a platform called ‘Webflow’.

Pdfs are time consuming to create, cumbersome to interpret and are not reusable as we move to the design phase, whereas using HTML is way more time efficient, easy to change and is used in the next phase of the project so there is minimal wastage of time and resource.

Trending; wordpress website design suttonwordpress web design suttonwordpress development suttonwordpress agency suttonwordpress sutton, on Square Daisy

Keeping to budget and focus on user experience

There are a two very good reasons why we create a simple wireframe that doesn’t include any design elements.

The first is to keep costs down. If we were to demonstrate the website lay out by starting on the actual creation of the website, which would have to include elements of design (branding, colour, typography), not only would this take much more time, there will inevitably be changes and these changes are much more time consuming to make.

The second reason is to keep focused on what is most important at this phase of the project.

It’s very easy to get side tracked by conversations to do with the design elements, when the structure of the website is far more important. The success of your website depends on your customers being able to find what they need quickly and easily and carry out the action you want them to take, rather than it looking pleasing to the eye, but not helpful at all.

A good agency won’t skimp on this important stage of the process. It’s crucial that you give it the required attention it deserves as it forms the fundamental basis of your website project and the success it will have.

Now we can focus on design

Going back to the point about time and therefore cost savings, because the wireframe is created using HTML we can now swiftly move on to the design phase by applying the CSS, Javascript and other elements to bring the site to life.

Don’t ask us to build you a house extension, but feel free to call us if you want a great website, which is results driven and created using a sound, methodical process.

A few more

If you're looking to appoint an agency for a new website project, contact us and we'll explain a little more about how we can add value.

Get in touch