Wireframing a website before you start is a fantastic communication tool that allows your client to visualise the architecture of their new website, before you create it.

CNN Wireframe

CNN Wireframe - Wirify

If you don’t know what wireframing is, it is a simple, black and white layout highlighting where certain structural components will be placed. They are usually devoid of fonts, logos and UI elements, substituted with (usually) grey boxes.

Many clients will also not know what wireframing is, or why it is important. You can combat this uncertainty by telling them settling on major site components, page layouts and the foundations of the website before the main creative process starts, will save them lot of time, effort and money. And for you – revisions! Below are a few reasons on why you should not avoid the wireframing process in your project and the importance that it holds.

Structure and Layout

A wireframe allows you and your client to build a solid structure before the design is created. The ideas have been brainstormed and now it is time to create mock-ups. The simplicity of wireframes means multiple ideas can be explored at once in a relatively small amount of time. You have the ability to juggle things such as headers, navigation, sidebars, footers and sliders to define a layout that suits the client and represents their goals effectively.

But be warned, just because it suits the client at the time of creation, doesn’t mean they won’t want to move things around at a later date. Nothing is solidified!

Building a Behaviour Flow

Following on from the basic structure, you are now able to determine a behaviour flow for visitors to the site. Wireframing allows a sitemap to become a visual communication tool quickly and easily, showing the client how visitors will process information and navigate from one page to the next. If you don’t understand the behavioural flow of the end user, it can lead to a lot of exits and drop offs within the first couple of pages; ultimately harming the site in the long run.

Using a wireframe for this section instead of sticking with a flow chart means the client is able to focus on their sitemap in a visual format, without the distractions of a full design and UI elements to divert their attention. This means they can see what works, and what doesn’t.

Learning About Your Client

When you present your client with a number of wireframes, pay close attention to their feedback. You may be able to pick up patterns in their responses that give you a leg up when it comes to creating the full colour design. If they dislike the sidebars in your designs, you know they will probably dislike them when it comes to the full design. You then have to go back and revise this when you could have picked up on the hints given in the initial stages.

You can also pick up on what type of client you are dealing with. The extent of their feedback will give you an insight into how much time and effort they are willing to dedicate to the project, and you can adjust your commitment accordingly. I’m not saying to produce a sloppy design or not care about the project, but if you are giving 100% and the client isn’t reciprocating this, other clients may fall through the cracks – especially if you are juggling a few projects at once.

Saves Time Overall

The best thing about wireframing a project in the initial stages is that it will save you time in the long run. That is guaranteed. It may seem more effort and a waste of time to dedicate a few days to producing wireframes at the very beginning of a project, especially if you’re on a tight deadline; but agreeing on the structure and architecture of the design dramatically reduces the chances of those dreaded words, “start over”. Being on the same page with the client puts you in a great position moving forward.

So there we have it. Those are just a few reasons as to why wireframing is a great part of your design process. Of course there are many more pros and even some cons, but overall producing these wireframes is going to make life easier for you meaning a happy client and a successful project will come out of it!

Make your Instagram beautiful. Preview your images before you post them ›