Wireframing With InDesign and Illustrator

HTML/CSS

Since many of the products and services we work on are Web-based, HTML is a good option. HTML tools are inexpensive and offer a range of features. We’ve used Dreamweaver®, BBEdit®, TextWrangler™, and TextMate. For the most part, we stick with Dreamweaver or TextMate.

There are two major disadvantages for us: You can’t write notes on your HTML or Ajax screens, and most of the visual/graphic designers we work with aren’t HTML/CSS gurus. Shocking, I know, but true.

Pros—Low learning curve, inexpensive, platform independent, ability to use include files, instant prototypes, ability to produce useable, useful, and beautiful artifacts.

Cons—Can’t write on it, not appropriate for most of our consumers.

InDesign and Illustrator

Let’s face it, Illustrator is a drawing program. Always has been, always will be. And InDesign was created for page layout and documentation. So, they’re automatically at an advantage. Illustrator is widely used, and InDesign is quickly gaining market share.

All is not perfect in the world of InDesign and Illustrator, however. First, since Illustrator doesn’t support multiple pages or have multiple masters, we need InDesign. But we can’t use just InDesign, because it doesn’t offer the level of fidelity we need for our drawings.

Fortunately, Illustrator has symbol libraries—like stencils in Visio or OmniGraffle—and InDesign has true master pages. And their ability to produce high-quality artifacts gives them a leg up on the competition.

Pros—Affordable, works on a Mac, exports to PDF, vector drawing capabilities, stencils, master pages, paragraph and character styles, ability to produce clickable prototypes.

Cons—Medium learning curve, more expensive than OmniGraffle.

A Basic Overview of Our InDesign and Illustrator Framework

When I initially developed this framework, I took the approach often used in building a Web site. The common components are made into include files. Those include files are included in other files that get published to the final product. This increases productivity, reduces maintenance, and ensures consistency throughout. This is especially true when more than one developer works on a site or application.

We start with a structure like that shown in Figure 1.

We have a directory labeled 2.3 Wireframes, which includes an Artwork folder and a master wireframe template file. The Artwork folder holds all the Illustrator files. Each file is named using a figure reference number—for example, 0.0 Home.ai. Patterns use a similar naming structure, but begin with a p—for example, p17 Search-AJAX.ai. This is important for keeping track of the illustrations as well as referring to the different screens and patterns in the wireframe deck.

We use Illustrator for the majority of the screen illustrations, which are includes, and use InDesign to pull everything together and add behavior notes. By leveraging InDesign master pages, we can include different navigation models and patterns on the appropriate screens.

InDesign maintains links to included Illustrator files. So, when you update one of the Illustrator files—like the Shopping Cart pattern—all the InDesign screens including that pattern are updated—just like an include file on a Web site.

This allows us to make edits on the Shopping Cart master screens that will update all Shopping Cart screens without affecting the other screens. This is similar to backgrounds in Visio. One advantage InDesign has is that, on any given page, you can break an object’s connection from the master and edit it without affecting the master page. So, changes flow down from the master page, but not back up to the master.

General Tips

These six tips can save you time and unnecessary headaches. The use of patterns, master pages, and symbols has literally shaved days off our turnaround time.

1. Get organized. Create a document/folder structure that makes finding the document and illustration files quick and easy. We include the figure reference number at the beginning of each file name and use descriptive titles. This is especially important when working in a collaborative environment.
2. Version control. The simpler the better. You probably don’t need some fancy subversion system. Using Adobe® Bridge is a great way to keep track of versions. Or if you want something simpler, like we do, copy the current version of your document to an Archives folder and increment the file name/number. We use a dot (.) notation system. For major updates, we increment the first number—for example, 1.0–2.0. For minor updates, we increase the dot notation—for example, 1.1–1.2. It’s simple and effective.
3. Back it up. Disaster proof your work. Hard disk space is cheap, and there are plenty of backup programs out there. But losing several months of work is costly. There’s no excuse for not backing up your work.
4. Use patterns. They’ll save you time and ensure consistency throughout your design. Include these pattern files in your master document. When you update a pattern illustration, it will update throughout your entire wireframe deck or behavior-design specification.
5. Use master pages and backgrounds. When you update something on a background or master page, it will update throughout the document.
6. Use stencils or symbols. Just like patterns, this is a huge time saver and will ensure consistency in your design. 

Stay Tuned

The next articles in this series will provide in-depth details:

• “Illustrator Basics: Maximizing Illustrator for Wireframing”—I’ll cover productivity tips like styles and symbol libraries and how we use Illustrator to storyboard RIAs (Rich Internet Applications).
• “InDesign Basics: Maximizing InDesign for Wireframing”—I’ll cover a number of productivity tips and ways to use InDesign in a collaborative work environment.
• “Pulling It All Together: In Practice”—I’ll do a quick recap and then provide a detailed walkthrough of creating a wireframe deck using InDesign and Illustrator.

Todd and I have agreed that he should publish the remaining articles in this series on his blog.—Pabini Gabriel-Petit, Publisher and Editor in Chief