That question will guide every design decision today. Identify the relationship, give the audience a visual language, and use time to reveal an idea they can explain after one viewing.
01
Meaning
An infographic is a visual argument.
Slide 02
An animated infographic is a visual argument
What should the viewer understand?
What matters?
What relates?
What changes?
What does it mean?
An infographic bridges the distance between an abstract idea and a useful mental model. You choose evidence, establish relationships, build a visual language, and control when the audience encounters each idea. Beauty and entertainment help sustain attention, but the argument still needs to be understandable and supported. Think of a graphic you remember. What did it help you understand?
Think it throughWhat is the actual job of an infographic?
Slide 03
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
Our running example uses invented classroom data: Route A takes 24 minutes and Route B takes 36 minutes over the same illustrative distance. Data is the pair of values. Information is the comparison. Meaning is a 12-minute difference, or 50% longer relative to Route A. Experience is the viewer recognizing or feeling the extra wait. Experience should emerge from evidence; it cannot replace evidence. This is a teaching example, not a claim about real commuters.
Think it throughWhere did we move from a fact to an interpretation?
Slide 04
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
Comparison establishes relative values. Accumulation adds units. Transformation changes a state or representation. Flow moves something through a system. Sequence orders events. Hierarchy contains or ranks entities. Correlation describes co-variation. Cause and effect asserts a mechanism. Feedback returns an output to influence the system. These require different evidence and different movement. An arrow can imply a causal claim even when the underlying evidence only shows sequence.
Think it throughName the verb in “a diagram about money.”
Slide 05
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
Instead of introducing 30 points at once, establish what normal looks like, add the change, guide attention to the relevant category, and allow a comparison. Progressive disclosure reduces the amount a viewer must decode at one moment. Keep context visible while introducing detail. Each reveal must answer the next useful question; hiding the scale to manufacture surprise undermines understanding.
Think it throughWhat does the viewer know after each beat?
Slide 06
The comparison needs context
Route B takes 12 minutes longer
Route A: 24 min
Route B: 36 min
Same illustrative distance
Both bars share a zero baseline and the same unit. The difference is 12 minutes. Relative to Route A, 12 ÷ 24 = 50%. Relative to Route B, the same 12 minutes is one third; the denominator matters. All route values in this lecture are invented for demonstration.
Think it throughWhat would “36 minutes” mean without Route A?
A comparison needs a common scaleIllustrative classroom data · minutes · zero baseline
Route A
24 min
Route B
36 min
010203040 min
+12 minutes = 50% longer than Route A
02
Visual language
The audience learns your rules.
Slide 07
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
A visual grammar lets the audience learn the system once and reuse that knowledge. For the route example: a labeled dot is a traveler, a line is the route, an endpoint is the destination, and the label identifies A or B. Consistent color helps identity, but labels also carry it. A motif is the recurring visual idea; the grammar is the rule set that gives it meaning. Opacity and texture can indicate uncertainty only if their meanings are explained.
Think it throughIf color means category, what happens when it suddenly means danger?
Slide 08
Visual variables
The encoding should match the question.
Position / length → precise comparison
Area / size → magnitude
Hue / shape → category
Lightness / texture → ordered value or uncertainty
Position along a common scale and length are useful for comparisons. Size can suggest quantity or importance, so specify which. Hue differentiates categories; an ordered light-to-dark scale can communicate magnitude. Shape can distinguish kinds of entities, orientation can convey direction, and texture can communicate density or uncertainty. These are conventions that depend on context and audience. Avoid requiring the audience to decode too many unfamiliar variables at once.
Think it throughCan the same idea use fewer visual variables?
Slide 09
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%
When area encodes a value, doubling both dimensions quadruples the visible area. To represent a value ratio r, multiply the diameter or side length by the square root of r. A doubling is √2 ≈ 1.414. By contrast, doubling the length of a constant-width bar doubles its area and displayed length. Say whether an object is a quantitative encoding or a qualitative emphasis device.
Think it throughWhich dimension is actually carrying the number?
Twice the value. How much bigger?Area encodes quantity in this demonstration.
Baseline 1× area
Correct scaling 2× area · 141% per side
Doubling width and height creates four times the area. For a 2× area, each dimension should grow by √2.
Slide 10
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
Use different hues for unordered categories and a perceptually ordered sequence for increasing values. Add labels, shape, or patterns so meaning does not depend on color alone. Red does not universally mean bad, and green does not universally mean good. Changes in opacity may read as importance or disappearance unless you explicitly define them as uncertainty. Stable labels are especially valuable during motion.
Think it throughWould this still make sense in grayscale?
Slide 11
Symbols, motifs, and abstraction
The simplest form that preserves the meaning
Photograph → illustration → silhouette
Icon → circle → dot
Remove detail; preserve the distinction
A symbol compresses a concept. A motif repeats a meaningful idea across shots. Abstraction removes detail that is irrelevant to the question. A portrait can support an individual story; a dot can support a population comparison. Do not assume an oil barrel, government building, or warning triangle has a universal meaning. Context determines the interpretation. Repetition should preserve the visual rule instead of simply repeating decoration.
Think it throughWhen would a dot erase something essential about a person?
Slide 12
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
A stadium filling can make capacity tangible, but it also suggests a fixed maximum. A pipe suggests a constrained flow. Distance can suggest inequality but needs a scale if it encodes actual values. Up often means increase; it does not automatically mean improvement. Forward, center, near, and far carry learned spatial associations that vary with context. Analogies such as stadiums or building heights require a verified conversion and stated assumptions.
Think it throughWhat extra claim does your metaphor accidentally introduce?
Slide 13
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
Sketch each version in two minutes and compare interpretations. Equal marks emphasize proportion. Rooms suggest households or spaces, which changes the unit unless that unit is justified. An empty seat may imply absence or loss. Keep the denominator visible and label the unit. Do not attach this invented statistic to a real health or social claim. Discuss how the same numeric proportion can carry very different emotional implications.
Think it throughWhich version changes the meaning of “one”?
03
Story through time
Each beat changes what the viewer knows.
Slide 14
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?
A longer documentary may include setup, context, question, investigation, complication, reveal, consequence, and resolution. A 15–30 second piece compresses that structure into four beats. Every beat should advance the same focused idea. What is the information? So what makes it matter? Now what should the viewer understand or do? A payoff can be an insight; it does not always need a call to action.
Think it throughWrite the takeaway before designing the first shot.
Slide 15
A reveal has a reading order
Normal → expectation → exception → meaning
Establish the pattern
Let the exception appear
Explain the consequence
Use this invented series to discuss an unexpected change: 10, 11, 10, 11, 24 units across five observations. The final increase is visually distinctive only because the earlier pattern establishes an expectation. The timing of a reveal creates emphasis, but the last point still needs context. A dramatic reveal is not evidence for why the change occurred.
Think it throughWhat evidence would you need to explain the jump?
Progressive disclosureStep through a visual argument. All values are illustrative.
Route A
24 min
Route B
36 min
Route B takes 12 minutes longer.
1 / 3 · Establish a baseline: Route A takes 24 minutes.
Slide 16
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
Before/after preserves continuity by keeping spatial positions, framing, and key landmarks. Small multiples repeat the same visual structure for different groups so viewers can compare patterns. If each panel uses a different scale or playback rate, apparent differences may be artifacts of the design. When scale changes are necessary, label them explicitly. A number becomes meaningful through a relevant comparison, not through size alone.
Think it throughWhat must remain unchanged for this comparison to be fair?
Slide 17
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
Object permanence helps viewers track an entity while its position or representation changes. Keep a stable label, color, or route as an anchor. A match cut or morph can link ideas, but a coin becoming a globe may falsely suggest they are the same entity. Distinguish representation change, scale change, spatial regrouping, and semantic change. Give semantic transformations extra context because the meaning, not just the appearance, changes.
Think it throughWhy did this object become that object?
Slide 18
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
Camera movement can guide conceptual navigation: region, city, building, room, person. Preserve an orientation cue as you move. In 2D, cropping, scaling, and position can serve the same functions as a camera. An orbit can reveal additional aspects, but gratuitous depth and perspective may interfere with a quantitative comparison. Ask whether a move adds understanding or merely adds spectacle.
Think it throughWhat question does this camera move answer?
Slide 19
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?
During the screening, use these questions with the selected clips. Compare data-heavy work, talking-head plus graphics, character-led explanation, typography, and process diagrams. First play a short excerpt without commentary; have students paraphrase the idea. Replay and pause on a specific transition, focal point, or change in timing. Record creator, title, link, and excerpt timecode.
Think it throughPause on one frame. What is the next thing the viewer needs?
04
Motion as information
Speed, duration, and rhythm can carry meaning.
Slide 20
Movement can carry the data
The motion itself can be the visualization.
Speed → a rate
Frequency → events per interval
Direction → flow
Duration → elapsed time
Motion can encode quantities instead of decorating a static chart. Define the mapping explicitly. In our equal-distance route example, the traveler taking 36 minutes moves at two thirds the speed of the traveler taking 24 minutes. A longer route and slower speed would be two different explanations; do not change both without evidence. If playback time is compressed, label the conversion. Earthquake magnitude is logarithmic, so a simple shake amplitude is only a qualitative metaphor unless calibrated.
Think it throughWhich visible behavior changes when the value changes?
Duration becomes something you can seeInvented route data · equal distance · 1 second of playback = 6 minutes
Route A · 24 min
A
Route B · 36 min
B
Start → Same destination
Route A arrives after 4 seconds of playback. Route B arrives after 6.
A stays at the destination while B finishes. Identity, distance, and the playback clock remain stable. Reduced-motion mode shows the final comparison immediately.
Slide 21
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
Large type emphasizes a value but is not automatically a calibrated comparison. A counter that lands at 71% can create anticipation, yet its intermediate values are animation frames, not historical observations. Keep the final value visible long enough to read and avoid bouncy overshoot on a measured total. Repeated marks need a unit key. Isolating one mark while dimming the others can direct attention without deleting the denominator.
Think it throughCould a viewer mistake the animation for real change over time?
Slide 22
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
Simultaneous motion competes for attention. Stage arrivals so the viewer can land, read, understand, and reset. Rhythm can accelerate through familiar material and slow down for a new relationship or a key insight. Isolation, contrast, and restrained movement are tools for focus. There is no universal perfect hold duration: test with a first-time viewer, at the actual size and viewing conditions. Provide a static state and respect reduced-motion preferences on interactive versions.
Think it throughCan you read, interpret, and compare before the next change?
Slide 23
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
Redundancy can support a crucial number, vocabulary, or captions; it is not inherently wrong. The problem is making the audience read a paragraph while hearing different words. Complementary audio and graphics divide the explanation thoughtfully. Sound design can reinforce events, while sonification maps values to pitch, pulse frequency, or sound density. Label and keep that mapping stable. Do not rely on sound alone to communicate required information.
Think it throughWhat is lost when the sound is muted?
Slide 24
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?
The critique is about the student’s animated film, not a ban on lecture slides. If a film works equally well as six independent title cards with generic fades, look for an explanation that only motion can provide. In a repair exercise, replace unrelated entrances with a persistent entity moving through a process, or turn two separate value cards into a shared comparison. A deliberate hold can be more useful than constant movement.
Think it throughRepair a weak 10-second sequence with one meaningful transition.
05
Models & integrity
The visual claim must match the evidence.
Slide 25
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
Bars usually need a zero baseline because their lengths encode magnitude. Lines emphasize change and can use a narrower labeled axis when that serves the question. Areas encode filled magnitude, so their baseline needs care. Pie and donut charts show parts of a common whole; avoid too many small slices. Scatter plots show relationships, not proof of causation. Maps answer geographic questions; use one when location matters.
Think it throughWhat relationship would this chart make harder to see?
Slide 26
Processes are systems
Entities + relationships + rules + change
Timeline → sequence
Tree → hierarchy
Network → connections
Sankey → proportional flow
A timeline places events in time; a tree organizes containment or branching; a network shows connections; a Sankey uses band width to represent flow quantity. Ask what exists, what flows, what changes, what stays fixed, and where feedback returns. For a measured flow, labels and totals must agree. Animate the behavior of the system instead of giving every object an unrelated entrance.
Think it throughWhat enters the system, and where can it leave?
Slide 27
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
The example values are invented. With a zero baseline, 98 and 100 are close. With a baseline at 95, the visible bar lengths become 3 and 5; the second looks roughly 67% longer even though 100 is only about 2% above 98. This is why a zero baseline is normally appropriate for bar charts. Non-zero line-chart axes may be useful if clearly labeled and chosen to answer the question honestly.
Think it throughHow would your emotional reaction change with the baseline?
The baseline changes the impressionInvented values: A = 98 units; B = 100 units
98A
100B
Baseline: 0. Visible lengths are 98 and 100 units.
With a baseline of 95, the visible lengths become 3 and 5. B looks about 67% longer even though 100 is only about 2% above 98.
Slide 28
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
Viewers can read sequential events as causally connected. A factory, emissions, atmosphere, and rising temperature may imply a specific causal chain; the source needs to support that chain and its scope. Two variables moving together establish neither direction nor causation by themselves. Clarify uncertainty, missing data, denominators, time windows, and fair comparisons. Timing and selective holds can mislead even when every printed number is correct.
Think it throughWhat claim is the animation making without any text?
Slide 29
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
Data-ink ratio is a useful lens associated with Edward Tufte: consider how much of the visible design communicates relevant information. Chartjunk describes additions that distract or distort, such as perspective that changes perceived bar lengths. It is not a requirement to eliminate all beauty or emotion. Decorative gradients, shadows, textures, and particles deserve scrutiny when they compete with the evidence. Label fictional, estimated, missing, or uncertain values honestly.
Think it throughWhat could disappear without losing meaning?
06
Studio practice
A focused idea becomes a testable system.
Slide 30
Concept before keyframes
A small system is easier to test and refine.
Idea → relationship → visual model
Grammar → hierarchy → reveal
Animate → test → revise
Write a one-sentence promise to a defined audience. Choose the relationship and an appropriate chart, map, process, or metaphor. Decide which visual variables carry meaning and how the eye moves through the composition. Design what the viewer knows at each beat before building the animation. The four levels are a useful critique ladder: an animated graphic, a guided visualization, a visual explanation, and a visual argument. These are teaching categories, not a formal industry rating.
Think it throughWhat will a first-time viewer be able to explain afterward?
Slide 31
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
Connect techniques students already know to the information task. Networks can use shape paths and nulls; maps can use masks and camera navigation; counters can use Slider Control and a Source Text expression. Imported JSON, CSV, or TSV can drive properties through expressions. When one value controls both a chart and its label, revisions are easier to keep consistent. Use procedural rules for repeated entities: value sets size, category sets position, status sets color, and index sets delay. Check anchor points and whether size refers to length or area.
Think it throughWhat should update automatically when the data changes?
Slide 32
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
This is an illustrative timing plan, not a required template. Establish that the distance is the same. Use an explicit compressed clock for the demonstration so A reaches the destination before B. Keep A at the endpoint while B finishes. End with both values and the 12-minute difference. The audience should be able to track identity, compare duration, and state the insight after one viewing. Allow the final hold to adjust based on a real clarity test.
Think it throughWhat would you cut if this had to fit 15 seconds?
Slide 34
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
This 30-minute sprint is an adaptable in-class exercise. Choose a simple, funny, useful, or surprising concept. If it relies on factual claims, identify a source before polishing the metaphor. Sketch entities and relationships, define what color, shape, and motion mean, then choose the riskiest assumption to test with a styleframe or motion test. The supplied lecture also suggests a no-text visualization challenge; use an explicitly hypothetical food-waste quantity if no verified statistic is available.
Think it throughMy video explains ____. My motif helps because ____.
Create a polished animated infographic explaining a simple, funny, useful, surprising, or otherwise engaging concept. You may combine 2D, 3D, typography, character, data, diagrams, collage, talking-head footage, live action, or other techniques—as long as every choice supports the message.
Your piece must
Communicate one focused concept to a defined audience.
Establish a clear hook, progression, and payoff.
Use a deliberate motif or visual rule set.
Lead the viewer's eye through every shot.
Use visuals to explain—not simply repeat text or narration.
Maintain readable pacing and a consistent visual language.
Credit factual information and third-party assets.
Reach demo-reel quality.
Technical starting points
Duration: 15–30 seconds.
Landscape: 1920 × 1080.
Square: 1080 × 1080.
Portrait: 1080 × 1920.
Frame rate: Choose intentionally and keep it consistent.
Style: Any coherent technique mix.
Week 1 Checkpoint
Bring This to Week 2
One-sentence concept promise
Defined audience and viewing context
Verified source/data notes
Four beats: hook → setup → explanation → payoff
Motif and visual grammar
Reference board
Storyboard or animatic plan
At least one styleframe or motion test
Week 2 final package
Finish the 15–30 second video, test it with a first-time viewer, and revise the moments that cause confusion.
Final video and export
Process board or PDF: concept, motif, storyboard, and styleframe
Source and credit list
Source project with linked assets
Short reflection on what the motion helps the viewer understand
Follow the instructor’s directions for codec, filename, and submission location.
Further reading & practice
This lecture adapts the instructor-provided “Animated Infographics: Designing Understanding” and the approved Fall 2026 Week 1 course packet. Numerical examples marked illustrative are teaching models, not real-world findings.
For real-world examples shown in class, record the creator, title, source link, and exact timecode. Describe the communication choice you want to learn from.