Wireframing with Artboards in CS5: Part 2

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 2 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 2: Create the Application Framework

The first step in the process is to create a single Illustrator file just for your application framework. You will be placing this as a linked file into all of your subsequent screen flow files so that if you ever need to adjust the framework, you can do so in a single place. On larger projects with tens of files all sharing the same framework, this can save you hours of copy/paste rework when framework elements need updating.

diagram: place framework as linked files in separate screen flow files
diagram: place framework as linked files in separate screen flow files

Step 1: create framework document

Create a new document with the screen dimensions of your application. For example, set the size to 1280x1024px. You can 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.

Tip: set the units to “Pixels” to make for easy adjustments and sizing

Step 2: Create framework artboards

Place your framework elements on to a single artboard.

  • The framework should consist of the application elements that are consistent from screen to screen.
  • If you have multiple primary framework states (e.g. navigation panel open, navigation panel collapsed), you can separate these each on to its own artboard.
  • If working on a team, be sure to discuss which elements are going into the framework file so that everyone’s elements will come together appropriately.

I’ve used the projekt202 website for the example wireframes. Note how the framework includes the browser chrome, header, and first level of the menu. The second level of the menu will be shown in the separate screen flow documents we’ll be creating in Part 3 of this series. Also, the content container is

not shown

since it is not consistent across all of the screen flows (for example, on the Blog screen template your are reading right now, the content container grows to the full length of the post).

Tip: Where possible, limit to as few states of the framework as possible. In the example above, the main menu (home, services, etc) is present but has no highlight state.

Part 2 Conclusion

Now that you’ve created your application framework file, you will be placing it as a linked file in all of your other screen flow files. By keeping the framework separate, any changes that need to be made to the framework only need to happen to one file.

We’re only getting started. The real power of artboards comes in the next two steps. Tomorrow I’ll be walking through how to construct your screen flows with artboards.