3 Specification: What is a Wireframe?

The purpose of a wireframe is to give you something akin to the architectural drawings of your website.

Imagine you are building a house but you decide to do it without any blueprints. Now you may think you have a really clear idea of how it will look but the reality is always more complex: If you build the bathroom but forget to add in the shower you’d need to rip out what’s there, re-jig the layout and re-plumb everything costing you a lot of time and money.  

Of course, very few of us are likely to build a house without detailed drawings but the same principle applies to your website. If you begin to build it without the blueprints then you run the risk that your web designers are going to charge you for unexpected changes. Having a wireframe negates all this because all the thinking is mapped out on screen before anyone actually builds anything. So, if you have a 2am moment of genius, as long as you are still in the wireframe stage it shouldn’t cost you any more money to implement. 

eCommerce Wireframe Example

An example of a wireframe for an eCommerce website

What you will notice about the wireframe is that it doesn’t actually contain any data/content. It is essentially a set of boxes which describe functionality (how the website is to work). Technically it doesn’t even indicate the layout of the page although it is almost impossible for anyone to look at a wireframe without thinking that that is how the final page will be visually organised. However, try not to view it as a fixed layout because when the designers get hold of it they may change it to a more visually appealing and appropriate layout.

What you will notice about the wireframe is that it doesn’t actually contain any data/content.

Wireframes should also describe what parts of the website you can modify using the CMS and what parts are fixed. For example, you will typically find that the header and footer are not editable but the main body content areas are. Make sure you mark-up which is which on the wireframe.

Let your web designers take a lead on the wireframe. They will already have experience of developing them and will probably have a template which is appropriate to your type of website. Don’t, however, leave it entirely to them to build otherwise you will end up with the website they think is right for you and not the one you actually want!

So, part of the wireframe’s job is to convey a vision of your website to us web designers. The problem with vision is that it can be a nebulous thing and there is a tendency amongst the web design community to view wireframes in a very literal way. So, any assumptions about how you expect certain parts of your website to work may result in things not working as you expect them to. The only way around this is to assume nothing and describe everything. Let’s take an example:

Imagine you are running an eCommerce store. No doubt you’ll have a page which lists products by category which would seem straightforward but there comes a point where the web developer will need to know how the products are to be ordered on the page.

any assumptions about how you expect certain parts of your website to work may result in things not working as you expect them to

For example, they could be ordered alphabetically, by price (highest-lowest, lowest-highest), by attribute (colour, weight, etc.), popularity and so forth. Unless you specify it the developer will probably take the default approach for them which would be displaying the products in the order in which they are entered into the database.  As you can imagine changing the approach after the system has been built may incur additional cost.

Sometimes, however, it is not obvious what you need to specify.  Our advice here is to do three things:

  1. Think deeply about each page and ask yourself the basic questions of; who, what, how, when, why.
  2. Take the wireframe to friends, colleagues, customers and get their thoughts.
  3. Go back to the web designers and get them to ask you any technical details which they may need to know.  (It’s best to make sure that you also speak to one of the web developers (i.e. programmers) to get their input.)

If this all sounds like quite a lot of work then, agreed, it is but we can promise you that by doing all the initial thinking up front you will end up building a much better website more quickly because it will be right first time.


NEXT: 4 Specification: Structuring Your Wireframe


digitalROAR LogodigitalROAR is a Web Design agency based in Staffordshire. We build websites that convert visitors into customers and enquiries through great design, rock-solid technology and innovative Digital Marketing. Let's make Contact.