Archetypes
Six shapes cover almost every explainer diagram. Pick one. Two archetypes in one canvas is two diagrams pretending to be one.
Choose by the question the diagram answers, not by the shape of the source material.
| The question | Archetype |
|---|---|
| What happens, in what order? | Sequence |
| How is the time actually spent? | Timed track |
| Which of these two, and why? | Contrast |
| What sits on top of what? | Layers |
| What surrounds this one idea? | Hero and satellites |
| Where does this land on two axes? | Matrix |
Sequence
Ordered steps, left to right, ending somewhere that matters.
The end state is the point of the diagram, so give it the accent and a different shape from the steps. Steps themselves are quiet and identical — their sameness is what makes the final element read as the payoff.
Number the steps only if order is genuinely load-bearing. Connectors get lighter, not heavier, as they repeat.
Fails when every step is equally emphasised and the eye has nowhere to land.
Timed track
One horizontal bar divided in proportion to real durations, with the duration set large in each segment.
Proportion is the entire idea — a nine-minute segment must be three times the width of a three-minute one. Faking the widths destroys the only thing this archetype offers.
Label above the track, duration inside it. Accent the longest segment, or the one being discussed. Segments narrower than about 60px cannot hold a label; put those labels above with a tick mark down to the segment.
Fails when widths are decorative rather than proportional.
Contrast
Two columns. A shared spine down the middle, or a clear gutter.
Both sides need parallel structure — same number of rows, same row heights, matching phrasing length. The comparison is only legible if the eye can scan across. One side carries the accent; the other stays neutral. Do not colour one red and one green, that reads as scolding.
A single bottom line stating the difference is worth more than a fifth row on each side.
Fails when the two sides have different row counts and the eye cannot pair them.
Layers
Horizontal bands, stacked. Foundation at the bottom.
Band height can encode importance or effort. Keep the left edge flush so the stack reads as one object. Label each band inside on the left, with any elaboration in muted caption on the right of the same band.
Fails when the bands are equal height and evenly spaced, which just makes a table.
Hero and satellites
One central element, three to six around it.
The hero must be substantially larger — half again, at least. Satellites are equal to each other and quieter than the hero. Connectors are thin and go hero-to-satellite, never satellite-to-satellite.
Six satellites is the ceiling. Beyond that, the diagram is a list and should be set as one.
Fails when the hero is only slightly bigger, so nothing is central.
Matrix
Two axes, four quadrants, items placed by position.
Both axes need honest labels at both ends. Position must mean something — if items are scattered for visual balance the diagram is a lie. Accent the quadrant being argued for. Gridlines stay very light; the items are the content.
Fails when items are placed for looks rather than for accuracy.
Canvas
1600x900 for slides. 1600x1200 when the content is genuinely tall — but resist, a tall diagram usually means two diagrams.
Outer margin of 80–96px on all sides. Title top-left. Optional caption or takeaway along the bottom, in muted ink, separated by space rather than a rule.