Nobody can read your architecture diagram; your slide title and its chart say the same thing twice; your dashboard is a wall of data. The problem is rarely the drawing tool—it's that you've never been taught visual narrative. Cartoonists have studied it for a century: how words and pictures cooperate, how to pace a sequence of panels, how one frame can carry a whole idea. Today we steal that craft from comics and graphic novels and move it into the engineer's diagrams, slides, and pitches.
Principle 01
Word & Image: Make Them Do Different Work
Don't Let Words and Pictures Repeat Each Other
Word/Image · McCloud
The Principle in One Line
Words and pictures shouldn't repeat each other; they should complete each other. The weakest pairing is the text saying it, then the picture drawing the same thing; the strongest is the words giving the conclusion and the picture giving the evidence—neither dispensable. A slide is a single comics panel: title and image each do half the job.
"In the inter-dependent combination, words and pictures go hand in hand to convey an idea that neither could convey alone."
— Scott McCloud, Understanding Comics (1993)
Why It Works
Pictures excel at the instant impression and the whole; words excel at precision and causation. Layering the two to say the same thing wastes a channel. McCloud sorts word/picture pairings into categories: the worst is duo-specific (text and image say exactly the same thing), the best is interdependent (each supplies what the other lacks). In technical communication this earns its keep—a slide, an architecture diagram, an illustrated doc are all "image + text" panels, and the question is always: are the two halves doing different jobs?
Revision in Action
Slide title "Quarterly Revenue" above a revenue bar chart. (The title just names the chart—zero new information.)Title "Q3 revenue is dominated by a single customer for the first time," with the tallest bar flagged red. (Words give the conclusion; the picture gives the evidence.)
Title "Monthly Active Users" above a line chart. (The title just names the chart.)Title "MAU growth stalled in March—here's the week it flatlined," with the plateau highlighted. (Words say what; the picture shows where.)
✗ Captions that restate what the image already shows ("As shown, this is a bar chart")
✗ Images that are mere decoration (stock photos) carrying no information
Key References
Scott McCloud, Understanding Comics (word/picture combinations) · Will Eisner, Comics and Sequential Art · Garr Reynolds, Presentation Zen (one line + one image per slide)
This Week's Exercise + Reflection
Pull up a recent deck and ask, page by page: "Are the title and the image saying the same thing?" Rewrite each title into a conclusion sentence and demote the image to evidence. Reflection: if a slide still reads with the words removed, or still reads with the image removed, doesn't that mean you only ever needed one of them?
Principle 02
Panels & Pacing: In the Gutter, the Reader Fills In
Closure—You Don't Have to Draw Everything
Pacing · Closure
The Principle in One Line
The gap between panels—the gutter—is not empty; the reader's mind fills it in automatically. Pacing is set by how many panels you cut and how big each one is: small panels are fast, big panels are slow, and the heaviest moment gets the biggest frame.
"Comics panels fracture both time and space, offering a jagged, staccato rhythm of unconnected moments. But closure allows us to connect these moments and mentally construct a continuous, unified reality."
— Scott McCloud, Understanding Comics (1993)
Why It Works
McCloud calls it closure: give two panels, and the reader imagines what happened in between. That means you don't have to draw everything—the white space actually pulls the reader in. Pacing is a by-product of paneling: four equal frames tick like a metronome; three small and one big create a downbeat. A slide deck, a demo, the paragraphing of a long essay are all paneling—where you cut and where you pause decides what people remember.
Crammed: one panel, no rhythm
Whole architecture diagram—30 components + every arrow, read top to bottom
Paneled: one beat each, biggest frame for the key moment
① bare skeleton
② add data layer
③ add service layer
④ highlight today's path
Break a wall of information into paced frames—the reader connects them across the gutters
Revision in Action
One slide crams in the entire architecture diagram (30 components, every arrow); the speaker reads it top to bottom. (No paneling, no rhythm—the audience overloads instantly.)Split into four panels: ① bare skeleton ② add the data layer ③ add the service layer ④ highlight the one path you're here to discuss. One change per frame; the audience's mind connects them.
A 12-step onboarding flow crammed into one diagram, all arrows at once.Reveal three steps at a time; give the one hard step its own full slide. The gutters between slides do the explaining for you.
✗ One crammed panel (a wall with no gutter—no room to breathe, no way to participate)
✗ All panels equal size (no downbeat—the audience can't tell which moment matters most)
Key References
Scott McCloud, Understanding Comics (closure / six panel transitions) · Will Eisner, Comics and Sequential Art (on timing) · Nancy Duarte, Resonate (slides as panels—see Day 3)
This Week's Exercise + Reflection
Take a complex concept you'll soon present and force it into 4–6 "panels": one action or one change per panel, the most important one drawn largest. Reflection: comics use what they don't draw to pull the reader in—in your slides and docs, what have you over-drawn that should have been left for the reader to fill in?
Principle 03
Infographic Narrative: A Tool for the Eye, Not a Wall of Data
Hierarchy and a Reading Path
Data Viz · Cairo
The Principle in One Line
An infographic isn't "drawing the data"—it's seeing on the reader's behalf first, then laying the conclusion along a reading path. A chart with no focal point and no order is just a wall.
"The first and main goal of any graphic and visualization is to be a tool for your eyes and brain to perceive what lies beyond their natural reach."
— Alberto Cairo, The Functional Art (2013)
Why It Works
Whether a chart is useful comes down to visual hierarchy and a reading path. Thirty boxes of equal weight and a snarl of arrows leave the eye nowhere to land; bold the main path, gray out the secondary parts, number the key nodes, and the reader knows in three seconds "where to start, what to look at." Tufte's line is "above all else, show the data"—but that is not "show all the data." It means: let what deserves to be seen be seen, and send the noise away.
No hierarchy
Every box equal → the eye has nowhere to land
With hierarchy
One focus + quieted background → the point lands at a glance
Same elements—the only difference is what's emphasized. Emphasis is narrative.
Revision in Action
Architecture diagram: 30 equal-sized boxes, a snarl of arrows, no hierarchy. ("Drew everything" = "emphasized nothing.")Bold and highlight the main call chain, drop side components to a gray background, number the key three steps 1→2→3. The reader follows the heavy line and grasps the trunk at a glance.
A dashboard with 18 equal-weight metrics tiled in a grid.One hero number set large, the rest shrunk to small context. The eye lands first on what actually drives the decision.
When to Use + Common Mistakes
✓ Architecture diagrams, system diagrams, dashboards, data decks, whiteboard walkthroughs
✗ Emphasizing every metric equally (= emphasizing none); a chart with no starting point
✗ Pretty but misleading (truncated Y-axis, 3D pie charts, cherry-picked data)
Key References
Alberto Cairo, The Functional Art / The Truthful Art · Edward Tufte, The Visual Display of Quantitative Information · Cole Knaflic, Storytelling with Data
This Week's Exercise + Reflection
Take the most complex chart you've ever drawn and do three things: ① find the single protagonist (main path / key number) and strengthen it; ② quiet the background (gray it, shrink it); ③ give one clear starting point. Reflection: where's the line between "present all the data objectively and completely" and "guide the reader to the conclusion"? When does emphasis tip into distortion?
Principle 04
The Graphic Novel: One Frame Carries the Abstract Weight
Show, Don't Tell, Made Literal
Concrete · Show Don't Tell
The Principle in One Line
Graphic novels prove one thing: the heaviest, most abstract material often needs a single concrete image to bear it. "Show, don't tell" here is literal—don't say "it was tragic," give one frame that makes the reader feel the tragedy.
"Pictures are received information. We need no formal education to 'get the message.' ... Writing is perceived information. It takes time and specialized knowledge to decode the abstract symbols of language."
— Scott McCloud, Understanding Comics (1993)
Why It Works
The graphic novel compresses abstract weight into the concrete. Spiegelman's Maus draws the Holocaust as mice and cats—one metaphor carrying an era of history; Satrapi's Persepolis renders a revolution through a child's eyes in stark black and white. Their shared craft: don't explain the pain—give one image and let the reader feel it. In technical communication this maps to "one core image or metaphor that can carry an entire strategy"—the single picture in a Jobs keynote that beat ten pages of bullets.
Revision in Action
That quarter, team morale was low and everyone was exhausted. (Abstract adjectives—the reader feels nothing.)That quarter, standup stretched from ten minutes to forty, and nobody volunteered for tasks anymore; the Friday celebration cake sat in the fridge until Monday, untouched. (Give the image; let the reader read "low morale" off it.)
Our legacy system was hard to maintain.Every deploy, two engineers stayed past midnight—one watching the logs, one holding the rollback script like a fire extinguisher.
When to Use + Common Mistakes
✓ The hero image in a keynote, personal narrative / promo packet, post-mortems, external storytelling, closing an essay on one metaphor
✗ Abstract adjectives in place of an image ("extremely difficult," "highly challenging," "drive efficiency")
✗ Ten metaphors at once—one piece, one talk needs a single image strong enough to hold
Key References
Art Spiegelman, Maus (1992 Pulitzer) · Marjane Satrapi, Persepolis · Will Eisner, A Contract with God / Comics and Sequential Art · Scott McCloud, Understanding Comics
This Week's Exercise + Reflection
Find one abstract judgment you've written ("the team is highly effective," "the project is high-risk") and swap it for a concrete image or metaphor—something the reader can actually "see." Reflection: pictures are instant, words are precise—in a setting aimed at technical readers that demands precision, when should you trade a little precision for an image that can be "seen"?
Going Deeper
Does this "visual narrative" craft still hold in pure-text settings with no images at all?
It does—and it turns into metaphor. The three core mechanisms of comics each have a no-image counterpart: paneling = paragraphing—where you break and where you start a new section is where you cut a frame; gutter / closure = white space—the omitted transition the reader fills in, which actually deepens engagement; visual hierarchy = bold, subheads, lists, sentence length—your "emphasis" tools when there's no picture. In other words, even without a single drawn image you're still doing visual narrative; the canvas is just the arrangement of words. The reader's eye always sees the "shape" before reading the "content," image or no image.
Is there a difference between Chinese and English in how words and pictures combine?
The principles are the same; the texture differs. Chinese characters are more "pictorial" than the Latin alphabet—their block structure, calligraphic form, and the option of vertical layout make Chinese feel closer to "image," and readers are more sensitive to mixed text/picture layouts and to the visual weight of the characters themselves. The classical "pictures left, text right" and the layout of letter-paper are mature word/image traditions. But closure, hierarchy, and pacing carry across fully: in either language, readers connect frames by inference and locate emphasis by contrast. The difference is mostly at the execution layer—Chinese titles run tighter and prize parallelism and white space; English pulls hierarchy through size and weight. Learn the principle first, then tune the feel.
AI can already generate charts and illustrations—is human visual narrative still needed?
More than ever. AI solves "draw it," not "draw it for whom, emphasize what, leave what blank." It can produce an architecture diagram in a second, but it doesn't know which path today's meeting needs to highlight; it can attach ten pretty illustrations, often unrelated to the message—stepping straight into Card 1's "image as decoration" trap. The hard part of visual narrative was never the rendering; it's judgment: who's the protagonist, how the reader's eye should travel, where to omit so the reader participates. These are narrative decisions—AI can execute, but a human must set the direction. The better AI gets at drawing, the more valuable the person who directs it becomes.
Does comics' "white space invites the reader" conflict with technical docs' "must be precise and unambiguous"?
It depends on the genre; the key is separating "removing ambiguity" from "doing the thinking for them." API docs, runbooks, incident reports can't leave gaps—here a gutter is a bug, every step must be nailed down, ambiguity causes outages. Vision, pitch, teaching, external storytelling need white space—spoon-feed every inference and the reader disengages; let them walk the last step and it sticks. So it isn't "precision vs. participation" as an either/or—it's setting the level by genre: zero gutter for what must be executed; leave one seam for what must be believed and remembered.
Text, talk, video—how does this visual craft land in each?
Text: layout is paneling—build hierarchy and rhythm with paragraphing, image sequences, bold, and subheads, with words and pictures doing different jobs (echoing Card 1). Talk: slides are panels, pacing is controlled by progressive reveal, one beat per slide, the heaviest moment given a full-page image (Card 2 + Duarte, Day 3). Video: now you're in true storyboarding, with one extra layer—coordinating image and narration so the eye and the ear don't fight, and the image actively carrying the half the narration leaves unsaid. One thread runs through all three: the more linear the medium and the more it depends on instant comprehension, the higher the return on visual narrative.