Drawing an architecture diagram
Even for a simple site like this one, it’s worth drawing an architecture diagram to make you plan out the site’s structure before you start creating graphics and code. An architecture diagram also lets you see the balance of content between the various areas of the site, and forces you to consider what the pages will be called and the kinds of logical groups into which they are organized. This is very important work in the development of a large site, and worth doing even for this site, which will be only a few pages. Figure 7.4 shows the architectural diagram for the Stylin’ site.
Some presentational aspects of the site are suggested by Figure 7.4, although its primary purpose is to indicate site structure. You can see in the screenshot above that at the top of the architecture diagram I’ve dropped in the wireframe layout of the page (see Figure 7.5), which began as a hand-drawn sketch and then was refi ned on the computer. A wireframe represents a page layout as simple boxes with black-and-white text and gray rectangles for images. There is no effort at this point to represent the visual look of the site, and this allows the focus to be on issues of organization, hierarchy, and overall balance of the layout, without getting sidetracked by determining the right shade of blue or the precise cropping of graphics. There’s a time for such work, but it’s too distracting right now.