As information architects, we sometimes take wireframes for granted. We work with them every day. We live and breathe boxes and lorem ipsum placeholder text. What we don't often realize is that many people that we work with don't really grasp the concept of wireframing as it relates to web design. Often times, clients would just like to see a page mocked up in Photoshop and sink their teeth into a full-fledged design.

Wireframes are an integral part of the IA process because they reinforce the layout and structure of pages that will be designed. Wireframes are typically an end result of the requirements gathering phase of a site project that fall between analysis and design.

Wireframes show persistent elements of page layouts (e.g. headers, footers, and navigation elements) as well as dynamic elements such as relevant content, tools and services that are specific to each page. Wireframes are typically created using Visio on the Windows platfrom and Omnigraffle on the Mac platform. They consist of a number of different shapes, lines, and links, and text that show you how a page will be organized.

Most wireframes outline the following:

• global navigation
• local or secondary navigation
• content specific to the page being wireframed
• titles, sub-titles, etc
• image placeholders
• footer
• search function

Here is an example of a wireframe from a project with which I'm involved:

You'll notice that there are no design elements applied to this page layout. Wireframes are a useful part of the web development process because they allow you to focus on content and content priorities before the design and development phase starts. Making revisions to wireframes is much less costly than making revisions after the design and development phases have started.

It's generally not necessary to wireframe every page. Aside from the home page, we typically wireframe the most important and/or top-level pages involved in developing the site. Wireframes should not dictate visual design. They should focus simply on the layout of information.

Aside from wireframing for the purposes of determining layout priorities, wireframes are also a vital part of the development process. We use wireframes to communicate functionality requirements to a developer. Adding notations to certain sections of wireframes help the developer understand what he or she might need to do during development in order to produce the desired look on the front end. Notations for functionality include things like:

• how many items should be displayed in a dynamically generated list
• what areas of a page should or should not show, depending on where the user is on a site
• what action should be performed upon click or form submission
• how dynamically generated content should appear
• displaying content based on certain filtering or search criteria