How do sitemaps and wireframes fit in the overall interactive development process?
Sitemaps and wireframes are part of information architecture, which is basically preproduction for web sites. Like real-world architecture, the idea is to create a series of diagrams, or pictures, that describe the web site you’re going to build before you actually build it.
There are more than two types of information architecture diagrams, but I find that sitemaps and wireframes are two of the fundamentals, useful in pretty much any web site you may be building. Remember that these are process-oriented documents. The point is not to make them all beautiful. They are functional. You want them to work as a communication tool that helps your team collaborate. The end goal of information architecture is a streamlined economical process where overages in design and coding are avoided because good planning has taken place at an earlier stage.
Using wireframes can help determine:
– The structure of a page or screen
– The layout of content
– The functionality available
– Calls to action
– Blocks of text
– User interface elements
– Graphic design touches
When Are They Useful?
Wireframes are extremely useful in the following situations:
To quickly get ideas down on paper for soliciting feedback. This is the real ‘back of a napkin’ use of a wireframe, and it can be useful in a workshop to document ideas (Use a whiteboard or computer screen, and draw up something rough). The very act of creating this image, this basic wireframe, will prompt people in all kinds of useful ways.
This type of wireframe is often referred to as ‘lo-fidelity’. It can be a few boxes drawn in felt tip, a pencil approximation of a full page, or a computer drawn illustration. The idea though is it doesn’t look finished, because invariably, it isn’t.
To communicate the specification of a system or website. This is the ‘a picture paints a thousand words’ concept. Communicating how a proposed system, website, or even simple page of content, should work and look is never as easy as it seems at first. Drawing a wireframe, with the various stated outline and suitable annotations, can save a lot of time writing complex paragraphs.
This type of wireframe is often referred to as ‘hi-fidelity’. It normally looks like a recognizable page and can often be very ‘designed’, but still sticks to the core of idea of being an approximation.