UI Design with Adobe Illustrator CS6, Part 3: Visualizing Interactions with Animation
When using Illustrator to mock up a user interface for a web or native application, sometimes I need a little help envisioning how a certain interaction might work. In those cases, a feature in Illustrator lets me quickly create a Flash animation—right within the app. It's perfect for simple animations that will help me to see whether I'm going down the right path with my interaction. This article explains when this feature is helpful and how you can use it in your own work.
Deciding When to Animate
For this article, I'll use an example of a fictitious sports app that lets a high school coach view details about various athletes. The wireframe in Figure 1 shows a list of basketball players within a high school division. As the coach, if I want to see how my players stack up against others in their division, I could tap on an athlete's name to view more information.
Figure 1 Starting screen for the interaction test.
But what happens when I tap the name? How should the panel look then? I can create a quick animation to see how it would look to have the tile grow and show the athlete's details.
The first item of business is to set up the key pieces of the animation. I'll choose one of the tiles to be the starting point; then I'll create the end state to show how the tile looks when it's open. To make this animation work properly, I'll use a combination of Illustrator layers and blended objects.