Opening
Animated Infographics
Designing understanding
- Advanced Motion Design
- Week 1 · September 9, 2026
01 · Meaning
An animated infographic is a visual argument
What should the viewer understand?
- What matters?
- What relates?
- What changes?
- What does it mean?
01 · Meaning
The four-stage translation
Data → Information → Meaning → Experience
- 24 min / 36 min
- Route B takes 12 min longer
- That is 50% more travel time
- The viewer feels the delay
01 · Meaning
Relationships are the verbs
The topic names things. The relationship tells them what to do.
- Compare · accumulate · transform
- Flow · sequence · contain
- Correlate · cause · feed back
01 · Meaning
Motion directs discovery
Space establishes relationships. Time controls the reading order.
- 1 Establish the baseline
- 2 Introduce the comparison
- 3 Isolate the difference
- 4 Hold the takeaway
01 · Meaning
The comparison needs context
Route B takes 12 minutes longer
- Route A: 24 min
- Route B: 36 min
- Same illustrative distance
A comparison needs a common scaleIllustrative classroom data · minutes · zero baseline010203040 min
+12 minutes = 50% longer than Route A
02 · Visual language
A visual grammar is a set of rules
One property should have one dependable job.
- Shape identifies an entity
- Color distinguishes a category
- Position or length compares values
- Motion describes the relationship
02 · Visual language
Visual variables
The encoding should match the question.
- Position / length → precise comparison
- Area / size → magnitude
- Hue / shape → category
- Lightness / texture → ordered value or uncertainty
02 · Visual language
Area scaling changes the claim
2× width × 2× height = 4× area
- To show twice the area:
- Scale each dimension by √2
- Approximately 141%, not 200%
2 × 2 = 4
02 · Visual language
Color needs a second cue
Category and quantity use different color logic.
- Category: A, B, C + distinct hues
- Quantity: low → high + ordered lightness
- Identity: color + persistent text label
02 · Visual language
Symbols, motifs, and abstraction
The simplest form that preserves the meaning
- Photograph → illustration → silhouette
- Icon → circle → dot
- Remove detail; preserve the distinction
02 · Visual language
Metaphors build mental models
The metaphor must preserve the relationship.
- Container → capacity or proportion
- Journey / flow → process or transfer
- Distance → difference or separation
- Weight / scale → burden or magnitude
02 · Visual language
One in five, three meanings
Illustrative proportion: 20%
- A Five equal marks; highlight one
- B Five rooms; one changes state
- C Five seats; one becomes empty
03 · Story through time
A short infographic has an arc
Hook → Setup → Explanation → Payoff
- Question: what are we trying to understand?
- Evidence: what relationship answers it?
- Insight: what should stay with the viewer?
03 · Story through time
A reveal has a reading order
Normal → expectation → exception → meaning
- Establish the pattern
- Let the exception appear
- Explain the consequence
Invented data · units across five observations
03 · Story through time
Comparison keeps its frame
Before / after and small multiples need stable references.
- Same axes and units
- Same framing and baseline
- Same animation clock when comparing change
03 · Story through time
Continuity preserves identity
The viewer should know what survived the transition.
- Persistent identity: A remains A
- Visual anchor: the route stays visible
- Match cut: a shape links two ideas
- Morph: a label explains the new meaning
03 · Story through time
The camera communicates logic
Framing is part of the explanation.
- Zoom in → examine a detail
- Zoom out → restore context
- Pan / track → connect or follow
- Focus change → prioritize information
03 · Story through time
Screening: the visual argument
Watch once for meaning. Watch again for the mechanism.
- What is the claim and who is it for?
- What visual rule holds it together?
- Where does the eye land?
- What does motion explain beyond the words?
04 · Motion as information
Movement can carry the data
The motion itself can be the visualization.
- Speed → a rate
- Frequency → events per interval
- Direction → flow
- Duration → elapsed time
04 · Motion as information
Typography, counters, and repetition
A number can be the main graphic.
- Scale or weight can emphasize magnitude
- Counters reveal a transition
- Repeated units show a quantity
- Pattern breaks expose an exception
04 · Motion as information
Choreography creates hierarchy
Headline → graphic → value → annotation
- One primary reading task at a time
- A pause after new information
- A stable final state for comparison
04 · Motion as information
Narration and graphics share the work
The voice can explain why while the image shows what.
- Redundant: voice and screen repeat
- Complementary: each adds useful evidence
- Expansion: the image reveals another layer
04 · Motion as information
The PowerPoint test
What does the movement mean?
- Does a transition explain a relationship?
- Does timing change the reading order?
- Can an object remain in one visual world?
05 · Models and integrity
Charts have different jobs
The relationship determines the chart.
- Bars → compare quantities
- Lines / areas → change over time
- Donut / pie → parts of one whole
- Scatter → relationship between variables
05 · Models and integrity
Processes are systems
Entities + relationships + rules + change
- Timeline → sequence
- Tree → hierarchy
- Network → connections
- Sankey → proportional flow
05 · Models and integrity
A baseline can exaggerate a difference
98 and 100 are only two units apart.
- Bar lengths should represent the values
- A cropped axis amplifies the visual gap
- Context belongs beside the comparison
Zero baseline · invented values in units
05 · Models and integrity
Sequence is not proof of cause
A → B can become a claim the evidence never made.
- Timing suggests connection
- Arrows suggest mechanisms
- Camera and sound add emphasis
- Sources must support the implied claim
05 · Models and integrity
Every element has a job
Clarity, emotion, and engagement can coexist.
- Remove clutter that obscures evidence
- Keep units, labels, and source context
- Use emphasis in proportion to the claim
- Credit data and third-party assets
06 · Studio practice
Concept before keyframes
A small system is easier to test and refine.
- Idea → relationship → visual model
- Grammar → hierarchy → reveal
- Animate → test → revise
06 · Studio practice
After Effects: concepts into controls
A controller can keep the graphic and its label in agreement.
- Growth → scale / paths / expressions
- Flow → path animation / repeaters
- Reveal → masks / mattes / sequencing
- Systems → parenting / shared controllers
06 · Studio practice
A 24-second explanation
A storyboard for the route comparison
- 0–3 s Hook: same trip, different wait
- 3–7 s Setup: routes and labels
- 7–18 s Explanation: shared playback clock
- 18–24 s Payoff: +12 min, then hold
06 · Studio practice
Project 1: explain one thing
15–30 seconds. Clear enough to understand; polished enough for a reel.
- One focused idea and a defined audience
- A deliberate motif and readable progression
- Any coherent mix of techniques
- Landscape, square, or portrait
06 · Studio practice
Concept sprint
One idea, four beats, one visual rule
- 0–5 min Generate possible topics
- 5–10 min Write the viewer promise
- 10–20 min Sketch four story beats
- 20–30 min Define motif + first test
06 · Studio practice
Week 1 checkpoint
An idea ready for production
- Concept, audience, format, source notes
- Four beats and a storyboard / animatic plan
- Reference board and motif direction
- At least one styleframe or initial motion test
06 · Studio practice
Week 2: clarity test and completion
A first-time viewer is the best test of the explanation.
- Play once without a preamble
- Ask the viewer to state the main idea
- Find the moment of confusion
- Revise and package the final work
Closing
What does the movement mean?
Use movement to make information understandable.
- Name the relationship
- Explain the motion choice
- Check the evidence
- Test the understanding