Alignment

Alignment is the design principle of positioning elements so their edges or centers line up along a shared axis, creating a clean visual connection between them. It's one of the core building blocks of visual organization, alongside proximity and contrast.
‍
When elements are aligned, they read as related and intentional rather than random. Misaligned elements, on the other hand, can make a layout feel messy and harder to scan.

Why does Alignment matter?

Good alignment gives a layout structure and improves readability, since a viewer's eye can follow a clear line instead of jumping around the page. It also reinforces hierarchy, letting related items like a label and its input, or an icon and its text, appear as a single unit.

A simple example is left-aligning a block of body text and its heading along the same edge, or centering a modal's title, message, and buttons together. Designers typically use grids and guides to keep alignment consistent across a whole interface.

Similar