Contrast, repetition, alignment and proximity

0:00 Four principles that fix most layouts

Here's something that surprises beginners. Most amateur designs don't look amateur because of bad taste. They look amateur because of small inconsistencies. Three fonts. Things almost aligned. Gaps that are a little random. The heading only slightly bigger than the body. Each one is tiny. Together, they scream homemade. The good news is that four principles fix most of these problems: contrast, repetition, alignment and proximity. In this lecture, you'll learn each one, see them fix a real flyer, and get a critique checklist you can run in any review. By the end, your layouts will look calm, deliberate and professional.

0:44 Why these four

Why these four? Because they're how our brains decide what belongs together and what matters. When design follows them, the viewer doesn't have to work. When it breaks them, the viewer feels friction, even if they can't explain it. Think about a well-organized kitchen. Knives in one drawer, spices on one shelf, everything lined up. You can cook without thinking. In a messy kitchen, you spend your energy hunting. Layouts are the same. These principles are the organizing system that makes information easy to find and pleasant to look at.

1:23 Contrast and repetition

Principle one, contrast. If two things are different, make them very different. A heading that's only slightly bigger than body text looks like a mistake. A heading that's much bigger and bolder looks intentional. Use at least two levers: size plus weight, or size plus color. And contrast also means readability. Text needs enough light-dark difference from its background to meet accessibility guidelines, which we'll cover in the color module. Principle two, repetition. Repeat the same fonts, colors, shapes, corner radius and icon style throughout. Repetition is what makes a set of slides or posts feel like one family instead of strangers.

2:07 Alignment and proximity

Principle three, alignment. Nothing should be placed arbitrarily. Every element should line up with something: a margin, a column, or another element's edge. Strong alignment creates invisible lines that make a layout feel stable. Pick one main alignment, usually left for text-heavy designs, and don't mix left, center and right without a clear reason. Principle four, proximity. Items that belong together should sit close together, and unrelated groups should be clearly separated. Here's the key idea. The gap inside a group must be clearly smaller than the gap between groups. If they're similar, the eye can't tell where one group ends and the next begins.

2:53 Worked example 1: a tips slide

Worked example one, simple. A slide in a tips carousel. It has a title, three tips, and a handle at the bottom. The problems: the title is twenty-eight pixels and the tips are twenty-four, so there's almost no contrast. Tips are spaced evenly with the title, so they don't feel like a group. And the handle is centered while everything else is left-aligned. The fixes: the title goes to fifty-six pixels bold. The three tips get sixteen pixel gaps between them, with forty pixels above the group. Everything aligns to the left margin, including the handle. Three small changes, and the slide suddenly looks designed.

3:39 Worked example 2: a clinic flyer

Worked example two, a business scenario with illustrative details. Dr. Sana runs a small physiotherapy clinic in Manchester, and her appointment flyer isn't working. People keep calling to ask for the phone number, which is on the flyer. Let's diagnose. Contrast: the heading barely differs from the body. Repetition: three fonts, four colors and mixed icon styles. Alignment: center, left and right, all mixed. Proximity: the phone number floats between two sections, so nobody knows what it belongs to. The redesign: one font family in two weights, navy plus a single teal accent, one icon set, everything left-aligned, and the phone, address and hours grouped tightly together, with generous space between groups. The calls about the phone number stop.

4:31 Watch me do it: fixing a post in Figma

Watch me do it in a design tool. I have a messy promo post open in Figma. First, alignment. I select all the text layers and use the align left control instead of dragging by eye. Next, proximity. I wrap the offer details in an auto layout frame with a sixteen pixel gap, and the contact details in another. Then I put both frames inside a parent auto layout frame with a forty-eight pixel gap. Now the spacing is consistent automatically. Then repetition. I apply my saved text styles and color styles, so every heading uses the same style. Finally, contrast. I bump the headline up two steps on my type scale and make it bold. Four principles, about four minutes.

5:24 White space

Let's talk about white space, the principle behind the principles. White space, or negative space, is the empty area around and between elements. Beginners see it as wasted space and fill it. Professionals see it as a tool. Space creates proximity groups. It gives the key element room to breathe, which increases its importance. And it makes the whole design feel calmer and more premium. Luxury brands use a lot of space for exactly this reason. So when a design feels cramped, don't shrink everything. Remove something. The fastest way to improve most layouts is to cut one element and give the rest more room.

6:10 Common mistakes

Common mistakes. Weak contrast, where the heading is only a little bigger than the body. Too many fonts and colors, which breaks repetition. Almost-aligned elements that are two or three pixels off, which looks sloppy even if nobody knows why. Centering everything by default, which makes long text hard to read. Equal spacing everywhere, so groups dissolve. And random spacing values, like thirteen pixels here and twenty-two there. The fix for the last one is a spacing scale, like eight, sixteen, twenty-four, forty and sixty-four, which we'll build in the next module.

6:50 Review routine

Let me give you a simple review routine. Before you publish anything, run the four-principle checklist from the lesson. Contrast: do the heading and body differ by at least two levers, and does text pass contrast? Repetition: two typefaces maximum, one or two accent colors, one icon style? Alignment: does everything align to a margin or column? Proximity: are gaps inside groups clearly smaller than gaps between groups? Then write down the single biggest fix and do that one first. In team reviews, this checklist also makes feedback less personal. You're not saying I don't like it. You're saying proximity fails here.

7:34 Recap and try this now

Let's recap. Four principles fix most layouts. Contrast: make different things very different, and keep text readable. Repetition: reuse the same fonts, colors, shapes and icons, so everything feels like one family. Alignment: everything lines up with something, with one main alignment. Proximity: small gaps inside groups, big gaps between them. And white space is the tool that makes all four work. Try this now. Audit one flyer, post or slide you've made using the checklist. Make one fix for each principle, and note which change made the biggest difference. That's your personal weak spot to watch.