Composition

Those relationships make a page easier to scan and extend. Start by placing the ordinary content clearly; then decide whether a particular image or statement would benefit from a deliberate departure.

An oversized image or offset heading can create emphasis when the surrounding layout is stable. The number of departures is a design decision, not a rule that every page must break exactly once. Each exception should have a purpose and still work at narrower widths, with a sensible reading order.

A caption should feel connected to its image; a field label should belong to its input. When every gap is equal, those relationships can become harder to see.

Choose a small set of reusable spacing values and test them with real content. Borders and backgrounds can strengthen grouping, especially in dense interfaces, but they should agree with the spacing. The right balance depends on the component; inner padding does not always need to be smaller than every outside gap.

Repeated left edges help readers move between headings and paragraphs; aligned columns make values easier to compare. Near-matches can look accidental, so choose the reference edge for each group deliberately.

Different content can need different alignment. Text often benefits from a shared starting edge, while numbers in a table may need decimal or right alignment. Check visible shapes as well as their containers, and avoid forcing unrelated elements onto one axis just to make the measurements match.

On an article, that may be the title and introduction. In a working interface, it may be the current task, a search field or an important status. Choose the starting point around the reader's purpose.

Use position, scale and contrast to make that point recognisable, then create a clear next step. Other elements can still be prominent when the task needs them. Avoid assuming that every page needs one oversized headline or one action regardless of its content.