Wireframing with Artboards in CS5: Part 5

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 the final part of our 5-part guide. If you haven’t already, read through the previous posts.

  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 5: Create wireframe deck in InDesign

In the previous 3 parts of this process, we created the application framework and individual screen flow files in Illustrator. Once all of the wireframes for your screen flows are to a point where you are ready to start more formal documentation, you will be placing each artboard into your InDesign file. If you realize you need to make updates to the designs later, you can edit the Illustrator file and then simply update links in InDesign.

Place artboards from your illustrator file into InDesign

Tips:

  • Make sure that the order of your artboards is set before placing in InDesign. You cannot change this without needing to re-place the file.
  • You can rename artboards and add artboards to the end of the file.

Step 1: Set up your InDesign file

Start with or create an InDesign template that has a master page laid out for your wireframe presentation. The master page should contain a frame of the correct proportions for your designs, for example 1024×768.

Place as many instances of the wireframe master page as you have artboards you want to show in the documentation. The spreads marked below in red use a master page set up for wireframes with interaction notes.

Tip: Using the “Frame Fitting Options” window (found in the right-click menu off of a frame), you can set the content to always fill the frame proportionally. This way your placed content will always fit properly. You can also adjust the crop to remove elements unwanted in final documentation (e.g. a web browser frame for a web app).

Step 2: Place Illustrator wireframe screen flow file

Place all of the artboards from your Illustrator file into the InDesign document.

  1. Make sure that NOTHING is selected (i.e. do not select a frame).
  2. Select the “File > Place…” (Ctrl+D) option to open the Place window.
  3. Select the Illustrator file you want to place, make sure the “Show import options” box is checked, select the Open action.
  4. Set the range of artboards you want to place, and select the OK action.
  5. Click into each frame that you want to place an artboard into until all of the artboards are placed. If the frame already has placed content, Alt+Click.

Tips:

  • In step 4 above, you can choose the “crop to” options to change how the artwork is cropped in the frame. “Trim” shows the entire artboard, “Artwork” would crop the frame to just show the artwork.
  • You can press the “Esc” key to exit the placing of multiple files.
  • Files not placing correctly? First make sure nothing is selected before placing. Then try Alt+Clicking into already filled frames.

Step 3: Update wireframe screen flow files if necessary

If you notice any errors in the designs after you’ve placed your artboards, edit that artboard in the Illustrator file, save the changes, and then update links in InDesign.

Tips:

  • Do not change the order of your artboards in the Illustrator files. InDesign references the number of the artboard only, not the name. So if you change the order of placed artboards, they may not show correctly in InDesign.
  • You can add artboards to the end of the artboards list and you can rename artboards.

Conclusion

Artboards are a great addition to the designer’s toolbox. They have completely changed the way I work with Illustrator, allowing me to more freely design, more easily share and review work, and more quickly create documentation. In the past 5 posts, we’ve seen a process for using Illustrator and Indesign CS5 with artboards to create wireframe screen flows and share them with colleagues and clients. To recap:

  1. Process overview: artboards will save you a lot of time.
  2. Create the application framework as a separate file for easy updating later.
  3. Create wireframe screen flows by linking your framework and building clean files.
  4. Tips for working with artboards in Illustrator: artboards will really save you a lot of time.
  5. Create wireframe deck in InDesign by placing each artboard into a master page template.

I hope this guide helps you work more effectively and efficiently with Illustrator and InDesign. If you have any questions or tips of your own, please leave them in the comments!