What is a Wireframe? And Why Does a Website Need One?

Building websites is a really intense job; for me as the designer/developer and the client. We have SO much to organise. It's a great time to organise all of your information in a really logical and helpful way and examine how your business operates. 

Because there is so much information going on it's easy to get overwhelmed. This is why I am a firm believer in wireframing before we go into design. 

What is a wireframe?

It sounds like a pretty weird term, right? Why would I be building your website from wire anyway?

The term comes from older applications of this method. Making 3D forms by computer used to take up soooo much memory that it was damn near impossible. It was much easier to make shapes like the ones below than render a 3D model with skin.

These days, animators still use wireframes prior to adding skins when running building animations.  

Those lines are much easier to handle than all the data needed for the sides. 

What is wireframing?

When it comes to websites, wireframing layout of a web page that demonstrates what interface elements will exist on key pages. It is a critical part of the interaction design process. All the component parts are there it's just that they aren't pretty yet.

The aim of a wireframe is to provide a visual understanding of a page early in a project to get approval of how stuff works and interacts and guides the target user to their goal. If you want your user to get to your contact page, we can make sure that it's easy to find for them and valuable when they get there.

The wireframe stage looks at button, links, navigation menus, overall layout, and the labels and information of those parts to make sure they make sense. Placeholder content can be used as long as there is an understanding about what's going in there once the content is finalised.

Getting a wireframe going means you have a prototype for the website on which you can apply the design skin.

How are wireframes made?

I build my wireframes directly in the browser so a client can really take it for a test drive. Want an example? I made one here.

Other designers will make theirs as a picture which the client agrees upon and then sends to the developer to code and then put the agreed design into the frames. 

Why take this step?

It is quicker and cheaper to review and amend the structure of the key pages in a wireframe format because there is less to move around, recode, and rethink. 

Pretty simple really!

What should be reviewed at the wireframe stage?

It's so tempting to get excited once the baby website is born. But the wireframe stage is about basic user journeys, organisation of information (also called information architecture), and site function. This means that the following elements are the source of review:

1. navigation and menus - do the labels make sense? Do the links go where they need to? Should the links open in a new page or another one?
2. buttons, links and their actions - same as the above really!
3. organisation of information: hierarchy, levels, order of pages, order of blog or shop categories and tags - should some pages be nested under others in order to make sense? Could further categories be added to make your content more visible to search engines? 
4. flow and order of information on the page - Does the information have the right order and flow? Have we missed any important sales points, calls to action, or emotional connection?

Wireframes are so important

They may not be pretty, but they are pretty damn important!