Wireframing With InDesign and Illustrator
Published: January 8, 2007
There are a variety of tools used for interaction design. I’ve used them all and have settled on a framework using InDesign® and Illustrator®. It will require a series of articles to fully describe the framework I’ve developed. So, in this article, I’m going to focus on what led to the development of this framework and give you a brief overview.
With all the wireframing tools out there like Visio®, OmniGraffle®, Illustrator, InDesign, Flash®, Fireworks®, and HTML/CSS, why create a framework based on InDesign and Illustrator? Design solutions are about context. So, let’s start there.
My company, Messagefirst, provides research and design services for other companies. Our consumers are typically product managers, software engineers, and visual/graphic designers. Most of the time, they want something tangible to take with them, write notes on, and use to build their product or service. In our experience, a final artifact that is a PDF works best. It’s easy to post to project sites like Basecamp. It’s easy to email. And it’s cross-platform compatible.
We’ve tried all of the previously mentioned tools—some more than others. The InDesign/Illustrator framework I’ve developed meets our wants and needs best. Why not use HTML/CSS? Occasionally, when working on our own products or services or with a Web 2.0 company, we will go straight to HTML/CSS wireframes. But since most of our clients like something they can write on, we opt for the PDF route.
When selecting a solution, we based our decision on the following seven criteria:
- collaboration—We work on large, complicated projects. Our design solutions make the complex simple, but there are typically several hands in the mix. We need a system that allows multiple designers to contribute to one final source without overwriting each other’s work.
- document management and versioning—We use an iterative approach, and our designs evolve over time. Hence, our documents are versioned. We need something that allows for versioning and provides a way to communicate the history of those changes to the product managers, software engineers, and visual/graphic designers—our consumers.
- separation of design and behavior specifications—It’s not unusual for us to use our wireframe decks as the springboard for paper prototypes. We need something that allows us to include behavior specifications with the illustrations, but we need to be able to turn off those notes for a quick paper prototype output.
- productivity—Call it lazy; call it efficient and working smarter—we don’t like to work any harder than we have to. We need something that allows us to work faster, smarter, and efficiently. We’re huge patterns advocates. We use them in our designs and in our artifacts, and we need a model that allows for that.
- useful, usable, and beautiful artifacts—We take a great pride in our artifacts. We have invested a significant amount of time and effort into making them useful, usable, and beautiful. Aesthetics are part of making useful and usable artifacts.
- affordability—To us, an application license of $1200–$12,000 per person isn’t affordable. Depending on its capabilities and how it fits our needs, $49–$299 is a fair price. But an application that costs several thousand dollars just isn’t affordable to us.
- platform independence—This last part is critical to us, as we’re a Mac® shop, and our clients include a mix of Windows®, Linux®, and Mac. So, we need something that works regardless of what platform the consumer is on.
What We’ve Tried
While I don’t have time here to do a comprehensive comparison of all the tools we’ve used, here’s a brief comparison of some of the more common ones.
Originally designed as a diagramming tool, Visio is one of the most common tools for creating wireframes or behavior-design specifications. Its integration with other Microsoft® tools is an advantage for many corporate customers, but doesn’t provide a benefit for us—we’re a Mac shop. So, that’s automatically a strike against Visio.
We also find the interface and interaction of the application too clunky. Ever tried to navigate a 70-page Visio document? Those tabs aren’t the most efficient model. On the positive side, the stencils and backgrounds are useful productivity tools in Visio. However, backgrounds in Visio aren’t as flexible as master pages in InDesign.
As for being able to produce beautiful artifacts with Visio—well, Dan Brown is the only person I’ve ever seen who could do that. Personally, I equate using Visio with drawing using a large piece of chalk on butcher paper that’s been placed over a bed of gravel—it’s primitive and painful.
Pros—Medium learning curve, widely used, exports to PDF, vector drawing, clickable prototype capabilities, VB scripting, stencils, backgrounds.
Cons—Not available for the Mac, expensive, clunky interface and interaction, lack of master pages, difficult to produce the quality of artifacts we need.
Think Visio’s hipper kid brother for the Mac. OmniGraffle does almost everything you’d ever need from a vector drawing/diagramming tool for under $100.
OmniGraffle has a better page navigation model than Visio and includes stencils and backgrounds like Visio. It’s still a bit primitive for our needs, but the reduced clutter in the interface makes it easier to use than Visio.
Pros—Low learning curve, inexpensive—free with professional line Macs—works on a Mac, exports to PDF, vector drawing capabilities, stencils, backgrounds.
Cons—Lack of master pages, poor typography, difficult to produce the quality of artifacts we need.
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.
Figure 1—Directory structure
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.
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.
- 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.
- 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.
- 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.
- 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.
- Use master pages and backgrounds. When you update something on a background or master page, it will update throughout the document.
- Use stencils or symbols. Just like patterns, this is a huge time saver and will ensure consistency in your design.
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