The Importance of Site Maps and Wireframes

Commentary by: Nikki Duncan, Information Architect

One of the goals of a good Web development company is to reduce overall development time and cost for the client while still providing a superior product. At Hanson, we implement a set of documents that helps us achieve just that - welcome to my world of site maps and wire frames.

Where do we begin when building a Web site? First, our team personally meets with the client to develop scope. This can range from one to a few meetings depending on the complexity and size of the site. A typical meeting involves munching on catered delicacies while defining goals and objectives of the site, client expectations and target audiences. We evaluate what will make the site exceptional from the competition, and gather a working list of the materials we'll need to build it.

Then comes the site map. A site map reflects the structure and organization of the site content. It groups the information into logical sections. To create these sections, we put ourselves in the mind of the user: Why is she at this site? What does she need to accomplish? How can she accomplish this? What logical path will she take through the site? An intuitive navigation system is the goal of a site map.

Once a site map is developed, clients become eager to see actual site design. However, integrating design too early in the process can conceal problems that might otherwise be detected, thereby lengthening the design cycle.

Coming to the rescue are wire frames. A wire frame can take the form of paper prototypes or HTML pages; however, it is important to note that wire frames are not design. They convey the information that should be on a given page, and a hierarchy of the level of importance of that information. Simple boxes and “greeked” text are used to demonstrate where images or important copy is later to be placed.

As a design tool, wire frames accelerate the Web site design process. Designers have a preliminary sketch of what to design to, rather than guessing how much content or the type of content that will appear. They are able to concentrate on visual design features that can enhance the overall usability of the site. Changes to the design are minimal, and soon a finished site evolves.

Internally, site maps and wire frames become checklists that we can use while gathering content. We can identify exactly what content will go where (and usually who owns it). Additionally, programmers can see what databases are needed and how things will connect together, as well as predict any technical requirements.

Without these two fundamental documents, clients are left guessing and in the dark, and may request major changes to a site late in the development cycle, causing delays and significant rework. Site maps and wire frames give clients a clear picture of the site and allow them to interact with a model of the Web site. They can see where links will take them, and begin to "feel" what it will be like to use the site. It is important to remember that a site map is not every single link on every single page, and that a wire frame is not design. They are merely tools to help designers and content managers work their magic. This tried and true process saves our clients time and money, and avoids costly HTML and programming revisions.