What is a Website Wireframe?

Once you engage with your chosen website developer, they will produce a wireframe to help you visualise what your site will look like. If you feel comfortable with the concept, you may even show your layout thoughts in a wireframe. So let’s investigate, what is a wireframe?

Wireframe Description

A wireframe is a simple visual guide which will show you what a page on your website will look like. It doesn’t include any graphics or text but outlines the structure and layout the page will have. A full website wireframe shows all pages included in the site and also includes the links between pages.

Wireframes are often a great way to start the visualisation and design process. They don’t need to be overly complex and so do not need lots of detail. They are the start of the planning process which will ensure your site delivers a great user experience. Simple boxes and lines are used to represent where the images and text will go in the final site.

Wireframe Elements

Here are a few of the elements used in a wireframe;
• the overall page shape (or just the part in focus for this visualisation)
• the number of columns to be used on the page
• boxes to represent the main images
• a simple structure laid out in a logical way
• the location of headlines and sub-headlines (see explanation below)
• the location of any text
• your call to action (what you want the user to do having visited the page)

Sounds simple? Well it’s probably best to keep it that way.
Try to resist the temptation to use a drawing or graphics package (people often use Visio) at this stage. Remember this is only a basic visualisation to see how balanced the page looks and make sure you don’t miss any elements. You probably don’t even want to consider colours and exact shapes at this stage. Resist the temptation to make it perfect!

Headlines

One potential area where web design jargon may be introduced is headlines. Headlines are not only important in defining the layout of your page (and making the user experience stronger) but they also help with your site’s Search Engine Optimisation strategy.
The ‘H1’ headline is the main headline for the page. A sub-heading is an ‘H2’ and any lower headlines become H3 etc.
Your wireframe should clearly show the location of all levels of headlines.

We hope that’s explained wireframes for you. Look out for our next blog on siteflows. You can also browse our client work to see how wireframes come to life.

Website Wireframes

What is a Website Wireframe?