Wireframing with Artboards in CS5: Part 4

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. This is part 4 of 5, so read the previous sections if you haven’t already. Tomorrow I’ll be posting to final part of the process.

  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 4: Tips for working with artboards in Illustrator

In the previous 2 parts of this process, we created the application framework and individual screen flow files in Illustrator. In this post you’ll learn some of my best tricks for how to (and how not to) work with artboards to create screen flows. These tips are geared towards creating UI wireframes that show multiple states within the same workflow. These states may be big changes (screen A to screen B) or smaller changes (e.g. a panel slides out or menu drops down).

Using layers with an artboard file

  • Elements of the screen your are designing that are fixed from state to state should be placed on the “Screen Framework” layer.
  • Place the primary content of the screen, what it is you are trying to showcase, on the “Content” layer.
  • Lock the “Screen Framework” and “Application Framework” layers when you design the screen’s primary content to make it easier to work with and to ensure you don’t move any artwork that should be consistent from state to state.
  • When duplicating, rearranging, or moving artboards, make sure to unlock all layers. Artwork on locked layers will not be moved.
  • If Illustrator is slow, try closing the layers panel (F7) to improve performance.

Creating new steps in the workflow

  • Use the “duplicate artboard” feature to quickly create multiple steps/states in the flow (make sure layers are unlocked and all the artwork you want to copy is on the artboard). There are 3 methods for duplicating:
    1. drag the artboard you want to copy to the new artboard icon
    2. select “Duplicate artboards” from the artboard window menu, or
    3. select the arboard tool (Shit+O) and Alt+Drag a duplicate artboard
  • You can also easily paste content from one artboard to another (“Edit > {paste options}”). This is one of the big improvements from CS4 to CS5.
    • Paste in front (Ctrl+F) — pastes the artwork directly “in front of” the currently select artwork and in exactly the same position relative to the artboard.
    • Paste in back (Ctrl+B) — pastes the artwork directly “in back of” the currently selected artwork and in exactly the same position relative to the artboard.
    • Paste to all artboards (Alt+Shift+Ctrl+V) — pastes the artwork to all of the artboards in exactly the same position relative to each artboard.
    • Paste (Ctrl+V) — pastes the artwork directly in the center of view (can be useful to center content on the artboard).

Moving around your artboards

  • In the Artboards panel, double click on an artboard name to jump to that artboard.
  • Use Shift+PgUp and Shift+PgDn to navigate quickly between artboards.
  • “View > Fit Artboard in Window” (Ctrl+0) centers the currently selected artboard and zooms in/out so the artboard fits within the window
  • Open the navigator window and drag the selection box to move around (FYI, there are some bugs with this tool).
  • Select an artboard by clicking on any artwork within that artboard (or select it in the Artboard Window).
Artboard options panel
Artboard options panel

Use the Artboards panel to reorder artboards. Open the submenu to access the “Rearrange Artboards…” window.

Naming artboards

  • Click on the page icon to the right of each artboard name to bring up the artboard options window.
  • Open the Artboard Tool (Shift+O) and edit the name field.

General artboard management

  • Give each artboard a name that corresponds to the step in the flow. This will make it much easier to find the step in the flow later on.
  • Simply drag artboards in the Artboards panel to reorder the flow.
  • Use the “Rearrange artboards” option in the artboards menu. Every time you need to clean up the artboards, unlock layers and select this option (see below for results).
  • Use the Artboard Tool (Shift+O) and manually reorder the artboards.
  • Limit your files to 30 artboard each to improve performance.
  • As you duplicate artboards, Illustrator will place the new artboard to the right of the top-most row. Artboards will continue to extend horizontally until the edge of the canvas. If you add many artboards, you will need to either manually rearrange artboard or use the “Rearrange artboards” tool.

Use symbols

Symbols in Illustrator are art objects that can be reused within a file – make a change to that symbol and it changes everywhere it exists in the file. This can be used to great effect in wireframing. Make any control or content that is consistent across multiple states into a symbol and place that symbol instead of copying the artwork. For more information on artboards, see the Adobe help pages.

Tip: If you need to break the link to symbol (to show unique states or content), first group the symbol (select the symbol and press Ctrl+G). This will prevent illustrator from putting the symbol in a new sublayer, and will save you trouble later down the road.

Manage controls with symbols and an artboard

Placing all of your symbols onto a single artboard makes it easy to find a symbol you’re looking for when you need to make a change. Again, any changes made on this master sheet of the control will be reflected wherever that symbol has been placed in the document. Note that you can create artboards of any size within the same document, so make whatever size you need to house your symbols (use the Artboard tool [Shift+O] to draw a custom size).

All of the symbols for multiple states are gathered onto a single page. This makes it easy to compare states and easily find symbols if you need to make updates later.

Gather controls on a summary artboard
Gather controls on a summary artboard

Tip: Place a symbol artboard into your InDesign document and crop to the single control state you want to explain by adjusting the frame in InDesign.

Create a highlight state with blending modes

Now that you are using linked files and symbols to manage artwork shared across states, it becomes more difficult to show selected and highlight states. You can use the opacity setting to make a highlight state that can be placed over content without dimming the content. Place highlight states on the content layer.

Set opacity to 50% and blending mode to “Darken” to create a highlight state.

Tip: Save this highlight state as a graphic style in the Graphic Styles panel. Any time you need a new highlight state, draw the highlight shape and apply the graphic style.

Part 4 Conclusion

Although not a wireframing tool per se, Illustrator provides a lot of tools that can help you create and manage large sets of interface designs. With the tips and tricks above, you can make great use of artboards, layers, symbols, and styles to help with all your design needs.

In the next and final part of this guide, I’ll show you how to quickly and easily place all of your files into a InDesign document. This is great for creating presentations or final documentation deliverables. Perhaps the greatest benefit of using this method, is that any changes you need to make to your designs (and let’s face it, there are always some minor changes right before the presentation) can be made to a single Illustrator file. Just edit the .ai file, save, and update links in InDesign.