Ryan Perez · Infographics & galleries

A visual explanation, not a large image.

An infographic explains one relationship. A gallery organises many related objects. Both live or die on the same three things: a real structure underneath, evidence attached to every claim, and an accessible text equivalent that survives when the image does not load, does not fit, or cannot be seen.

The distinction One visual explaining a complete relationship is an infographic. Several related visuals to inspect is a gallery.
{{ f.t }}
Every term is required. Drop the question and it becomes decoration; drop the evidence and it becomes an assertion; drop the accessible alternative and it becomes unreadable to a crawler, a screen reader, and anyone on a narrow phone.
Type selection

The information condition picks the type

Eighteen conditions. You do not choose a timeline because timelines look good — you choose it because the information is ordered events.
{{ m.d }} {{ m.t }}
Timeline Ordered events
{{ m.t }} {{ m.arrow }}
Process Ordered instructions
{{ g.t }} {{ i.t }}
Taxonomy Categories
{{ p.t }}
Tree or pyramid Hierarchy
A B {{ c.k }}
Comparison Two or more options
{{ b.k }}{{ b.v }}
Data comparison Numeric differences
Jan+34% by Oct
Trend Change over time
{{ c.t }}{{ c.w }}%
Composition Parts of a whole
{{ k.t }}
Map Geographic relationships
{{ c.t }} → 70% unqualified
Causal diagram Causes and effects
In {{ i.t }} → Funnel → Out {{ o.t }}
System map Inputs and outcomes
Budget known? yesno {{ b.t }}
Decision tree Branching decisions
Measure ↖ ↘ Learn Build
Cycle Repeated stages
Before 31% qualified After 72% qualified
Transformation Before and after
70% of enquiries rejected before contact Northline CRM, 12 months to Aug 2026
Statistic-led One large result
Qualification before the pitch raised qualified leads 41% {{ e.t }} No control group · seasonality not isolated
Evidence summary Research findings
{{ f.t }}
Framework map Multiple connected variables
{{ a.n }} {{ a.t }}
Annotated diagram Object anatomy
Anatomy

Fourteen parts, five mandatory

{{ a.t }}
Blue are required on any published infographic. The rest are earned by the specific piece.
{{ r.a }} {{ r.b }}
Selection

Six checks — and five say don't

Most requests for an infographic are better served by something else. Run these before opening a canvas.
{{ r.a }} {{ r.b }}
Patterns

Six layouts, drawn

↓ ↓
↓
Vertical explainer Headline, context, three to seven visual sections, conclusion, sources. Processes, timelines, educational stories.
Modular grid Headline, a metric row, paired findings, conclusion. For several parallel findings of equal weight.
Condition ↓
→ →
↓ Feedback
Central-system map Condition above, input and outcome either side, feedback below. The default for LAKA models and frameworks.
Comparison Shared criteria stated first, then the two options, then the differences, then a recommendation you are willing to sign.
68%
Evidence-led The finding at display scale, the chart beneath it, then interpretation, method and sources. Research and audit output.
Annotated object One object, leader lines out to labels. Anatomy, exploded views, interface tours.
Density

Five limits on how much fits

{{ r.a }} {{ r.b }}
Typography

Six levels, in order

{{ t.t }} {{ t.note }}
{{ r.t }}
Responsive

The desktop graphic is not the mobile graphic

{{ r.a }} {{ r.b }}
Colour encoding

What the colour is doing decides the scale

Three encodings, three scales. On a near-monochrome canvas with one accent, the ramps are built from the accent's own lightness — not from new hues.
{{ c.t }} {{ c.when }}
{{ c.rule }}
{{ r.a }} {{ r.b }}
Evidence

Five rules on claims

A number inside a graphic reads as fact. That is exactly why an unsourced one is a liability rather than a design choice.
{{ r.a }} {{ r.b }}
The three labels A measured figure, an inference drawn from it, and an opinion about what to do are three different things. Label which one each statement is, and the graphic can carry all three honestly.
LAKA states

Ten treatments of one graphic

{{ l.a }} {{ l.b }}
Accessibility

The four equivalents

{{ a.t }} {{ a.d }}
Alt text

Purpose, not transcription

{{ l.t }}
Alt text says what the graphic is for and what it shows. The detail goes in the HTML underneath it, where everyone can reach it — including the crawler that will never see the pixels.
{{ f.t }}
Type selection

The collection condition picks the gallery

Grid Equal independent images
Featured One highlighted item
{{ n.n }} {{ n.t }}
Narrative Sequential story
BeforeAfter
Transformation Before-and-after work
{{ c.v }}
Case study Project portfolio
Product Product images
{{ f.t }} 3 of 24 shown
Filterable Categories
{{ g.d }}
Timeline Chronological media
Masonry Many dense items
× ‹ › 3 / 12
Lightbox Large single-image viewing
Carousel Horizontal browsing
{{ m.t }}
Map Geographic items
{{ c.t }}
Community User submissions
Form completion by step, Q2 CRM export · n=1,412 Verified
Evidence Research evidence
{{ r.a }} {{ r.b }}
Anatomy

Sixteen parts, including two states people forget

{{ a.t }}
Red are the ones that get skipped and then break in production: the empty state after a filter returns nothing, and the error state when media fails to load.
Grid geometry

One declaration, every viewport

{{ l.t }}
The min(100%, …) is what makes it work at 320px. Without it the track never shrinks below its stated minimum and the grid overflows the phone.
{{ r.a }} {{ r.b }}
The five that need their own rules

Specialised galleries

{{ s.t }} {{ s.formula }}
{{ i.t }}
{{ r.t }}
Filters & sorting

Six rules, one of them about URLs

{{ r.a }} {{ r.b }}
Loading strategy

Three options, ranked by safety

{{ l.t }} {{ l.verdict }}
{{ w.t }}
Whatever the visible behaviour, crawlable paginated URLs must exist underneath — and the footer must stay reachable.
Lightbox

Focus is the whole contract

{{ r.a }} {{ r.b }}
Never
{{ n.t }}
Accessibility

Eleven requirements

{{ a.t }}
Performance

Seven rules for image weight

{{ r.a }} {{ r.b }}
Responsive

Five rules as the viewport narrows

{{ r.a }} {{ r.b }}
LAKA states

Eleven gallery treatments

{{ l.a }} {{ l.b }}
Infographic page

Eighteen elements when it is a primary asset

{{ p.t }}
{{ r.a }} {{ r.b }}
Gallery images

Eleven per-image requirements

{{ p.t }}
{{ r.a }} {{ r.b }}
Structured data

Content selects the type

{{ s.a }}{{ s.b }}
{{ r.t }}
Downloads

Four rules when it leaves the site

{{ r.a }} {{ r.b }}
One canonical explanation A PDF, a PNG and an HTML page carrying the same information are three formats of one asset — not three assets. All of them point back to the HTML page, and only that page is canonical.
Selection engine

Which one, and what it needs

{{ l.t }}
Agent contract

Both objects, machine-readable

{{ l.t }}
The governing distinction An infographic explains one relationship. A gallery organises many objects. Both must survive the loss of the image. Whichever you build: give it contextual HTML, optimise its delivery, preserve its accessibility, verify every factual claim, and connect the asset to a real funnel action. An asset that produces admiration and no progress has not done its job.