Wireframes: The Design Before The Design

Some of you may have heard the terms 'wireframes' or 'sitemap' floating about, so today I’m going into the ins and outs of wireframes and sitemaps, explaining what they are and why they play such a crucial part in website design.

Before we begin designing any website project, whether it be a one-page website or a fully functional e-commerce masterpiece, we always create the sitemap and wireframe first, and in that order.

But surely this adds another step into the design process? I hear you say.

You’re right. It does, but for a good reason.

Imagine your website as a house. You wouldn’t go straight into designing the interiors and rooms before the foundations of the house were even established. Jumping straight into the design process might seem like the quickest route, but by figuring out the technical and structural aspects of the website first, it actually saves time in the long run.

It means that by the time we get to the design stage, we can focus purely on designing rather than worrying if the site is structurally sound or if we’ve missed any pages.

What is a Sitemap?

A Sitemap is a hierarchical diagram showing the structure of the website. It illustrates how the navigation should be structured, identifies where content will sit and shows the relationship between the different pages.

Above is a simple sitemap. You can see how the navigation would be laid out, I.e. home, about, projects and you can see how the pages link to one other.

Once we’re happy with the sitemap, we move onto the wireframes.

What Are Wireframes?

Wireframing is a way to design the website at a structural level. Their primary function is to layout content and functionality on a page while taking into account user needs and user journeys. They are used to establish the basic structure of a page before any visual design or content is added.

Once everyone's happy with the wireframes and sitemap, then, and only then, we will begin the website visual design process!