Field note / motion design / brand identity / motion graphics
Building a Motion Graphics Style Guide for a Brand
When a brand starts using video and animation, the motion behavior needs to be as codified as the color palette.
- Published
- Feb 19, 2024
- Length
- 3 min read / 622 words
- Topics
- motion design, brand identity, motion graphics
Motion Is Part of the Brand Now
Most brands have a style guide that covers the static identity system thoroughly: logo usage, color palette, typography, photography. But as soon as someone needs to animate the logo, or build a branded video template, or create motion graphics for social media, the style guide goes silent.
I've been on the receiving end of that silence. Asked to create a motion piece for a brand, given a PDF of the static guidelines, and expected to derive animation behavior from rules that were never designed to cover animation.
The result is inconsistency. Every animator makes their own interpretations. The brand's motion identity becomes whatever the last person decided to do, which may have nothing to do with the brand's personality.
The fix is a motion style guide.
What Goes in a Motion Style Guide
A motion style guide doesn't need to be exhaustive to be useful. The key elements:
Timing principles — what is the default duration for standard transitions? Does the brand move fast or slow? Is there a tempo that matches the brand's energy? Fast and punchy suggests different brand personality than slow and deliberate.
Easing character — does the brand ease out smoothly, overshoot slightly, snap into position? The easing character is a significant personality signal. A sharp snap feels modern and confident. A smooth ease-in-out feels considered and refined. Elastic overshoots feel playful.
Enter and exit behaviors — how do elements arrive on screen? From off-screen? By fading in? By scaling up from a point? Consistent entry and exit behaviors create brand recognition across different motion contexts.
Stagger rules — when multiple elements appear in sequence, what is the delay between them? Stagger timing is one of the most recognizable motion signatures.
Logo animation behavior — this is the most critical to specify. The logo should have a canonical animation that's used consistently everywhere. How it arrives, how long it holds, how it exits.
The Personality Test
Before I define any specific timing or easing values, I do a personality exercise. I take the brand's adjectives — the words that describe its personality — and translate them into motion characteristics.
"Precise and confident" might translate to: sharp easing, minimal overshoot, faster durations, deliberate staging.
"Warm and approachable" might translate to: gentle ease-in-out, softer easing, moderate pace, elements that bloom or expand rather than snap.
"Playful and energetic" might translate to: faster tempo, overshoot and bounce, staggered entries, more expressive transitions.
This translation work happens before I open After Effects.
Documentation Formats
A motion style guide can be documented in different ways. The most useful formats I've produced:
Written principles — prose descriptions of the motion philosophy, plus tables of specific values (duration ranges, easing types, stagger intervals).
Reference animations — short video files showing the canonical behavior for logo animation, title cards, lower thirds, transitions. These are more useful than written descriptions because motion can't be fully communicated in text.
Template files — After Effects templates with the correct presets, pre-built easing curves, and example animations built in. These are the most useful of all because they make doing it right easier than doing it wrong.
The Return on Investment
Building a motion style guide requires an upfront investment of time. But every video, every animated social post, every motion piece that comes after benefits from it. Consistency compounds. The more content a brand produces, the more valuable the consistent motion identity becomes.
Treat motion as a brand asset, document it like one, and protect it like one.