UI Design with Adobe Illustrator CS6, Part 3: Visualizing Interactions with Animation
- Deciding When to Animate
- Layers, Blends, Animation!
- Exporting and Previewing the Flash SWF
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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
There are many ways to build quick prototypes: You could use HTML and JavaScript, Keynote, or even Flash itself. The method you choose really depends on your time, ability, and need. For complex interactive prototypes, Illustrator obviously isn't the best choice. But if you just need to work out the details for an interaction in one part of your design, Illustrator can fit the bill.
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.