Home / Articles / Adobe Illustrator / UI Design with Adobe Illustrator CS6, Part 1: Flipping Wireframes

UI Design with Adobe Illustrator CS6, Part 1: Flipping Wireframes

Article Description

Adobe Illustrator makes it easy to create wireframes and then seamlessly flip them to final art. Rick Moore, author of UI Design with Adobe Illustrator, demonstrates how to use Illustrator's symbols, graphic and character styles, and the Find Font tool to turn a sample user interface wireframe into a presentation-ready design.
Flipping Symbols

Flipping Symbols

Symbols are used in Illustrator to create reusable graphics. A symbol is typically made up of one or more objects, and you can place multiple instances on a page. If you change the symbol definition, each of its instances automatically updates.

In versions of Illustrator previous to CS5, a symbol could contain only one layer. As of CS6, you can use multiple sublayers within that single layer to create a structure that's perfect for the task of flipping a wireframe.

Let's begin with the search box:

  1. Select the search box graphic and click the Edit Symbol button in the control panel to enter Isolation mode. Isolation mode locks everything on the artboard except for the symbol, making for easy edits.
  2. In Isolation mode, open the Layers panel (press F7). You should have a layer called Search Box with two sublayers: Wireframe and Final.
  3. The eye icon to the left of each layer indicates layer visibility (see Figure 3). Click the eye icon next to the Wireframe layer to hide it, and then click the empty space to the left of the Final layer to show it.
  4. Press the Escape key to exit Isolation mode.
  5. You should now have the final version of the search box on the artboard, as shown in Figure 4.

    Figure 3 Using sublayers in symbols is a great way to store a wireframe version and a final version of your artwork.

    Figure 4 The final version of the search box.

At this point, you can move on and flip the other three symbols in the document, using the same method:

  • Add button (see Figure 5)
  • Photo boxes in the main content area (see Figure 6)
  • Small avatar boxes under the Popular Collectors heading in the sidebar (see Figure 7)

When you're finished, your page should look like Figure 8.

Figure 5 Flip the Add button…

Figure 6 …and then the photo box in the content area…

Figure 7 …and, finally, the small avatar placeholders in the sidebar.

Figure 8 With the browser component and symbols flipped, you're almost done!

3. Using Graphic Styles to Flip Objects | Next Section Previous Section