Fundamental Design Principles

In 1997, Apple was 90 days from bankruptcy. Then they put up a poster.

Steve Jobs had just returned to Apple. The company was bleeding money, making beige boxes nobody wanted. Jobs didn't start with a new product. He started with a campaign: "Think Different." A black background. A portrait of Einstein, Gandhi, or Lennon. Two words in a clean sans-serif font. That's it.

No product shots. No specifications. No "buy now." Just a face, two words, and miles of empty space.

It worked. Within two years, Apple went from near-death to launching the iMac — and the "Think Different" campaign became one of the most recognized visual identities in advertising history. The design wasn't complicated. It was principled. Every pixel obeyed rules that made the message impossible to ignore.

Those same rules work for your Instagram post, your pitch deck, and your business card. They work because they're rooted in how human eyes and brains process visual information — and they haven't changed since the Renaissance.

Design isn't decoration. It's communication. And these principles are the grammar.

What you'll walk away with: By the end of this module, you'll know the four CRAP principles that fix 90% of bad designs, understand how visual hierarchy controls where eyes look, and be able to audit any design — poster, website, social post — using a concrete checklist. You'll also diagnose real-world design problems and sketch fixes.

The CRAP principles: the four rules that fix 90% of bad designs

Robin Williams (the designer, not the comedian) coined the acronym in her book The Non-Designer's Design Book. It's crude, it's memorable, and it works: Contrast, Repetition, Alignment, Proximity — CRAP.

Contrast: if things aren't the same, make them really different

Contrast is the most powerful tool in design. It creates visual hierarchy — telling the viewer's eye where to look first, second, and third.

The rule: if two elements are different, make them obviously different. A 14pt heading over 12pt body text isn't contrast — it's a mistake. A 36pt bold heading over 14pt regular body text is contrast.

Repetition: consistency builds trust

Repetition means reusing visual elements — colors, fonts, spacing, button styles — throughout a design. It creates cohesion and tells the viewer "this all belongs together."

Look at any professional brand: Coca-Cola uses the same red, the same script font, the same ribbon shape everywhere. Spotify uses the same green, the same rounded corners, the same sans-serif type across every touchpoint.

Alignment: nothing should be placed arbitrarily

Every element on a page should have a visual connection to something else. When things are aligned, the design feels organized even if you can't articulate why. When things are randomly placed, it feels amateur — even if the individual elements are beautiful.

The most common mistake: mixing center and left alignment randomly on the same page. Pick one alignment strategy and stick with it.

Proximity: group related things together

Elements that are related should be close together. Elements that aren't related should be far apart. This sounds obvious, but it's the most violated principle in amateur design.

Your brain uses physical proximity as a shortcut for logical grouping. When a headline is closer to the paragraph below it than to the one above it, you know they belong together — without reading a word.

There Are No Dumb Questions

"Do professional designers actually think about CRAP principles, or is this just beginner stuff?"

Every professional designer uses these principles — they've just internalized them. When a senior designer at Apple spaces elements on a page, they aren't consciously thinking "proximity." But if you showed them a layout that violated proximity, they'd immediately say "something feels off." Learning the rules explicitly is how you build that intuition.

"Can I break these rules?"

Absolutely — once you know them. Every great design breaks at least one rule intentionally. The key word is "intentionally." Breaking alignment to create visual tension is a design choice. Breaking alignment because you didn't notice is a mistake. Learn the rules first, then break them with purpose.

<classifychallenge xp="25" title="Name That Design Violation" items={["A poster where the headline, date, and location are all the same font size and weight","A website where body text is left-aligned but headings are center-aligned on the same page","A flyer using five different fonts, three background colours, and two unrelated photo styles","A business card where the phone number is closer to the company name than to the email address it belongs with","A social media graphic where the background is medium grey and the text is dark grey — everything blends together"]} options={["Contrast","Repetition","Alignment","Proximity"]} hint="Ask yourself: is the problem that nothing stands out (Contrast), that visual elements are inconsistent (Repetition), that things aren't lined up (Alignment), or that related items are too far apart / unrelated items too close (Proximity)?">

Visual hierarchy: controlling where eyes go

Visual hierarchy is the arrangement of elements so viewers process them in the order you intend. It's contrast, proximity, alignment, and repetition working together to create a reading path.

The human eye follows a predictable pattern:

The hierarchy stack — elements that command attention, from most to least:

White space: the design principle everyone ignores

White space (or negative space) is the empty area between and around elements. Beginners treat it as wasted real estate. Professionals treat it as the most powerful element on the page.

Apple, Google, and every luxury brand use white space aggressively. It signals confidence: "We don't need to shout. We have one thing to say, and we'll let it breathe."

Composition: arranging elements on the canvas

Composition is how you arrange all elements within a frame. Two frameworks that work for any design:

The rule of thirds

Divide your canvas into a 3x3 grid. Place key elements along the grid lines or at the intersections. This creates dynamic, visually interesting compositions — far better than centering everything.

Visual weight and balance

Every element has visual "weight" — determined by size, color, density, and position. A balanced composition distributes weight so the design doesn't feel like it's tipping over.

There Are No Dumb Questions

"I know these rules but my designs still look bad. What am I missing?"

Usually it's one of two things: too many fonts (stick to 2), or too many colors (stick to 3-5). Simplification fixes most amateur designs faster than any other technique. Remove elements until it breaks, then add the last one back.

Putting it all together: the design checklist

Before you finalize any design, run through this:

The last question is the most important. Antoine de Saint-Exupery said: "Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away." That's the single best design rule ever written.

Back to that poster

Remember Apple's "Think Different" campaign — black background, a portrait, two words? Now you can decode exactly why it worked. Contrast: white text on pure black, maximum differentiation. Alignment: every element centred on a single vertical axis. Proximity: the portrait and the text are the only two groups, clearly separated by white space. Repetition: the same layout, same font, same treatment across every portrait in the series. And white space did the heaviest lifting — the emptiness made the few remaining elements impossible to ignore. Jobs didn't need a design degree. He needed these principles. So do you.

Key takeaways

• CRAP principles (Contrast, Repetition, Alignment, Proximity) fix 90% of amateur designs — learn them, then internalize them.
• Contrast creates hierarchy — if two things are different, make them obviously different. The squint test reveals whether your hierarchy works.
• White space is an active design element, not wasted space. It signals confidence and makes everything else more impactful.
• Visual hierarchy controls where eyes go — use size, color, weight, position, and white space to guide viewers through your content in order.
• Alignment is invisible glue — every element should connect to something else on the page. Pick one alignment strategy and commit.
• Simplicity wins — when in doubt, remove elements until the design breaks, then add the last one back.

Next up: You know the structural rules — now you need the visual building blocks. The next module covers the two systems that bring designs to life: color and typography — Color & Typography.