Looking for the lessons? Get started!
Information architecture is simply figuring out what your site is, and taking the time to figure out how to structure it so that it does what you want it to do.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone's browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won't display the menu, just click on the button and you'll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
On the Web, information architecture is a combination of organizing a site's content into categories and creating an interface to support those categories. — Shel Kimen
The first step in creating a Web site is not sitting down at the computer and typing code. It isn't choosing graphics, or even purchasing a URL. It is deciding what the site will be about, and how it should be organized to present that information.
Organizing a multi-page Web site is known as information architecture — literally, building the informational structure of a site the same way that an architect plans a physical structure such as a bank building.
(Much of this information is drawn from an article on information architecture by Jonathan Lane, The Essential Guide to HTML and CSS Web Design by Craig Grannell, and from an article on information designer Shel Kimen.)
Basically, you're following three fundamental steps:
- First, you decide on the content of a web site, and decide how to structure that content into pages.
- Next, you decide on the functionality that will actually be used on your web site.
- Third and last, you work out the visual design of your site, including page layouts, color schemes, and so forth.
All of this should be done before you write one line of code or content. Sadly, many Web designers never bother with any of these steps, and do what passes for "information architecture" on the fly, as they go. Often, the result is a poorly organized Web site and a tremendous amount of time spent backing up and redoing work after realizing that the initial design is flawed and needs revamping.
Getting Started
While many professional designers use fancy, expensive programs such as Microsoft Visio, Omnigraffle, or SmartDraw, just as many start with pencil and paper, sketching out the initial concept of the pages and how they connect to one another. This is called making a site map.
Lane gives an excellent overview of planning a Web site from conception to final layout; instead of rewriting his walkthrough, I'll just direct you to his article for specifics and illustrations.
WriteMaps is an excellent, free online tool that lets you make mockup "site maps" of your design layout proposals.
And designer Matt Everson has graciously given us his Slickmap, an easy-to-use tool for producing sitemaps. Everson's "Slickmap" can be used for layout proposals or for finished sites. I use Everson's tool for this site's sitemap.
Grouping
Once you've decided what pages your site will need, you should begin grouping them. As you do this, you can refine and modify your page selections.
Naming Your Pages
Lane writes:
Page names can be one of the most crucial decisions you'll make during web site design. Not only is it important for your visitors so that they can find their way around your web site; it is also another thing that dictates how easy your site is to find using a search engine ...
Adding Details
While you won't do anything more than rough out the page concepts now, this is a good time to begin adding some details to the individual pages: brief descriptions and notes on what each page will contain, how it will function, what it will look like, etc.
Non-Traditional Structuring
We really could spend all week on this. There are plenty of sites out there that don't use linear, traditional site structuring. Some of them are really obtuse and confusing, as the bizarre "navigational" scheme of Jones Chijoff; I really don't know what the hell this site is about, and you don't, either. The Got Milk? site is at least artistic and entertaining, but isn't designed for ease of use. You can certainly have non-traditional architectural structuring of a site and make it spectacular, but it ain't easy, and 9 times out of ten results in confusion and frustration instead of oohs and aahs.
In his 1997 book Web Sites that Work, Roger Black gives an example (starting on page 105 if you're following along at home) of a non-traditional structuring of a print news story about a hostage situation in Peru. He uses it to give an example of a non-linear, non-traditional way to tell the various aspects of that story, using the main story as the "hub" of a "wheel" with other related stories and information — maps of the compound where the hostages were being held, audio and video clips, a story synopsis, biographical sketches of the hostages, a short explanation of the ideology driving the hostage-takers, more. Black writes, "It's a very effective way of breaking up the story into easy-to-read, Web-sized pieces."
Further Reading
A more advanced level of information on the subject is available from IBM, in an article on "User-Centered Design". And there are many, many more books, articles, and Internet postings available on the subject.
