How To Indicate Key Frame Art Direction For UX Motion Graphics

This is a quick note for clients who are embarking on the addition of motion graphics to areas of their websites or creating marketing assets for distribution on advertising platforms.

There are several approaches to supplying art direction for motion graphics, each appropriate to specific work flows and the complexity of the result required in the final deliverable. While each of these approaches has strengths and challenges, I’ve found key frame direction is the most efficient for my clients.

Key frames allow the visual designer to indicate accurate placement of visual assets, and generalize the description of what happens frame to frame.

Key Frame Art Direction Specifics

Include these four items:

  • A good rule of thumb is to supply one key frame for each visual object starting placement, and ending placement as you step through the animation.
  • A one line sentence for each key frame describing what happens visually from the current frame to the next.
  • K-weight upper limits for each size animation.
  • Mac OS X font files for all fonts in the design, unless they’re Google fonts, in which case a list of names is sufficient.

Key frames can be supplied as layered artwork in either Adobe Illustrator or Adobe Photoshop in which all assets including vector graphics are saved locally to the file rather than stored in the cloud.

All fonts should be either converted to outlines in the key frames, or supplied with the key frames.  Please note: even if the font is a widely used typeface, there are almost certain to be variations from version to version across type foundries. It would seem practical that a font with the same name from a different foundry would be enough to guarantee the same visual results but this is the exception rather than the rule.

Fonts from different foundries can vary in widths and spacing. If your design piece is for small dimensions rather than an entire website page this is even more significant to the integrity of the work because small changes in width can push a word or phrase to the next line, changing the visual direction.

Supplying the font file with the art direction will save you delays in schedule due to having to retrieve the font and forward it separately in order to being production. Please bear in mind that Windows fonts are not a suitable substitute for Mac OS X fonts.

Leave a Reply