-
Name the one focal point — before composing anything. Every composition needs exactly one
element that wins the first fixation: the largest, the most isolated, the highest-contrast, or
the most off-centre. Write it down ("the hero headline wins"). If you cannot name it, the
composition has none — which is the defining AI-slop failure (ai-slop-taxonomy.md: everything
equal, nothing leads). One focal point, not three; competing focal points cancel to zero. See
references/hierarchy-techniques.md §Focal point.
-
Build hierarchy from extremes, never from middle steps. Separate the levels with scale
extremes (a real 3×-class jump from hero to body, per type-scale-and-spacing.md "real jumps,
not timid ones"), weight extremes (100/200 against 800/900, not 400 against 600 — same ref),
and space extremes (isolate the focal point with far more air than anything else gets).
Three levels, each unmistakably distinct. Timid, near-equal steps are the slop tell — they read
as "assembled," because a templating tool spaces everything evenly.
See references/hierarchy-techniques.md.
-
Choose a deliberate eye-path and place elements along it. Decide the route the eye takes:
Z-pattern for sparse, visual, scan-fast layouts (centred hero, top-bar nav); F-pattern
for text-dense pages where readers scan left edges; a diagonal or radial path when one image
or number anchors the field. Place the focal point at the path's entry, the primary action at
its exit. Treat F/Z as eye-tracking heuristics under this skill's focal-point rule, never as
laws (sourcing-authority caveat). See references/composition-and-flow.md §Eye-path.
-
Compose with intentional asymmetry and tension. Dead-centre symmetry is the zero-decision
default; it reads as a placeholder. Following the Swiss/asymmetric tradition (Tschichold,
Müller-Brockmann), pull the focal point off the centre line and let a large element pull against
a smaller one across open space — that pull is tension, and tension is what makes a composition
look authored. A composition with no tension is inert. See references/composition-and-flow.md
§Asymmetry and tension.
-
Control figure-ground — make the focal point sit clearly in front. The eye must instantly
separate the subject (figure) from its background (ground). Establish it with contrast in
value, scale, or focus: a dark subject on a light field, a sharp element over a blurred one, a
large mark in open space. Ambiguous figure-ground (everything the same value and weight on a
busy field) is fatiguing and reads as machine-flat. Never place type on a busy field unaided —
use a contrast overlay (type-scale-and-spacing.md). See references/composition-and-flow.md
§Figure-ground.
-
Treat whitespace as structure, not leftover. Negative space is a compositional element you
place on purpose: it isolates the focal point, groups what belongs together, separates what does
not, and sets the reading pace. The most important element is the one with the most air around
it — space confers rank. Uneven, confident whitespace (tight where things relate, wide where
they don't) signals authorship; uniform padding everywhere signals a default. Do not "fill"
space; earn it. See references/hierarchy-techniques.md §Whitespace as rank.
-
Apply the halation rule at every high-contrast edge. Pure #000 against pure #FFF
produces halation — an optical edge-shimmer where the values vibrate and fatigue the eye
(Paduraru, Fundamentals; corroborated in docs/book-study/01-ui-ux-craft.md). Never compose a
focal point on a pure-black-on-pure-white edge. Pull the dark to a near-black (e.g. an off-black
ink) and/or the light to an off-white, so the highest-contrast boundary in your composition is
deliberately softened. This is a physical optics reason, not a style preference. See
references/hierarchy-techniques.md §The halation rule.
-
Read the composition back as a stranger would. Squint at it (blur the detail) and check:
does one thing still dominate? Is there a single obvious entry and a path out? Is there
asymmetric tension, or did it settle to centre? Then run the checklist below.
