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 Type

Flipping Type

The final touch is to replace the type on the page with something more polished. The quickest way to do this is with Illustrator's Find Font dialog. Basically, this dialog allows you to select any font in your document and replace it with another font in your system.

Follow these steps to convert the type:

  1. In the Illustrator menu, choose Type > Find Font. The Find Font dialog appears, with all the fonts in your document displayed in the top pane (see Figure 15). In the Replace With Font From drop-down list, select System.
  2. Select the Marker Felt Thin font, and then select Arial Bold in the bottom pane. Click the Change All button. You should see some of the type change in the background.
  3. Figure 15 The Find Font dialog allows you to change fonts quickly in your document.

  4. The next font is automatically selected in the top pane. In the bottom pane, select Komika Title—Paint, and then click Change All again. To close the dialog, click Done.
  5. Figure 16 shows the page at this point.

    Figure 16 Find Font quickly changes all your type to the font you specify.

We need to take care of just a couple more details. In the sidebar, we'll make a slight adjustment to the text below the main navigation links, and we'll modify the look of the logo at the top of the sidebar. Follow these steps:

  1. Select the Wheelr logo. Using the type selector in the control panel, change the font to Clutchee (see Figure 17).
  2. Figure 18 shows the revised logo.

    Figure 17 Use the control panel to adjust type. It's faster than opening the Character panel.

    Figure 18 Flipping the logo.

  3. With the Direct Selection tool (press V), click the text box below the main navigation in the sidebar (see Figure 19). Change the font weight to Regular in the control panel, as shown in Figure 20.
  4. Figure 19 Fixing the sidebar text to fit in the area type container.

    Figure 20 Changing the font weight in the control panel.

  5. Double-click the same text to enter text-editing mode. Click and drag over the Collector23 text to highlight it, as shown in Figure 21.
  6. Figure 21 Select this text to create a link style.

  7. Open the Character Styles panel (Window > Type > Character Styles) and click the link style. This change will apply a yellow link color to the selected text.
  8. Make the same change in the other two lines, as shown in Figure 22.
  9. Figure 23 shows the finished page.
  10. Figure 22 The final sidebar text modifications.

    Figure 23 The page design is done!

At this point, you could some final content, such as photos and avatars, to finish flipping the wireframe. Then you'd be ready to present it for approval.

5. Conclusion | Next Section Previous Section