Banner Animation Tips

Print and web designers are often called upon to create web banner advertisements to accompany other pieces from a campaign. Technology-wise, most banner ads are simple to create, but the subtleties of animation can be tricky for designers used to non-animated pieces. Here are some tips that can help you make the most of the animated banner format…

1. Know the branding goal. How important is the brand and logo to the ad? For a new brand, it’s essential to have the logo throughout the ad with high prominence—even if viewers don’t click, they’ll still have opportunity to learn the brand. For a known name, simple branding elements (like color scheme or font choice) can be enough to imply the company, with the rest of the info delivered upon clicking the ad and visiting the landing page.

This animation (with the original logo replaced to protect the innocent) was created to introduce a new brand. The logo is on every frame and is very prominent—much more so than it would be for an established name.

2. Ditch the sequence. Designers used to non-animated content often forget this. The web viewer may not see the first frame of your animation first. If your design relies on viewing the banner in sequence from first frame to last, your entire message could be lost when viewed from the “wrong” starting point. Structure the message over a series of frames so that it makes sense no matter when the viewer glances over to the ad space, and be sure to loop the animation so all frames will be seen.

3. Research the ad space. It’s important to know where your ad will “live” and use design elements that will give it maximum page visibility there. Carry these design elements through every frame. For example, if the intended site has a yellow background, use a rich, contrasting color as the background throughout. If the site is text heavy, include large, eye-catching images on each frame (or most frames). If your ad will sit on a wide variety of sites, include a black or gray outline on every frame—this way even if the ad is of a similar background color, it has something to set it apart.

4. Don’t trust your own sense of timing. When you’ve watched your animation dozens or hundreds of times while creating it, your sense of frame timing will be totally shot. What seems slow to you will seem incredibly fast to others. Why? Because you know your message inside and out, while others have never seen it before and need time for it to sink in. Always show your final animation to someone who has never seen it (or any part of your campaign) before to get an outside opinion on timing. A good rule of thumb is two to three seconds for essential text info or “calls to action,” one second for supporting images, and less than a second for transition effects, but this will vary a lot based on your design.

Frame timing is easy to adjust in Photoshop or Fireworks. If you’re creating a Flash banner, consider your frame rate (fps) and number of frame used.

5. Remember that viewers know what to do. Years ago, banner ads needed design elements to help users figure out what to do next, like “click here” text and chunky bevels. Now, thanks to standardized sizes and placements of ads, users know exactly what they’re expected to do. So forget the click-encouragement gimmicks, and spend more time on grabbing attention and delivering a message that users really want to click.

6) Create an asset palette. If your banner comes out great, you may be asked to do more at different sizes. Have assets on the ready in a PSD file (for animated GIFs) or Flash Library (for SWF ads). Your file should contain all the logos, images, color swatches, and text messages you may need to construct a new ad. Then you can simply drag them into place to create the newest member of your banner campaign.

An asset palette can be a huge timesaver when creating lots of animations for a campaign.

Planning and testing are just as important to the animation process as the actual design. Research, sketches, and some helpful friends will help ensure a polished design that viewers will want to click on.

[Source: Tara MacKay - blog.sessions.edu - Aug 2007]