Wireframing With InDesign and Illustrator

By Todd Warfel

Published: January 8, 2007

“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.”

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.

Our Needs

When selecting a solution, we based our decision on the following seven criteria:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

Visio

“Originally designed as a diagramming tool, Visio is one of the most common tools for creating wireframes or behavior-design specifications.”

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.

OmniGraffle

“OmniGraffle—Think Visio’s hipper kid brother for the Mac.”

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.

HTML/CSS

“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.”

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

“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.”

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

“We use Illustrator for the majority of the screen illustrations, which are includes, and use InDesign to pull everything together and add behavior notes.”

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

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.

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

50 Comments

OmniGraffle Pro does have master pages. Though it is more simplistic than Visio, I’ve found it to be more than a suitable Visio replacement since switching to Mac. As with all tools, I suppose that one’s choice of tools depends on individual wants, needs, work patterns, style, etcetera.

I can see the attraction of InDesign, though. I may have to give that a shot sometime!

OmniGraffle not having master pages? Maybe you were using the free version, but the pro version definitely has master pages. Multiples, in fact. True layers as well, along with excellent transparency controls. Typographic controls include kerning, leading, margins, whatever. I strongly suggest you consider OmniGraffle again.

Have to take issue with your characterization of OmniGraffle. Sure, the $80 Standard Edition doesn’t have master pages, but the $150 Professional version does.

OmniGraffle Pro does have master pages; however, my comments are on OmniGraffle, which comes free with the Pro Macs or is around $80 purchased separately. It does not have master pages.

Additionally, I’m not aware of any way to break the connection of objects from master pages and edit those on a single page without having to edit them on the master page. I just tried it in the Pro version. This makes OmniGraffle Pro master pages similar to Visio backgrounds, which while helpful, isn’t as productive.

As for Joe’s comments on typography controls, they are a must have for us. The quality of our artifacts is one of our advantages over our competition. So, while they’re not important to you, they are a deal breaker for us.

By the way, we still use OmniGraffle occassionally, but concentrate our work in InDesign/Illustrator.

And here I thought we were the only ones doing this. :)

Nice writeup! Looking forward to the next installments.

Great article. I’m afraid I’ve got to jump on the bandwagon: As stated above, OmniGraffle Pro does include master pages. It’s typographical controls are improved, but still lacking compared to Illustrator or InDesign. For example, it doesn’t have character or paragraph styles—a fact that routinely drives me nuts.

That being said, I prefer to keep my wireframes as simple and free of design decisions as possible. The typographical limitations help to keep me focused on the job at hand. I understand that as a contractor, your needs are different though. If strict typographic control is of high importance, I’m not sure OmniGraffle would suffice.

I have to take issue with this statement about Visio:

“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.”

While I agree that Visio is a terrible tool for this purpose, the fact that it integrates with Microsoft tools should not “automatically [be] a strike”. That just sounds biased.

Do the integration features get in your way? That’s something worth losing points over. Otherwise, that particular aspect should come out neutral—at worst.

Can you recommend an Illustrator symbol library to replace the Visio UI component stencils—either high-fi or low-fi? So far, all I can find is a library integrated in Illustrator, which contains fancy buttons, but lacks useful things like scroll bars, radio buttons, sliders, dialog boxes, etcetera. Thanks!

My company, Kern, provides usability and design services to software product companies and other usability consulting companies. We do produce lot of wireframes in the process.

We were looking for a solution that offered:

  1. available on Windows and Mac
  2. inexpensive
  3. quick to draw and redraw wireframes with precision
  4. no extra software needed for sharing
  5. one could present concepts anywhere

Strange, yet true—we have been designing wireframes in Microsoft PowerPoint for some years now. I am no advocate of Microsoft products, but PowerPoint has not only met our expectations, but surpassed many. You can quickly share the slides for a presentation or a review. Clients love it, as they can quickly show and comment on the slides.

Here are some examples of PowerPoint wireframes that I can share—all GIF images:

  1. Sample 1: A small Web-based application
  2. Sample 2: Another small Web-based application
  3. Sample 3: A Web-based call center application

Peter, my comments were regarding OmniGraffle, not OmniGraffle Pro. Additionally, the master pages in the Pro version do not provide the functionality InDesign offers. You cannot break an object’s connection from the master page to edit it. You have to edit the master page, which defeats the purpose. An example is with subnavigation. I can have a My Account screen that has the subnavigation for My Account displayed on the master page. In InDesign, I can break the connections of the subnavigation items and highlight one to show that it’s on. You cannot do this with OmniGraffle Pro or Visio.

OmniGraffle master pages are really like Visio backgrounds. They don’t work for us.

Chris, since we’re a Mac shop and Visio is Windows only, it’s a strike against the application for us. As stated in the article, for many corporate clients—typically Windows based—it’s a benefit. But since we’re a Mac shop, Visio isn’t a good option.

Bettina, I’m going to provide an Illustrator symbol library with GUI widgets in high-fidelity with the next article, which is about Illustrator.

OmniGraffle has so many templates that speed up your wireframing, it’s silly to use a tool like Illustrator, which requires you to do everything from scratch. I don’t agree at all with this assessment.

Also, do you really need a lot of detail to make wireframes?! The level of detail is not important for wireframes, overall substance is. If you’re going to spend all this time building wireframes, you might as well implement it in CSS! It would probably take you less time.

Just get OmniGraffle wireframing templates from http://graffletopia.com/ and you’re good to go.

Mike, it’s not silly when you have a symbol library for Illustrator that has all the GUI widgets for wireframing in it. Additionally, we maintain a patterns folder, which has all of our pattern templates already created in it. That’s a huge time savings. And as stated in the article, that’s something that’s a requirement.

Perhaps for you the details aren’t important, but for us and our clients they are. That’s one thing that separates us from our competition and continues to keep our clients coming back to us.

The symbol library I’ve created will be included with the next article, which is about Illustrator.

Mike,

I have to disagree with your comment about wireframes not needing a lot of detail. There are times when a quick sketch on a napkin is all that is needed to articulate an idea. But most of the time—at least for projects I have worked on—the wireframe deck becomes both the guide for what the design team needs to design, as well as what the development team is actually going to build.

These tasks do not typically happen via a waterfall method. There is some level of overlap, so our wireframe deck needs to serve these two very different audiences. They also need to make sense to the business team or product management team, so they know what is actually being designed is what they expect.

This cannot be articulated with a rough sketch, so we need to have the screens, any transitions—Ajax or Flash—any user interface patterns, and behavior notes that make sense to all the audiences. It’s a lot of information, but it actually makes projects move more smoothly.

Todd,

Thanks for your article. As with most people involved in IA work, I’ve used all the main tools, and because I’m a Mac user and not totally keen on OmniGraffle Pro, I’ve recently been learning how to use InDesign for wireframing. Couple of questions I have though:/

951561e877bca783efe606d0d1c22b63

One last thing… In Visio, I find the Drawings Explorer a much more efficient way of navigating than using the tabs, but still, it sucks that you can’t create any kind of hierarchy to represent site structure.

We use an 11x17 format in landscape mode. That provides plenty of real estate for the screen designs as well as a column on the right-hand side for behavior notes.

Our naming convention includes the figure reference number, followed by the functional area and a page description. For example Fig 6.0 My Account - Landing Screen.

InDesign is great for building wireframes, but it lacks some of the convenient stencils that both Visio and OmniGraffle have. So, I decided to start my own stencil library in InDesign, containing frequently used form fields, etcetera. Here’s the GUI Stencil Library for InDesign.

I’m just getting into wireframing, used to jump right into Photoshop and start designing. Created my very first wireframe, for a small project, in Illustrator and quickly realized that I need multiple pages. Having purchased the Adobe Creative Suite recently, InDesign was available to me, so I started doing some tutorials. This all happened last weekend.

What I’m trying to say is that this tutorial couldn’t have come at a better time. Thanks a lot, Todd!

I’ve been using Visio to create wireframes for at least three years now. It’s taken me a while, but I finally have a system that makes wireframe creation fast and effective in Visio. Not sure why it took me so long to discover the advantage of the document explorer! Some macros that others have created like “copy page” and “copy page to doc” along with a few that I have created have also made it a lot easier to use. Another advantage is easy Web protoype creation—when background pages are layered and used effectively.

Nice article. One of the things that I really love about InDesign is the power of its Table feature, especially the way that it lets you integrate graphics into tables essentially as if they were text characters.

I really look forward to the followup articles and to reading this one more thoroughly. My previous efforts at using Illustrator-created elements in my InDesign wireframes were less than successful, but that is probably because I was just learning the software. It is great to get this sort of guidance, since the InDesign books and resources I have found really don’t deal with this sort of workflow.

Andrew, thanks for the stencil library.

Hi Todd, Nice article. However, I can’t really follow your logic. You end up using a combination of Illustrator and InDesign, which which costs about 2000 Euro. That is by far the most expensive one!! So that definitely violates you requirement number 6, affordability.

I am not an expert in InDesign, but in terms of productivity, the advantages of InDesign such as master pages and breaking object connections, Visio can do the same thing. But you do it differently by breaking connections with stencil objects. But still, I hardly ever do that in Visio. There are also other ways of navigating to pages. You can use the Drawing Explorer, which lets you go directly to a page.

The last thing I don’t understand is what is wrong about the output of Visio. Visio is simply a tool and doesn’t make ugly stuff. If you don’t like the default settings, you can create your own stencils with your preferred objects, and there you go!

One other very strong pro for Visio and con for InDesign is that I can create clickable wireframes very easily in Visio. I only have to maintain one wireframe document and produce a good-looking PDF or a clickable prototype. Awesome!

Anyway, I’ll switch to a Mac as soon as Visio for the Mac is available. Nonetheless, I’ll be looking forward to your InDesign articles and let myself be convinced. ;-)

I’ve used three sets of tools over the years to create wireframes. Visio, Illustrator/InDesign, and most recently, Axure RP. I admit that Illustrator/InDesign is the most powerful and flexible general design tool, but the time investment needed to make this platform suitable for wireframing is so much greater that it is really justified only when deadlines are not tight—read never.

So I’ve mainly used Visio for years, which is a fast and intuitive option, in spite of the flaws mentioned previously. However, I just started using Axure RP, and I don’t think I will go back. Finally, we have a tool that was designed to make wireframes and it generates HTML prototypes. I urge you to compare this product as well.

I tried Axure Pro recently as well. Must say, it’s a fresh new tool that I like extremely much and, as Jesse says, it makes working faster with neater results.

My colleague Christopher Harrington and I were discussing ideas as to how information architects and designers can work more efficiently together. One solution is to adopt Fireworks as both the IA layout tool as well as the design platform. For IA work, not only does it have the ability to use vector and raster shapes, but you can also use it to wireframe and design on the component level or save reusable elements. Master documents can reference shared asset libraries and can streamline the process entirely. For the designer, it saves countless time in having to essentially re-layout the same elements of the page. You also really can’t find a design layout program more lightweight and efficient than Fireworks.

Martijn, thanks for your comments. Adobe CS runs around $1k to purchase or $299 to upgrade. It’s not cheap, but it’s affordable, and considering that CS comes with InDesign, Illustrator, Dreamweaver, and Flash—or some other combination once Adobe announces the new set—that’s pretty good. That’s about $250 a product, which is less than Visio and more flexible. Many companies use InDesign for reports, something you’re not going to do with Visio.

On the comment about what’s wrong w/Visio output: As I said earlier, it doesn’t generate the quality of deliverables that we’ve become known for and expect from a product. It’s fine for many people in the industry, but isn’t good enough for us.

Additionally, you can create a clickable PDF with InDesign as well. As the article states, one of the pros of InDesign/Illustrator is the ability to create clickable prototypes.

Jesse, thanks for bringing up Axure Pro. Another tool that generates HTML prototypes is iRise. Both of these tools show promise. One word of caution, however, the code generated by both of these tools is not recyclable during the development process. Some people are okay with that, while others have the expectation that their development team can reuse the code.

The cost of Axure and iRise is prohibitive for us. We’ve run into installations of a few hundred thousand to over $2.5M for some corporate clients.

Additionally, they don’t meet our requirements for quality of output. Their quality may be acceptable for some environments, but it’s not for ours.

And as for the InDesign/Illustrator model not being suitable for tight deadlines, we’re regularly in the habit of turning out updates with 20-40 changes in under 2 business days. So, we’ve actually found that it’s better suited for quick turnarounds. There was some initial investment to get there, as is the case with any tool.

This solution might not be right for everyone, but we want to make others aware of this very viable alternative.

Stay tuned for the next articles.

Anthony, that’s another great model. Admittedly, my personal experience with this model is limited, but I do know a few colleagues and clients who are having great success with this model.

Wow. I can’t believe we still haven’t come up with the perfect product for UI work.

I’ve used all of the above —and still find myself using a marker and dead trees to crank out fast UI mockups.

I go back and forth between Illustrator, for high-quality UI mockups, and Visio, for fast ones. I am surprised no one has mentioned the Zentall GUI library for Illustrator. I am sure there is a version on the W.eb somewhere. It is fantastic.

We use OmniGraffle mostly for our documentation. A few points… While having master pages, you cannot base one master page off another like in Visio. The OmniGroup told me they are working on that feature. The deal breaker though is collaboration. Sharing the work using Omnigraffle just doesn’t work, using InDesign and Illustrator—or just InDesign—solves the updating and repackaging issues we face all too often. Meaning, I can have one designer working on pages 2-5 and another on 8-14 of a document and it is fine. Also, when a pattern is updated in one place, it updates in all places. If I’m wrong about OmniGraffle, please, tell me how to do it!

AK, Gabe Zentall took his GUI library offline some time ago. I had created a similar GUI library a few years before Gabe when working on a syndication platform and was surprised nobody else had done this yet. I no longer have the library I originally created—lost after upgrading my computer too many times—but I do have a symbol library for Illustrator, which is coming with the next article in this series.

Hey Todd

Thanks for the feedback. I am very interested in where you are going with this article. I am really tired of the cludginess of Visio and the time intensiveness of Illustrator.

I do have Gabe’s wonderful library, if you would like me send you a copy.

Please let me know when your next article is posted on this subject.

I still think there is room out there for an application that is specifically for UI design and rapid prototyping. Axure is a step in the right direction, but still not quite.

Fireworks works really well for wireframing, too. I have used it for years with great success.

Nice tutorial, but I just find Illustrator and InDesign too much for wireframing. I’m using Inkscape. Here is a little tutorial on wireframing with Inkscape that I wrote.

Todd,

Great article (she responds much later… :)

Our company is currently using both Visio and InDesign—InDesign for smaller, highly collaborative projects or phases between our UX architects and our visual designers, and Visio for large projects with heavy client collaboration—where the client serves as the business analyst, for example, since he/she is more likely to have Visio. This is really helpful to bridge the feature gap.

Two things I’d like to find out more about to complete our feature comparison:

1) Dave asks this above, but I didn’t see your answer. How do you name pages in InDesign, in the page list? All I see are numbers, and I can’t find a method for entering codes like “2.0 Survey Setup variation 3.” We frequently work with wireframe documents of over 100 pages and need to distinguish them quickly.

2) The differences in file size also seem very prohibitive. I found a 12-wireframe Visio document to be 540K; a 12-wireframe InDesign document was 7,540K. That means one of our largest documents—which was 200 wireframes—would have been 130 MB in InDesign—very hard to manage, especially in those client-collaborative sessions where you’re trying to send files back and forth.

I’d love to hear your thoughts on these.

Best regards, Carolyn

Carolyn,

First, each page has a figure reference number, followed by a descriptive name and a page number. Currently, that is maintained in a document index, which is at the beginning of the file.

Right now, we manage that manually, which is painful. However, I’d like to find a way to script it. And no, using InDesign’s table of contents (TOC) won’t cut it for us. We need the figure number, descriptive title, and page number, which its TOC doesn’t do.

As to your second question, our files rarely go over 12MB in size. Most of them are around 5-7MB. The largest was around 12-15MB, at a couple hundred pages. Part of that probably has to do with reusing components and placing Illustrator files in the InDesign file rather than doing all the drawing inside InDesign.

Either way, I’m more than happy to deal with a 5-15MB file with InDesign. Storage space is cheap.

By the way, the final output PDFs generally come out to 1-3MB in size.

Thanks for the nice overview. I have been using InDesign for all of my IA since its inception. While I don’t use Illustrator&#8212since I’m really the only one working on my documents, I don’t have to share&#8212my workflow seems very similar to yours. I’ve built up large libraries and templates that stay consistent from document to document, allowing me to build site maps and wireframes very quickly. Updating is also easy.

I also dislike InDesign’s TOC and build my own by hand.

Nice article.

I’ve been using Visio for years and have been frustrated with its forced precision. Many times, I want to communicate “sketch” to stakeholder, but Visio doesn’t make it easy. Does anybody know of any stencils or techniques I can use to create less, not more, precise sketches in Visio?

I am very much new to design software like Visio, Axure Pro, and so on. I am trying to develop wireframes with Microsoft Office Publisher 2007. I don’t know how feasible it is, but need some comparison features between those and Publisher. Thanks.

Steve, here’s a free, sketchy Visio stencil.

I may be speaking from the vantage point of a person slightly intimidated by inDesign, but I’ve seen the opposite problem to what Todd describes in terms of wireframe fidelity: inDesign wireframes that are too pretty. It is so tempting to impress clients with gradients, drop shadows, and grayed-out clip art.

It takes discipline and, frankly, a little courage to leave out all but that which is necessary to convey the logic behind the architecture. But going with the best/worst prototype saves time, makes it easier for other IAs to quickly contribute, and gives designers greater freedom, because they are not merely filling in your pixel-perfect wireframes.

I think it’s relatively easy to create fine-looking prototypes in Visio.

That said, I may end up switching to inDesign. It seems to handle pagination better, and I’m intrigued with the possibility of adding rich interactions to clickable PDF output.

—Roy

Todd,

Nice article. Thanks. :-)

How do you manage to lay out pages that are longer than the standard letter page? I’m using the GUUUI Visio template, and with it, pages can scroll endlessly.

Klaus

Hi Everyone. Nice article. I am working as a Graphic Designer in site architecture with Adobe Illustrator (I may provide basic icons) and keep on your minds Corel Draw!, which is extremely flexible, multi-page, has the ability to export to PDF, and the creation of symbols among others. If interested, please write me, since I also have some symbols for Corel Draw! fans.

Thanks

Juan

Some wireframes and stencils for Blueprint and Extjs are available:

Extjs Wireframe for Adobe Illustrator

Blueprint Wireframe for Adobe Illustrator

I’ve been using multi-layered Illustrator files to handle prototypes for the Web designers, and usually, it gets very messy. My instant thought was, being a graphic designer: Aren’t InDesign character styles and object styles, in fact, similar to the CSS content-style coding logic?

So, it seems possible to use a desktop publishing tool for Web site prototyping. Though I haven’t tested it yet, I look forward to an article about it! It would be of great help.

Get those other two articles done, man!! This is great information, and we are still trying to feel out the solution and how it fits our needs.

For a review of various tools—including several mentioned here—check out: Review: 16 User Interface Prototyping Tools.

Hope it helps as a supplement to this article.

Love the series of articles so far…

But how do you make drop-down menus in Illustrator/ID? I’ve made buttons in ID, but not drop-downs… Help!

This is great information. I love using InDesign and Illustrator anyway. I started using OmniGraffle, and it’s pretty decent, but to be able to use a program I have already mastered is great. InDesign has some great uses. I started using it for laying out trade show graphics like pop-up displays, banners, and the like, and it handled everything quite well. This system seems to be a great idea.

Here is a new one: Justinmind Prototyper. it’s completely free and great for building clickable mockups for Web and mobile apps. It has a good collaboration feature as well.

Rich libraries of stencils are key for wireframing apps. That’s why OmniGraffle rules supreme. If stencils aren’t important—say, because you have your own library and it’s more important to be able to output your wireframes to interactive HTML prototypes, why not use Edge—or Flash, while it’s still alive.

Join the Discussion

Asterisks (*) indicate required information.