Next week I’ll be speaking at the Gilbane conference on knowledge management. I’m really excited to be presenting on how people find information in the workplace. It’s the result of some really interesting research completed last fall that exposed five unique personas based on how each of them finds information related to their day-to-day activities.
One of the greatest challenges is presenting all the information we found in a simple and succinct way. So, I came up with this infograph to try and capture and communicate what we found related to:
- Their level of domain knowledge, tool knowledge, and experience.
- Activities and tools and how much they used each of these to find the information they need and answer their questions.
- How relevant each of the themes we found were to each of them on an individual basis.
My hope is that after some initial explanation, this model serves better than a bunch of different graphs. Here’s a breakdown of how to read the graph.
- The thin grey lines – represent the entire data set for that persona for that item.
- Thicker lines – represent the majority of the data set for that persona for that item.
- Horizontal line – represent the median point for that persona for that item.
- The pink dots at the top – represent the a unique or important data point for that persona for that item, which is most important. It’s not always the highest in the group, but is one that you should pay particular attention to when designing for that persona.
- The brown dots at the bottom – represent the a unique data point for that persona for that item, which is least important to them. It’s not always the lowest in the group, but is one that you should pay particular attention to as downplaying when designing for that persona.
So, what do you think? Oh, and of course if you’re out at the conference, look me up.
Regardless of what tool you use, there are a few basic necessities for anyone creating a wireframe deck or behavior-design specification–particularly the ability to create, manage, and edit
- multiple pages or screens
- common user interface components
As I outlined in my initial article in this series, there are a number of additional considerations when choosing your tools, but these two essential elements are at the heart of every wireframe deck or behavior-design specification.
There are a number of ways to tackle the issues of multiple pages and common components with Illustrator–I’ve used most of them. Let’s look at some of the most common approaches.
Using Layers
One of the most common methods for creating and managing multiple screens and common components is through the use of layers. This approach comes from years of Photoshop experience. This is how it’s done in Photoshop, so that’s how we do it in Illustrator.
This approach allows you to have one Illustrator file, which is convenient. However, automatically generating a 50 page artifact with all the needed screens is challenging–actually, it’s impossible. And to do so manually is rather time consuming. The typical approach is something like this:
- Turn on and off a combination of layers to achieve the desired screen.
- Save or export the desired screen to a folder.
- Repeat until all the necessary screens are exported.
- Assemble all the screens into one file with Acrobat or PowerPoint.
- Save or export the file for final delivery.
That’s not the most efficient model, but it does work. I followed this model for years.
Using the Hot Door MultiPage Plugin
When I found this plugin, I thought I had found the Holy Grail. Finally, multiple pages and a master page from Illustrator. Alas, the celebration was short lived when I started having trouble exporting documents over 15 pages long. Illustrator comes to a near screeching halt and the final files are sometimes over 10 megabytes in size.
If your need doesn’t exceed 10-15 screens, then this is a pretty good solution. However, in my case, a 15-screen wireframe deck or behavior-design specification is rare. So, I continued my search for a better solution.
Using Illustrator with InDesign
While this solution doesn’t have the elegance of a single application, it does provide a number of advantages I’ll cover throughout this series. The biggest advantage to this solution is that you’re using each tool for what it was designed–Illustrator for drawing and InDesign for creating documents.
We’ve been using this solution at Messagefirst (link) for close to three years now and have found it to be superior to anything else we’ve tried–and we’ve tried just about everything.
The Problem with Illustrator
The two biggest concerns we hear from people who want to try the InDesign-Illustrator model are:
- It has a high learning curve.
- I can’t afford the downtime needed to learn it.
Let me address the first concern–the high learning curve. Illustrator is an intimidating beast. It’s true. If you want to be a power user of Illustrator, you’ll probably want training. The great thing about using Illustrator for wireframes or behavior-design specifications is you don’t need to be a power user. All you need to do is have a basic understanding of a drawing tool. You’re drawing legos, not the Moná Lisa.
In the past three years, we’ve created thousands of Illustrator files for wireframes or behavior-design specifications. And we’ve done it all using just eight tools in the Illustrator palette.
Figure 1—Tool palette
That’s it. Just these eight basic tools to do 99% of our work. If you can handle using these eight basic tools, you can use Illustrator.
Now, about that second concern–the downtime. While I can’t eliminate the downtime issue, I can help you minimize it. The productivity tips I’m going to give you are things I wish I had had when I first developed this model. If you follow these tips, you can minimize your downtime and quickly see an increase in your productivity.
The Five Keys To Using Illustrator
There are five key things to making Illustrator work for you as an effective and efficient wireframing tool: a comfortable workspace, an appropriate color palette, a symbol library, a good template, and character and paragraph styles.
1. A comfortable workspace–I like to keep my workspace as simple as possible. I close all the palettes I don’t need and open the ones I do. You can open additional palettes from the Window menu. Once you get your workspace set up the way you like it, you can save it from the menu—from the Window menu, select Workspace, then Save Workspace. Now, when you quit Illustrator, or if it crashes, you can quickly return to your comfortable workspace setup—from the Window menu, select Workspace, then [Whatever You Named Your Workspace].
2. An appropriate color palette–Part of keeping my workspace simple and clear of unnecessary clutter is having a minimal color palette. We have a standard color palette (link) we use for all our wireframe or behavior-design specification screens. Since our screens are in black and white, our color palette is based on a gray scale with a few additional colors for things like warning text and callouts.
Figure 2—Colour palette
3. A symbol library–This is one of the biggest complaints from Visio or OmniGraffle converts: Visio and OmniGraffle have stencils, but Illustrator does not. I’m including our symbol library (link), shown in Figure 3, with this article. So, there, problem solved.
Figure 3—Symbol library
Symbols in Illustrator work just like stencils in Visio and OmniGraffle. You drag a symbol from the palette and place it on the work area. By right-clicking the symbol, then selecting Break Link to Symbol from the contextual menu, you can change its size, color, or label.
4. A template–All of our screens start from the same basic template, shown in Figure 4. This template has evolved over the years and I imagine it will continue to evolve in the future. But for now, the template we begin with has a couple of key attributes:
- an underlying grid system
- an art board of 5400×1800 pixels – wide enough for multiple screens and high enough for long screens
Figure 4—Template
The underlying grid system is essential to any good design. There are a number of great resources on grid systems. I’m not going to get into that discussion here, but I have provided links to a few books at the end of this article. The ability to have multiple screens in the same file, however, is something that is key to the model we use–this is part of our secret sauce.
In the example (link), you will see five grid systems. Each of those grid systems represents one screen or scene. This is often used when we storyboard Rich Internet Applications (RIAs). To the right of each grid system, you will find a small box. That box includes the scene number and details about that screen or story-board–something we borrowed from the animation industry.
This is very important to us, because we place each of these Illustrator files into an InDesign file to create our final artifact. We treat these Illustrator files the same way you would treat an include file in a website or application. These scene numbers and descriptions help us keep track of the different screens when we’re making edits.
By using this model, we’re able to reduce the overall number of Illustrator files in use. We are also able to improve productivity. If we need to make a change in the My Account screens for an application, we don’t have to open up five different files. We can open up one file. This helps reduce the time involved in making edits and reduce the chance we’ll miss one of the files that needs updating.
5. Character and paragraph styles–Illustrator CS supports character and paragraph styles, just as word processing and page layout applications have for years. This capability is relatively new in InDesign and Illustrator—and it was long overdue in my book. By using character and paragraph styles, you can create styles for common formats in your designs like headings, button labels, form field labels, and links.
Figure 5—Paragraph styles
What’s Next?
Grab the files (552k zip) and get started! Hopefully, at this point, you’re over the intimidation factor of Illustrator. It is a beast, but it’s clearly one that’s well worth tackling and easily wrangled.
In the next article, we’re going to take a look at how InDesign fits into the equation. You won’t want to miss that one.
I’d love to hear your comments and questions about using Illustrator for wireframing. And if you have anything specific to InDesign, I’d love to hear that too–it might just make it’s way into the next article.
