Wireframes

Here at GyroHSR (I had nothing to do with that site, thankfully) we are all a little bit confused over wireframes. Essentially, I think that the main issue lies in what exactly is a wireframe supposed to deliver.

In my opinion I believe a wireframe should simple layout exactly what information should be displayed on a page and define the importance of that information, in relation to the rest of the content.

With this idea in mind, a wireframe does not necessarily have to provide any sort of guide to the actual layout of a page. There isn’t really anything wrong with this for a simple contact page wireframe:

Header elements

Logo – prominent positioning.
Search box – enable users to search whole site.
Navigation – full site navigation.

Main content

Contact form – main content on page, encourage users to use this method of contact.

Secondary content

Postal address – specify preferred correspondence address.
Email address – link to create email for users that prefer this method of contact.
vCard – Download contact details to an address book for future use.

Other content

Company details – registerd company address and registration number.

That will provide the main information required by a wireframe, and producing this format for every page to be developed should meet the designers needs.

However one point above is always missed, producing a wireframe for every page. Without doing this you are not creating an information architecture for a designer to follow, resulting in questioning why wirframes for any pages were created at all.

The same problem applies to wireframes that incorporate some form of layout:

Example wireframe - courtesy of http://totheweb.com
Example wireframe - courtesy of http://totheweb.com

Creating a wireframe for every page becomes even more important with this wireframe style, in my opinion. Creating this type of wireframe for only a small number of pages during the information architecture stage of a web site process results in designers feeling restricted to make all pages following the same layout. Often the content will lend itself to a completely different layout, which means it needs its own wireframe and if not it should be easy to create another wireframe based on what has already been created.

One other thing I often find missing from wireframes are annotations. Visual representation is fine, but if you really want to let a client or designer know what you plan for the page, it needs to be annotated well. The annotations let the wireframe make sense and are vital to communicating the user experience. A poorly annoted wireframe wil result in poorly communicated ideas and will very probably hinder the final user experience.

So that’s what I think about wireframes, feel free to correct me if you think I’m wrong, or to add to this because wireframes are such an important part of the web development process that I think anyone involved in the industry should input into how wireframes can help ease the pressure on project management, information architecture, design and development.