Gixo Prism · Visual guide
Visual Hierarchy
Visual hierarchy is the arrangement of elements so a reader takes them in the order you intend. It is produced by a small set of levers — size, weight, colour and contrast, spacing, and position — and it works by difference: an element reads as important because it differs from its neighbours, not because of any absolute property. The practical consequence is that emphasising everything emphasises nothing.
Compare three real infographic examples with their purpose, reading order and source limits.
Last reviewed: August 2026
A current Prism output
This current Prism output uses size, order, and contrast to make its information hierarchy explicit.
The levers, in order of strength
Size is the strongest lever and the bluntest. A markedly larger element will be read first almost regardless of what else is happening, which is why the takeaway, not the header or logo, should usually be the largest thing on a visual.
Contrast comes next, and it is the one most often lost in production. A hierarchy built in mid-greys on a bright monitor collapses on a projector or a phone in daylight. If the difference between your primary and secondary text is subtle in the design tool, it will be invisible in the room.
Spacing is the most underused. Whitespace around an element isolates it and raises its rank without changing the element at all, and it does so without adding visual noise the way a box or a colour block would.
Position matters least in isolation but interacts with everything: readers of left-to-right scripts start top-left, so an element placed there inherits attention it may not deserve. That is why decorative headers so often steal the entry point from the actual message.
Levers and how to use them
| Lever | Raises rank by | Failure mode |
|---|---|---|
| Size | Making an element markedly larger | Everything scaled up, so nothing dominates |
| Weight | Heavier type or thicker strokes | Bold used for emphasis so often it stops meaning it |
| Colour and contrast | Higher contrast against the background | Subtle greys that vanish on a projector |
| Spacing | Isolating an element with whitespace | Uniform spacing, so grouping reads as a single block |
| Position | Placing at the natural entry point | A decorative header occupying the strongest position |
Testing whether your hierarchy works
Squint at it
Blur until detail is lost. Whatever is still legible is what a scanning reader gets, and it should be the takeaway.
Ask someone where they looked first
Do not explain the design beforehand. The answer is your actual entry point, whatever you intended.
Count the emphasised elements
More than two or three levels and the hierarchy has flattened. Demote until the order is unmistakable.
Check it in the real conditions
Projector, phone, print. Contrast-driven hierarchy is the first thing to break outside the design tool.
Run a contrast check
WCAG thresholds are a floor, not a target, but failing them means part of your audience cannot see the hierarchy at all.
What Gixo Prism does here
Prism applies typographic scale, spacing and brand tokens as part of rendering, so hierarchy stays consistent across a set of visuals rather than being re-established by hand on each one. The free contrast and colour-vision checkers test the two levers most likely to fail outside the design tool.
Visual hierarchy: FAQ
What is visual hierarchy?
The arrangement of elements so a reader takes them in the intended order, created by size, weight, contrast, spacing and position.
What is the strongest way to create hierarchy?
Size. A markedly larger element gets read first almost regardless of context, which is why the takeaway should usually be the largest thing present.
Why does my hierarchy disappear on a projector?
It is probably built on subtle contrast. Mid-grey differences that read clearly on a bright monitor collapse on a projector or a phone outdoors.
How many levels of hierarchy should a visual have?
Two or three. Beyond that the levels stop being distinguishable and the hierarchy flattens into uniform emphasis.
Keep the values, scoring rules and visual handoff together
Make a scorecard from the scale you actually use
For a weighted decision scorecard, review the criteria, declared score range, direction and weights alongside the source. When the required inputs are complete, Prism computes the weighted result from those values. A correct total does not establish that the criteria, ratings or recommendation are right.
Build diagrams using the labels people recognize
Choose connections and parents by their item labels in the Diagram maker. Review the preview before saving; Make keeps the resulting visual available while its save is confirmed. Inspect missing or unmatched source values separately from the visual design.
Choose HTML for a composed infographic
A composed infographic can export its rendered HTML rather than only a picture of the composition. Review the downloaded text, layout and pictures in a browser before embedding it. Image-based artwork inside it remains artwork; an HTML download does not make every visual element independently editable or synchronize the saved source. Current visuals use Inter as the default typeface.
Follow the Prism maker and export guide Review the decision workflow
Updated