UI Design with Adobe Illustrator CS6, Part 1: Flipping Wireframes
- Flipping Placed Artwork
- Flipping Symbols
- Using Graphic Styles to Flip Objects
- Flipping Type
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
You're probably familiar with the practice of buying an older, possibly rundown home and fixing it up to sell at a higher price. This practice, known as flipping, was probably more common several years ago, when the economy was better than it is now. If you're a UI designer who's unwilling to take a chance on an old home, you can get into the practice of flipping wireframes instead. Much less risky.
Wireframes are useful for rapidly and iteratively working out user experience ideas. Software applications already in the marketplace specifically for wireframing include Balsamiq, Axure, OmniGraffle, and even Visio. However, using one of these applications usually means that you have to re-create the design in another app, such as Illustrator or Photoshop, once you move to the visual design phase. This tutorial shows you how to use Illustrator CS6 as your wireframe tool, and then convert the rough artwork to final in the same document. With placed art, symbols, and graphic styles, you can create a library of design elements in Illustrator that allow you to wireframe quickly and then seamlessly flip those wireframes into the final design.
To get started with this tutorial, go to http://www.uiwithai.com/wire2mock and download the wire2mock.zip file. Expand the archive and open wheelr-wireframe.ai in Illustrator.
This file contains a finished wireframe for one page of the application, as shown in Figure 1. It uses a "sketch" style that keeps the focus on the content and structure, rather than on color, typography, and effects. The file already has everything in place you'll need to flip it to a finished mockup, except for typefaces. For those, download the free web fonts Marker Felt Thin, Marker Felt Wide, Clutchee, and Komika Title.
)
Figure 1 The basic wireframe you'll use for this example.
Flipping Placed Artwork
One way to ensure a consistent design across multiple documents is to use artwork placed from a "master" file. Basically, you create a component of your design—in this case, a facsimile of a Mac OS menu bar and some web browser chrome—and then save it as its own file. You can then use Illustrator's Place command (File > Place) to drop the component into any document. If you ever need to change anything in the component, simply open the original file, make the necessary changes, and then save and close it. Any document that has the file placed in it will be updated automatically.
This exercise uses two different external components: the wireframe version, and the final version. When you're ready to flip the wireframe element, you'll simply relink the placed file to the final version. Here's how you do it:
- Select the browser component at the top of the page.
- Click the file name link at the left side of the control panel and select Relink from the menu (see Figure 2). Navigate to the folder you downloaded previously, select browser-final.ai, and click Place.
- The Place PDF dialog appears. Leave everything in this dialog at the default settings, and click OK.
)
Figure 2 Select Relink to choose the replacement file for the wireframe component.
You should now have the final version of the browser component in place. Now we'll move on to creating the content of the page.