The Art of Animation. Introduction

fter we have researched (in the previous article) the manifestations of dynamism in static design elements, I'm going to step up to the next level of dynamism, that of the actual motion exhibited by the bits of animated material so common on the Web today. From simple JavaScript rollovers, through animated GIFs, to Flash movies - all these tools hold an immense potential for enlivening your design as well as, unfortunately, for making it annoying and disgusting.

A piece of animated graphics can, in principle, display anything imaginable - from a primitive blinking text banner to an excerpt from the "Star Wars" movie. So, the idea to anatomize this entire genre with all of its creative possibilities seems unrealistic for a single article. I had to limit myself to a narrower, although still very versatile concept of motion - which is what best differentiates animation (I was even considering titling this article "Mastering AniMotion") from static imagery. The complex issues of information architecture or interactivity in animated presentations thus fall beyond the scope of this treatise.

Actually, it is impossible to make a clear division between animation proper and everything that makes a computer-based presentation, Web site included, essentially different from the "old media." In a sense, everything you see on the computer screen is animation, although not everything involves motion - the latter being therefore the cornerstone of both visual design applications of animation and this article.

Evolution has trained our eye to be constantly on watch for moving objects that can signify a danger or a change in the environment. This makes animation highly efficient in guiding the viewer through the key points of your composition, or in making your ad banner more catchy and clickable. However, an overuse of animation, as well as a hastily assembled or "too computer" animation without a human touch, can easily turn into major annoyance. I will try to find out what makes a piece of computer animation look intriguing, attractive, and as organic as possible.

The article starts with an overview of visual aspects involved in the motion of an object, such as its shape, color, and texture. Then I focus on some important principles of creating animated graphics, with a special attention paid to the principle of nonlinearity. Along with some examples to illustrate the ideas put forth in the article, I briefly describe two of the most popular animation technologies, namely the 3d animation and vector-based Flash animation.