• Words
• Links
• Buttons
• Input fields
• Columns
• Boxes
• Scroll bars

Mmm, boring list.  That’s good, though: this should not be the exciting part.  The exciting parts should be the purpose and content of the web site, and the look and feel that give it life — the struggle and the glory of web design. The elements in the list above should be the basic tools, not the wheels you’re going to reinvent in order to make your site the greatest thing ever to happen to the web.

We’ve come a long way on in web design in the last ten years.  We all used to feel compelled to re-think every element of every page: scrollbars, link treatments,  you name it.  There was scant agreement on a common toolbox of elements and techniques, even though experts like Jakob Nielsen were (and still are) pushing us to adopt just such a toolbox to make the web a more usable place.

To organize these basic elements, your agency will engage in a period of information architecture, or IA.  IA is a discipline that organizes the information, structure, interfaces, and functional goals of a site, and provides guidance in these areas to both the designers and technologists involved.  (At Helen Marie, we consider IA a cross-disciplinary practice that involves all of us: producers, programmers, designers, and clients.)

The process of creating these documents will also enable you to see the first abstract view, the “bones”, of your site.  If you were designing a house with an architect, you’d use this phase to decide where things go: is there a bathroom attached to the kitchen?  What about in the front hall instead?  You’ll run into similar structural issues with your site: Do we have a separate “frequently asked questions” page?  Should it be its own section in the site, or in a larger “help” section?

Sitemaps and Wireframes

On common IA product is a sitemap.  This document provides a bird’s-eye view of your site, its major sections and pages.  Another is a wireframe.  This is typically a collection of documents that describe the interfaces and organization of elements on each page of your site.

A simple sitemap might look like this:

As you can see, the sitemap can indicate pages or sections that you want to include in the future, as well as those you mean to build immediately.  This is a smart, cost-efficient way to start planning your site in phases.

A wireframe can be more or less complicated, but generally looks something like this:

Wireframing is an opportunity to hash out what each page will contain, and how it will prioritize and organize its content, before the designers get to work.  This process also enables you to make concrete decisions about what features and content are important on your site.  These decisions can be easy or difficult, and this can affect the length of the IA process.  But it’s always much easier, and more cost-efficient, to wrestle with these issues at the very beginning, before designers start putting the flesh on these bones.