One of the more challenging aspects of working on web sites is the process of communicating the “vision” the client has for the site. They usually have a picture of the site in their head, or at least lots of ideas floating around in there, and imparting that vision to the designer can be difficult. One extremely effective tool for this communication is a wireframe.
What is a wireframe?
A wireframe is simply a visual communication tool. It consists of a layout of the site’s various pages with no graphics or content. In other words, what goes where and how big it is. Here is a great example by 31Three Design.
The advantages of using a wireframe
Anytime you can improve communication in any project it’s an advantage. It cuts down on the production time. I don’t need to create a mockup that is a “guess” as to how the site should be laid out and then rework the whole thing when the client moves everything around. The process of creating a wireframe can be very helpful when making decisions about the content layout, because of it’s visual nature, rather than just being a list of sections of content. You can see how everything is going to fit together.
How to create a wireframe
To create a wireframe, you can use anything that will allow you to draw boxes and add text. Here are some options:
- MS Word or Excel.
- Google docs- great when you’re collaborating on a site design.
- Photoshop, Illustrator or any other graphics software.
- WireMaster– a Java based wireframing tool.
- Gliffy – an online diagramming tool that includes wireframes and allows you to share projects with others easily. They have a free basic account that allows most options.
- Of course a pencil, paper and scanner work just great too, as long as you have legible handwriting!
What to include in the wireframe
In a word: everything. Everything you know you want on the site and all ideas about how it might look. Beyond just laying out the blocks of content, you can include notes on color, functionality, example URLs, etc. Be sure to note the size of ads that will be used on the site. I find that a wireframe is a good place for questions as well. With any project, a client may not be sure what the best choice is for certain sections, and there may be questions about plugins or functionality- the “is this possible” kinds of questions that come up so frequently. A wireframe may also contain a site map.
Whether it’s been created by the client or the designer, a good wireframe makes it easy for a designer to move into the mockup stage because all the client’s ideas are in one place and have, hopefully, been agreed upon Because the ideas are represented visually it helps to avoid the communication issues that often arise from describing how you’d like something to look in words. Obviously, it has it’s limitations and I’m not suggesting that it’s the client’s job to decide exactly how the site should look, down to every detail, and then simply describe it to the designer so they can execute it. Rather, it’s a place to centralize everything a client knows they want the site to include and how they envision it being laid out.
Who should create the wireframe?
Either the client or the designer, whichever works best. It really depends on the type of job it is and how clear the client is on exactly how they want the site to look. I’ve had clients who know exactly what they want and where they want it, and there are some who would prefer to have more designer input on layout.
A couple more articles on wireframes for further reading:
Wireframes: Much More Effective Than Interpretive Dance
Creating an Effective Wireframe (video tutorial)