Spacing tells people which details belong together.
01 / UNDERSTAND
Elements positioned close to one another tend to be read as related. Wider gaps can separate groups without drawing a container around them. This makes spacing a meaningful part of the interface rather than leftover space after content is placed.
Begin with the relationships the task requires. A label should be visually closer to the value or field it describes than to a competing one. A heading should stay close enough to its content that the association remains clear. Preserve those relationships when text wraps, error messages appear or the layout changes size. Screen-reader order and semantic markup still matter: a convincing visual grouping cannot correct a reading order that says something different.
02 / RECOGNISE
Examples of how the principle can appear in an interface.
Apple Music’s Now Playing screen places the song title and artist together below the artwork. Playback controls form another nearby cluster below them. The spacing helps separate information about the current track from actions performed on it, while preserving their relationship within one screen.
Slack’s published Home walkthrough puts channel names close to their heading, then separates direct messages into another group. The spacing helps communicate which heading each item belongs to. Check the same relationships with long names and a larger list.
03 / CONNECT
Useful spacing can reduce mistaken associations between labels, values and actions. Ask people which information belongs together and check their interpretation at mobile widths.
Possible influences to investigate, rather than guaranteed outcomes for every product.
04 / APPLY
Use smaller gaps within a group than between groups
Keep labels and supporting text beside their subject
Check grouping when content wraps or changes size
05 / EXPLORE WITH UPSLIDE
Use a practical guide, read a deeper explanation, or examine a related Upslide project.
Use spacing to reveal information relationships before adding more borders and containers.
Review how internal and external spacing separate groups in a layout.
Inspect the association between labels, fields, document status and actions.
CONNECT THE IDEAS
Keep exploring
