Creating a Wireframe

After sketching a site structure, my next step was to create a wireframe to fit everything needed into each page. A wireframe is sketch that shows the basic form of a product. In engineering and product design, it might be a computer-generated 3-d model. In web design, it is a sketch of the pages that shows the major elements, such as navigation links, content, and any logos or brand elements.

Here's a snapshot of the first wireframe, which I drew with a basic drawing program:


By sketching out a typical page, I formed a sense for the visual hierarchy. "Visual hierarchy" basically means focusing attention so that important things are the most noticeable and less important ones aren't as obvious.

In developing the wireframe, I carefully considered how the parts of the page would be positioned. I tried to create clearly defined areas for navigation and content that would be easy to skim. (Studies of web use show that most people quickly scan pages to see what interests them, rather than reading every word.) I planned the site navigation to leave room for subsections along the left side of the screen. (Using left side for subsections gives a lot of flexibility for future growth of the site because it's easier to add items to a vertical list than it is to add to a horizontal list--scrolling horizontally is a very bad thing in web design.) I also placed a search box at the top of every page just in case people felt lost.

The sidebar on the right side also serves a purpose. First, it narrows the main content area so pages with a lot of text won't seem as text-heavy and hard to read. Second, it gives buffer for people who's screens are smaller than average so they won't have to scroll horizontally to read the main content. (Horizontal scrolling = Very Bad!) Finally, it gives another area of the page for special types of information--if something needs to be said but doesn't fit the flow of the main content, there's room in the sidebar.

Based on the wireframe, the decision makers in my group had an idea of my plan for the web site and approved it, and I could build a web version of the wireframe in HTML. Web wireframe comes in handy for exploring page interaction and performing basic usability testing, which I'll talk about in my next posting.