Wireframing with Artboards in CS5: Part 3

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 3 of 5, so read the previous sections if you haven’t already. Each day this week I’ll be posting a new section.

  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 3: Create wireframe screen flows

In Part 2 we created an application framework file. In this part you are going to build out the screen flow for each area of the application using artboards to manage each screen and/or state. How you break out these screen flows will depend upon each project and the complexity and details of the design.

You will be placing as a link the framework.ai file you created in Part 2 into a new document for each flow (flowA.ai). Within the flowA.ai file, you’ll create a new artboard/page for each state in the flow.

Diagram: create file and place framework into each artboard

Tip: To improve performance, try to limit the number of artboards per file to 30. Beyond 30 Illustrator really starts to slow down (plus, better not to have all your eggs in one basket). Break out your screen flows into multiple files if necessary. For example, alternate or exception flows are usually good candidates for separate Illustrator documents.

Step 1: create a document for each screen flow

Create a new document with the screen dimensions of your application. For example, set the size to 1280x1024px.

  • You later change the size of individual artboards in each file later — this can be useful if you need to test how the application scales to different monitor sizes.
  • Set the units to “Pixels” to make for easy adjustments and sizing

create new document modal window

Step 2: Set up a simple layer structure

Create a simple layer structure; this will help you work with your file later on. Locking sublayers will make it easier to work with the primary content artwork.

  1. A single base layer contains the application background and framework
  2. The next layer contains the screen framework, I.e. Elements of the specific screen you are designing that will stay mostly fixed from state to state.
  3. A content layers for the primary content you are designing.
  4. A layer for overlays and/or additional levels of content.
4 Layer structure diagram

Tips:

  • Hidden or locked layers will not be copied to a new artboard when you use the duplicate artboard feature.
  • Having performance issues? Try closing the layers panel (F7).

Step 3: Place the framework file

Place the illustrator file of your framework into the “Application background” layer.

  1. Select “File > Place…” (Ctrl+D)
  2. Choose the framework.ai file.
  3. Center the placed file on the artboard.
In the image below, the Illustrator file for the framework has been placed into a new screen flow document on the “Application Framework” layer. The red X indicates that the artwork is a linked file.
Placed framework file.

Tip: Before continuing, save this file as an illustrator template along with any swatches, basic symbols, and graphic styles. Next time you need to create a new screen flow, start from a fresh template.

Step 4: Create your designs

Finally, start building your screen content as artwork on each artboard. You’ll want to create a separate artboard for each state of the screen flow.

In the image below, each state of the screen flow is placed on a separate artboard. The screen flow shown is for the Services section of our website, so take a look at that to see how the artboards are structured.

Screen flow created on separate artboards

Step 5: Share your designs

Now for the key reason to use artboards. When you are ready to either preview your screen flows or share your designs informally (i.e. without interaction notes or headers), simply save your file and open it up in Acrobat. Each artboard will be a page in an Acrobat document. A set of wireframe screen flows structured with artboards allows you to:

  • Immediately share designs with team members without the need for exporting each state.
  • Review files more easily ­— no need to dig through layers or even to open illustrator to see all of the states in the design.
  • Collaborate on files — all of the states in the screen flow are laid out flat on their own artboard. Team members do not need to decipher complex layer structures when working with someone else’s Illustrator file.
  • Print specific artboard ranges from within Illustrator and use the “skip blank artboards” to ignore any empty artboards.
  • Keep draft artwork within the file, but remove the artboard. The artwork will remain for future reference, but it will not show in the saved PDF.
  • If you do not need formal documentation (with interaction notes and page titles), consider creating your wireframe stacks directly in Acrobat. With a pro version you can take pages from multiple Illustrator files and assemble a single wireframe presentation deck. Save the compilation as a PDF and you’re good to go.

Diagram showing how you can share from your AI file

Tips:

  • Work in AI format. Do not save your working files as PDFs. Even though Illustrator will open compatible PDFs, those PDFs may become corrupt and lose all Illustrator details (symbols, swatches, artboards, etc).
  • For use with previous versions of Illustrator, you will need to save a backwards compatible file. When saving as an illustrator document, select from the Version dropdown the correct version of Illustrator you need to save to.

Part 3 Conclusion

We’ve now seen how to create an application framework file, place that file in a new screen flow document, and build your designs using artboards for easy creation and sharing of work. In the next post, I’ll cover detailed tips and tricks for creating each wireframe screen flow with artboards. Topics will include:

  • use of layers
  • moving around artboards
  • naming artboards
  • using the artboard tools
  • creating new steps in the screen flow
  • artboard management
  • use of symbols
  • managing UI controls with artboards and symbols
  • creating highlight states

After that, the final step will show you how to quickly and easily add all of your screen states into a single InDesign document.