Hierarchy, contrast & balance

Good design isn't about decoration — it's about communication. Three foundational principles do most of the work: hierarchy (guiding the eye to what matters most), contrast (making differences clear), and balance (arranging elements so the page feels stable). Master these and even simple pages look intentional and professional.

Visual hierarchy: what should I look at first?

Hierarchy is the order in which the eye notices things. A well-designed page makes the most important element the most prominent, so viewers instantly know where to look. You create hierarchy with size, weight, colour, and spacing:

Above, your eye goes: headline (big, bold, dark) → button (bright colour) → subtext (small, grey). That's deliberate hierarchy — the design decides the order for you. Without it, everything competes and the viewer doesn't know what matters. Every design should have a clear "first thing you see."

Contrast: make differences obvious

Contrast is difference — in size, colour, weight, or space. It's what makes hierarchy work and keeps a design from looking flat and muddy. When two things should be different (a heading vs body text, a primary vs secondary button), make them clearly different:

The second box works because the heading is clearly bigger, bolder, and darker than the text. Weak contrast is the most common reason amateur designs look "off" — everything is a little too similar. When in doubt, push contrast further: bigger, bolder, more colour difference.

Balance: does it feel stable?

Balance is the distribution of visual "weight" so a layout feels settled, not lopsided. Symmetrical balance (centred, mirrored) feels formal and calm; asymmetrical balance (offset but counterweighted) feels dynamic but still intentional:

Here the heading (left) and button (right) counterbalance each other across the space — it feels stable. Balance doesn't mean everything is centred; it means the visual weight is distributed intentionally so nothing feels like it's about to tip over.

The mistake beginners make

Making everything the same — same size, same weight, same emphasis — so there's no hierarchy and weak contrast, leaving a flat, unclear page where nothing stands out. The fix is almost always more contrast: make the important thing clearly bigger/bolder/brighter, and the secondary things clearly quieter. Also, cramming elements so the page feels unbalanced and cluttered. Establish a clear hierarchy, push contrast until differences are obvious, and distribute weight for balance.

Your turn

Take this flat design and give it hierarchy and contrast — make the headline clearly dominant, the button prominent, and the supporting text quiet:

Your turn

1. Create clear visual hierarchy — make the most important element the most prominent (size, weight, colour, space).
2. Push contrast so differences (heading vs text, primary vs secondary) are obvious, not subtle.
3. Distribute visual weight for balance so the layout feels stable and intentional.

Key points

• Hierarchy guides the eye to what matters most first — created with size, weight, colour, and spacing.
• Contrast (clear difference) makes hierarchy work; weak contrast is the top reason amateur designs look 'off'.
• When in doubt, push contrast FURTHER — make the important thing clearly bigger/bolder/brighter.
• Balance distributes visual weight so a layout feels stable — symmetrical (calm) or asymmetrical (dynamic but intentional).