Netscape Client User Interface Group
Date created: March 4, 1998
Date Last Modified:

This document describes design goals and principles of the animation/logo in Communicator.

Design Goals
Design
Frame number and size
Resting frame
Animation sequences
Animation color palettes
Image file formats

1. The animation provides visual feedback of network activity
2. The animation/logo can provide branding, and allow the user to identify the software
3. The animation/logo can provide easy access to a web-site about the product

The current animation/logo is a permanently enabled button at the far right of the top-most toolbar.

Animation frame number and size:

For best visual results, we recommend that the number of frames not exceed 40. The current animation in Netscape Communicator has 38 frames.

The current animation is in two sizes: 30 x 30 pixels and 16 x 16 pixels. These two sizes are designed to accommodate the Toolbar's "Picture & Text" mode (30x30), and "Picture only" or "Text only" modes (16x16). The 16 x 16 pixel animation is also used on the Location Bar or the Personal Toolbar when either of these are made the top-most toolbar.

The animation has a resting frame, which is the image shown when the animation is not running.

When the animation runs, it starts with the resting frame (frame 0) and then goes to frame 1, 2, 3, etc. until it reaches the end. The animation then goes to frame 1, skipping the resting frame, and continues to loop.

The animation begins when a document starts to load and ends when the document is completely loaded. In many situations, this is within a few seconds, so it's very common for users to only see the first 10-20 frames of the animation. For this reason, the sequence or one of the sequences has to be shown in the first 5-8 frames in order for users to see the motion. A sequence that builds up to approximately 20 frames is inappropriate.

The animation generally runs at 6-10 frames per second, but many things can affect this speed: network traffic, user events, etc. The animation does not have as high a priority as other events in the product, so it's entirely possible that a single frame can be frozen for several seconds. Therefore, any given frame of the animation should look acceptable.

The animation files for each platform should use the same color palette that applies to the specific platform. (See Color Palette)

Two animations should be delivered, one for each size. The animations should be delivered on each platform as follows:
• Mac: image should be placed with sequence number as Mac resource file. The large version of the animation can be placed in ICL8 (8bit) and ICL4 (4 bit), and small size of the animation can be placed in ICS8 (8bit) and ICS4 (4bit) of resource file. (sample)
• Windows: the animation frames should be placed in sequence on a horizontal strip in a .BMP bitmap file (sample).
• Unix: each frame should be an individual .gif files (sample).