Visual Foundations
Alignment
Elements that share edges create order and are easier to scan.
Why it matters
A shared left edge creates an invisible line the eye can follow. Tiny misalignments feel 'off' even when users can't say why.
How to apply it
- Pick a few alignment lines and snap everything to them
- Left-align body text and forms in left-to-right languages
- Use layout grids and auto layout instead of nudging by eye
Common mistakes
- Centering long paragraphs
- Buttons that sit a few pixels off the text edge
Quick answers
What is Alignment?
Elements that share edges create order and are easier to scan. A shared left edge creates an invisible line the eye can follow. Tiny misalignments feel 'off' even when users can't say why.
How do I apply Alignment in UI design?
Pick a few alignment lines and snap everything to them. Left-align body text and forms in left-to-right languages. Use layout grids and auto layout instead of nudging by eye.
What are common mistakes with Alignment?
Centering long paragraphs. Buttons that sit a few pixels off the text edge.