Wireframing with Artboards in CS5: Part 1

In this 5 part guide, learn how to use the best new tools in Adobe Creative Suite 5 to give your wireframing process a boost, streamlining your work from initial ideation to final delivery. We’ll be focusing on leveraging the power of Artboards in Illustrator and InDesign to create clean wireframe files that are easily updated, shared, and published. Each day this week, I will be posting a new section to the guide.

  1. Process overview
  2. Create the application framework
  3. Create wireframe screen flows
  4. Tips for working with artboards in Illustrator
  5. Create wireframe deck in InDesign

Part 1: Process Overview

Why use artboards

First, why should you even care about artboards? While artboards were introduced in Illustrator CS4, they received a major upgrade in CS5 making them much more powerful. For those new to the feature, artboards represent regions on the canvas that contain printable artwork.

In the image below, each “page” or state in a set of wireframes is on its own artboard. Notice the artboards panel on the left which allows you to name, navigate through, and otherwise manage artboards.

This may not sound very exciting, but what’s important about artboards is how you can work with them and ultimately how they can make your life easier.

  • You can have up to 99 artboards in a single Illustrator file
  • Artboards (and the artwork on them) can be re-positioned on the canvas (individually or by using the rearrange tool)
  • Artboards can be named, duplicated, and reordered
  • The order of artboards corresponds to page numbers in a PDF (either in Acrobat or when place into InDesign)
  • Artwork can be positioned relative to the artboard (this makes it easy to show states of a design, while keeping the static elements in the same place)

This guide assumes you know the basics of working with artboards. To get up to speed, check out these resources:

Overview of the process

The process is fairly simple:

  1. Create a separate Illustrator file with only the base framework elements. You will place this as a linked file in all of your subsequent .ai files.
  2. Create a new Illustrator file for each screen flow your design; use a new artboard for each step or state in the flow.
  3. Place the artboards from a single file into InDesign to quickly build your presentation or specifications.

As compared to our old method or using layers and separate files to manage screen flows and states, this process has saved me and my team days worth of work over the course of a project. Creating designs, reviewing and revising designs, building presentations and documentation are all much, much faster.

Come back tomorrow for Part 2, in which I’ll explain how to build a solid foundation for your design documentation by creating the application framework in its own Illustrator file.