Chapter 5. Planning the Look

Having spent the previous four chapters carefully walking through the planning process, the time has arrived for the site to start coming to life. The birth of a site isn't the graphics, images, and other material appearing in Dreamweaver MX 2004. Sites come to life in a rather methodical manner. It all starts with a site map showing how each page interacts with the others and the hierarchy of information. Another important map is the one that shows the interaction and data transfer between the client sidethe user 's browserand the server sidethe machines that feed the content into the page.

When the map is in place and approved, the next step is to create linear drawingssometimes called "wireframes"that reflect the placement of content on the page. This gives everyone from the client to the team an idea of where content is to be placed on each page.

Finally, the process moves to the " comping " stage. At this point, the site actually starts to look like a collection of web pages. The images and "rough" artwork are placed on the pages and some light functionalitylinks, pop-down menus , and so onare added. It is also at this stage of the process where usability issues are first identified and addressed.

We do realize that no two web development " shops " approach this process the same way. To accommodate this realization, we are going to present a series of techniques that show, in a general manner, how one can produce much of the work generated in this chapter. This way you can use our technique or modify it to reflect your way of doing things. If you are interested in how we approached these steps with the Oakbridge Community Center, the appropriate files are available for download from the book's site.

The Macromedia Studio MX 2004 contains a rather complete, yet unheralded, selection of storyboarding, linear, and comping tools. Having visited a number of user groups and spoken at a number of conferences, it is common for us to hear people say, "Gee, I didn't know you could do that in Freehand" or "Cool. Fireworks lets me do that?" As you may have guessed, your two primary modeling tools are Freehand MX and Fireworks MX 2004. Dreamweaver MX 2004 is used simply for assembly, though we are going to show you how to turn Dreamweaver's site map into a deliverable .