Creating Killer Web-Site Blueprints
By Christopher Schmitt
Usually, when I begin a new Web project, I use paper and pencil to sketch out the site's scope. In the past, I used Adobe Illustrator to create vector-based site maps that looked great but took time and effort to maintain links as development progressed. The larger the site structure, the harder it was to maintain the outline.
Inspiration is a visual tool targeted primarily at educators, which lets you map out site architecture. With Inspiration, you use symbols to represent the key points of the Web site, such as primary and secondary pages and hyperlinks. You use links—lines that connect symbols—to show how ideas and concepts flow and relate. Inspiration is like a visual plotting tool that helps you see interdependencies between links and pages. It's been a part of my Web-development toolkit ever since I saw its power firsthand.
When you first open the program, you start with a blank page and an empty cluster—Inspiration's way to identify groupings of ideas—waiting to be filled in. The software comes with predefined templates, such as bubble diagrams, but most of these aren't geared for sophisticated site maps. You can, however, save a file as a template for reuse.
A key timesaving feature is the ability to link between symbols quickly using the F9 key. Once you finish typing the description of one symbol and you're ready to jump to the next idea, simply press F9, which creates a red thunderbolt symbol right after the text. This represents Inspiration's trademarked RapidFire method for capturing links between related ideas, letting the user follow a brainstorm and not get bogged down by organizational details.
You can also create symbols one at a time by using the Symbol palette. Clicking on the symbols immediately places them in your document. You can then link the document by first clicking the Link option in the Diagram toolbar, then clicking the From symbol, then the To symbol, and a link is created. Move the symbol around to where it makes sense, and the link moves with the symbol.
I'd already mapped out some portions of the site structure for a recent pet project called Roundsearch—a central repository for my commonly used Web sites such as search services and resources. I was able to use the RapidFire linking method, and after several minutes (as opposed to the hour and half that I'd typically have spent in Illustrator) I came with a coherent plan for Web development.
Once you have the site mapped out, Inspiration provides a few nifty surprises. First, you can create an outline view of the map structure with a click of the Outline button in the Diagram bar, or by switching the View option. And you can export the document to Word or WordPerfect. Another keen feature is the option to put checkboxes next to symbols by choosing the checklist view for your project. So, as various stages of development are completed, you mark off areas that you've finished. The checklist option is available in both Outline and Map views.
Also, with the map you can insert URLs into sections and export the map as Web pages to use as an active blueprint during Web construction. For Roundsearch, I created the folder structure and blank HTML pages to make what I call a "blind site"—a site without content, but with basic navigation in place. Then, I inserted links to the different sections into the Inspiration map file. After that I exported the site map as a Web page. I can now click to any area of the site at once to check on the site's development.
Inspiration does have a few drawbacks. It lets you place up to four key points on links manually, but this is a very clumsy way to curve lines that connect symbols in the site layout. It's hard to show multiple or redundant links to one Web page or section. When you're dealing with site layouts on a very large scale, those types of curves can be time-consuming to create—or fix—if you don't lay them out correctly the first time. You can opt to draw lines freehand, but this function doesn't give me the type of control I need for curves. Instead it seems to convert the line as a graphic element rather than linking directly between symbols.
Inspiration suffers from a limited color palette for color coding the different sections and text colors. To get around this problem on a recent project that required an extensive site map, I had to export the map as a PDF, bring the map into Illustrator, and change the colors by hand. Also, I wish I could export the site map as a Web page using GIFs instead of JPEGs. The images that Inspiration generates for export would be better served in an image format with limited colors and antialiased text, instead of in a file format better suited for photorealistic images.
That said, Inspiration is a powerful Web development tool for mapping out professional site structures. The software itself is easy to grasp on its own without reading the manual, but I wouldn't advise it. There are a lot of features I overlooked during my first couple of uses. When comparing the relatively low cost of Inspiration to that of my old mapping software, Adobe Illustrator, Inspiration is a steal.
Christopher created the Web Design Pad—Web-safe colors arranged in a color wheel—and was the moving force behind the design magazine High Five (www.highfivearchive.com). Currently, he works for MindComet.com as a design technologist and production lead on various projects. You can reach him at schmitt@christopher.org.
