Wireframing With Illustrator and InDesign

I design all of my wireframes in Illustrator. The main reason: I know how to use Illustrator extremely fast. Like seriously mind-bending fast. I don't use UI kits, ready made templates, I just open it up and start powering through ideas. Drawing all of my own buttons, icons, etc.

Illustrator starts off as my digital sketch board. For 95% of the things I wireframe, I start with mobile first. This constrains my designs to a tiny viewport and helps me go even faster.

A Clean Slate

Ah, just look at that beauty up there. The possibilities are endless. And that's the problem. You need more focus, so we're gonna bring in a tiny rectangle to work with. Here is an iPhone outline that we'll use to get started. This helps frame the context for your wireframe designs.

Despite how cool all of those Dribbble wireframe and blueprint mashups look, don't be tempted by the forbidden fruit. That's not what wireframing is about. There is a balance. You want it to look good of course, but this is not a work of art, it's function over form at this point.

A Dirty Slate

Here's an example of some screens I put together for a recent project.

You'll notice that it looks like someone vomited all over the canvas. Admittedly so, I let this one get out of hand for a while.

But no worries, it'll get fixed later. I start off by rapidly producing screen after screen in a linear fashion that tells a story. Then sit back, think through the flow, what I'm trying to accomplish, and decide if what I've created achieves the goal without unnecessary fluff.

Start off by creating one main document. project-wireframes-v0.1 works great. As you move through more of the project, you will ultimately come to a point when you'd like to share your screens with someone else - client, coworker, your mom.

Organizing and Sectioning

This next step can be a little tedious at first, but with a little practice and elbow grease, you'll get it in no time. You're going to start creating chapters and individual pages. For example, Search might be it's own chapter that includes 10-15 screens. So the formatting would look like this:

Chapter 01 - Search

• 01.00.00 Search Landing
• 01.00.01 Search Landing Error
• 01.00.02 Search Landing Notification
• 01.01.00 Search Results
• 01.01.01 Search Results Selected
• 01.02.00 Search Result Quick View

The syntax I'm using is Chapter.Screen.View. In the above example, the first three bullets are all Chapter 01, Screen 00, and alternate views of that same screen. Whereas "Search Results" takes on a new screen, becoming 01.01.00. "Search Results Selected" might be 01.01.01. Make sense?

There is no rigid industry guideline that you need to follow here, it just needs to make sense for you and your project and the story that you're trying to tell. You will no doubt have to refactor and renumber sections as you go. That's just part of the process.

Splitting up the Files

Now that you've got a basic number system in place, this is when we start saving each screen as its own individual .ai file. When you do this is totally up to you, but I like to design a fair amount of sections before getting to this point. In fact, the only reason you need to put your files in individual documents is for presentation purposes. So investors, clients, and others can make sense out of things.

With your large document open, copy and paste each numbered screen into its own new document. This will be our "paste" document. You want to make sure that each screen you save as a file is in the same position so it imports into InDesign without alignment issues. More on this in a bit.

Create some guidelines for your new paste document and position your screen accordingly.

Now that things are nice and aligned, save your file as 01.00.00-screen-title-des. Or, if you have another preferred naming convention go for it. I just recommend the numbering first so things are nice and tidy when viewing in the finder. Plus the addition of the screen-title and desc help you make sense of the file rather than the numbers alone, without needing to open it up.

Rinse and repeat this process for each section, until you end up with something like this.

Fire up InDesign

I've created a basic template for organizing my illustrator files in InDesign.

1. Title
2. Project Overview
3. Table of Contents
4. Section Title
5. Screens
6. Repeat 4 & 5 as necessary
7. Revision History

For pages that have screens, just place the corresponding .ai file into location and fill in the information accordingly.

To create new pages, just copy an existing one, replace the ai. file and update the info in the side bar. This is great for making edits, because the .ai files can be opened, edited and saved, which update automatically in your InDesign document.

You just need to update some info on the master pages for your project, as well as the Numbering & Section Option to suite your needs. (Right click on any page to do this.)

Once you've got everything in place, sections and table of contents updated, just hit cmd+e (or file > export) and save as a PDF.

I've used this same template as a starting point for multiple clients. Every time, they've loved the structure and organization. It's a huge value add as a deliverable and helps presenations go more smoothly.

Your Moment of Glory

If you have a project that needs organized wireframes, I highly recommend this technique, especially if you are comfortable with Adobe products.

To help you along your path, I've bundled my Illustrator and Indesign Wireframing Starter Kit and have it available for FREE below. Take a look at the sample PDF to see how your project will look by using the source files.

What's included

• A custom InDesign template
• Sample Illustrator CC (and older) files
• Sample PDF of exported project
• A .idml file for older versions of InDesign

If you were to create this file from scratch, how long would it take you? A day? 2 days? Save yourself the trouble and get this file!

If you're new to Illustrator, check out my post on understanding vector shapes. Also, if InDesign is too much work for your project, I've also covered whether you should use Artboards or InDesign.

Thanks for checking this out. I hope you found it helpful and let me know if you have any questions.

For further reading on using Illustrator for UX design, checkout my new blog post series, AIUX.