WHAT IS A WIREFRAME?

In web-design, a wireframe refers to a design that outlines the structure, user interface, priority of information and functionalities available for a website. Traditionally, they follow a simple design and don’t include colours and graphics.

WHY IS A WIREFRAME IMPORTANT?

Utilising a wireframe establishes the structure of a website without any design elements influencing the way it is built. By producing a wireframe you benefit from:

Creating a clear user interface:
Using data led insights, you’ll be able to create a clear layout that caters directly to your users needs. As a result, once your website is built you will find your analytics indicate a better bounce rate, page viewing time etc.

Establish paths between pages:
Easily show site architecture with paths between each page.

Prioritising information:
You will be able to decide what information takes priority on each web-page.

Structure:
Clear structures for each page can be followed by your designers. As a result the user-interface you have developed won’t be lost in the design of a website.

Consistency:
Ensure there is a consistent way to display different types of information on your website.

Functions:
Determine the functionality of different elements on a web page.

HOW TO CREATE YOUR OWN?

Keep in ind that the goal of a wireframe design is to depict layout, user-interface and functionality, so make sure you keep it simple. We recommend you:

Use data: Let your analytics guide your content. This helps prioritise content, establish paths between pages and will result in a better user-interface.
Colour: Don’t use colours. Instead, we recommend using different shades of grey to establish various elements of the design.
Images: Don’t use images in your design. To indicate where to use an image, create a rectangle with an ‘x’ through it.

There are many different layout elements you can use when building your wireframe. Here are some good examples below, and why not try to create one of your own?