Using GIF animation in a banner design can make the difference between a successful and unsuccessful banner ad campaign. Read more about GIF animation and banners

home > design tips > banner design > GIF animation

Using GIF animation in banner designs

Using animation in a banner design can make the difference between a successful and unsuccessful banner ad campaign. Because animation has been proven to greatly increase a banner's click-through-ratio (CTR), we highly recommend using it in all banner designs, whenever possible.

The purpose of an animation is to attract visitors, not to irritate them. Animation should be subtle enough to attract attention to your banner ad but not so ostentatious as to interfere or clash with the design of the web page you are advertising on. If a banner animation is too flashy or too irritating, it screams "ADVERTISEMENT" and your target audience is less likely to read your banner and click on it.

Animation is the process of taking a series of individual pictures, called frames or panels, and stringing them together in a timed sequence to give the appearance of continuous motion. A GIF animation is an animation created in a GIF file format.

One of the main advantages of using a GIF animation in a banner design is that GIF is one of the most widely used file formats supported by Web publishers. Even though online marketers and ad agencies give rich media banners a tremendous amount of sales hype; rich media banners do not always yield better results than GIF animation banners. In fact, one of the animated GIF banner campaigns we are currently running has a CTR between 10% and 49% with corresponding sales.

Since the design costs for rich media banners can be prohibitive, GIF animation is often the best cost-effective solution for small businesses.

For banner designs using GIF animation, these general guidelines apply:

Color

Because GIF animation is in a GIF file format, remember that GIFs only support 256 web-safe colors. To keep your animated GIF banners looking their best across all monitors and platforms, always design them within the 256-color palette.
Photos

If you are using photos in your GIF animation, view them on a low-resolution computer monitor first before making the decision to use them in your banner ad. Photos generally contain millions of colors; therefore, they do not necessarily look as good when viewed at only 256 colors.
File size

Most web publishers expect animated GIF banners to have a file size of less than 12K. To help keep file size to a minimum, use only a few high contrasting and complementary web colors to call attention to the main points on your banner. Utilizing the smallest web-safe color palette possible in your animated GIF banners will allow you to use more creative special effects in your animation.
Looping

In animation, looping is the number of times animation repeats itself. Most web publishers have strict looping specifications. For example, the major search services (Yahoo, AOL Search, AltaVista, MSN Search, etc.) will only allow a banner ad to loop 3 times, and each loop should last less than 10 seconds. Before creating your animated GIF banner, always ask for looping specifications.
Frame/panel sequence

Determine whether or not to have your main message appear on the first panel of your animated banner ad, the last panel of your banner ad, or both.

Many end users will stop a web page from loading before the banner animation has loaded, leaving only the first frame. Thus, it might be a good idea to have your message come across in your first frame if you know that the web page you are advertising on has a long download time.

Conversely, your message might have more "punch" if it is on the last frame, and your last frame will be the final image viewed once the animation is complete.

Despite all of the hype surrounding rich media banners, designers and ad agencies are still placing too much emphasis on the "wow" factor of banner design rather than the message. Style and flashiness do not mask lack of substance. Whether your banner is designed using GIF animation or rich media, the main goal of a banner should always be rich information.

If you have any specific questions about our banner design tips, or if you would like permission to republish this banner design tip on your web site or newsletter, please use our contact form or email us at info@grantasticdesigns.com.

Using GIF animation in banner designs

Related banner design and marketing tips: