- Color Aesthetics
- Choosing Color Themes
- Applying Color Relationships to Web Design
- Color Gallery
- Typography Aesthetics
- Type 101
- Verdana & Georgia
- Font Size Differences Between Macs & PCs
- Fonts for Delivery as Web Graphics
- Basic Styles of Typefaces
- What Is a Font Family?
- Aliasing or Anti-Aliasing
- Body Copy
- Using Fireworks for Type Design
- HTML for Placing Text Graphics
- What About Flash?
- Aesthetics of Layout
- The Aesthetics of Animation
This chapter is from the book
This chapter is from the book
This chapter is from the book
The Aesthetics of Animation
You will learn how to make animated web graphics in Chapter 24, "Animation & Audio". Since this is the chapter on web aesthetics, the focus here will be on what works and what doesn't from a visual communication point of view.
With the exception of multimedia, the Web is the first medium to combine animation and body text on a single page. For this reason, it's no wonder that many people struggle to use animation effectively.
Adding animation to a site can be great, but it can also have the reverse effect of annoying your audience or detracting from what your page is trying to say. During a conference I once attended, Ben Olander, Creative Director at Angry Monkey (http://www.angrymonkey.com) commented, "Most animation you see on the Web is the equivalent of the BLINK tag." I agree with him, but I also see this as a natural outgrowth of artists and developers who are first working with a new tool.
Here are some very general, personal guidelines I would like to share:
Animation calls attention to itself much more than static images on a page. Make sure that the content of your animation is, in fact, something you want the most attention called to on your page. If it isn't, the animation will effectively detract from what you're trying to communicate.
In most instances, animation that cycles or loops endlessly will eventually become annoying.
If you use more than one animation on a single page, the effect may be overwhelming to the end viewer instead of impressive.
Make sure your animation loads quickly. You'll learn guidelines to achieve fast downloading speeds in Chapter 24, "Animation & Audio." If you make your audience wait too long for an animation to load, they'll move onward before ever seeing it.
)
Figure 2.110 At Solitaire Central
(http://www.solitaire.com)
the screen is almost entirely surrounded by blinking, animating ad banners and
sponsor banners. It makes it almost impossible to read the content in the
middle.
)
Figure 2.111 At Turbonium
(http://www.turbonium.com)
the spinning atom animation on the right side of the screen moves so fast and
furiously that it almost makes you too nauseous to stay on the
page.
Summary
Good web design is the practice of using design to enhance communication. Unfortunately, design can also be counter productive to clear communication. Here are some principles to keep in mind:
Pay closest attention to the values of the colors you pick and make sure that you chose color combinations that have enough contrast to read easily.
ASCII type rules are different than rules for graphic type.
With ASCII type, be sure the font and size you pick is readable on all platforms.
With graphic type, stick to one or two font families, and use color, size, weight, and style to create different "looks" and hierarchies.
Make sure that your layout is organized, has enough white space, has lines of text that are short and easy to read, and keeps important navigation elements above the fold.
Animation is good when the thing that is animating is the important information to look at. Peripheral animation should not loop endlessly, or it will annoy your visitors.