Principle 01 · Alignment
Alignment
Alignment creates invisible visual connections between related elements. A clear shared edge helps a layout feel organized, intentional, and easier to scan.
Related elements settle onto one invisible line.
See the principle
Without alignment. With alignment.
Online workshop
Design pages that feel effortless.
Learn the practical rules behind calm, confident digital layouts in one focused session.
Online workshop
Design pages that feel effortless.
Learn the practical rules behind calm, confident digital layouts in one focused session.
Nothing else changed. The aligned version simply gives the content a shared visual edge.
Practice
Now try it yourself.
Arrange the loose elements so the layout feels intentionally aligned.
Interactive exercise
Align the loose elements with the headline.
Drag an element horizontally, or select it and use the movement controls.
Complete
Aligned ✓
A shared edge connects the content into one clear group. Compare the exact scramble you fixed with the finished design.
Compare
studio.fieldnotes.design/workshops
Reference element
Design pages that feel effortless.
The principle
Why alignment works
When related elements share an edge, the eye reads them as a group. The layout feels calmer because every item participates in the same underlying structure.
Good alignment is often invisible. You notice it most clearly by comparing an inconsistent version with a corrected one—which is why the game keeps your exact starting scramble for the final comparison.
Continue learning
Next principle · 02
Visual hierarchy
Guide attention by making the most important information unmistakable.
View all principles