I'm giving away Adobe CC free for a year + full access to my AIUX course.

Wireframing With Illustrator and InDesign

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

new illustrator document

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.

iphone outline

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.

big canvas with lots of screens

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.

search wireframes

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.

multiple sections

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.

blank ai

pasted ai

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.

saved ai

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

illustrator files in finder

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

indesign template one

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

placed files

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.)

numbers and sections 1

numbers and sections 2

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.

export

save as

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

what's included

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.

mds

Matt D. Smith

comments powered by Disqus