Fundamental Design Principles
Visual hierarchy, contrast, alignment, repetition, proximity, white space — the invisible rules that separate amateur designs from professional ones. No design degree needed.
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.
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.
✗ Without AI
- ✗Gray text on gray background
- ✗All text the same size
- ✗Similar colors for headings and body
- ✗Buttons that blend into the page
✓ With AI
- ✓Dark text on light background (or vice versa)
- ✓Headlines 2-3x larger than body text
- ✓Bold, distinct heading colors
- ✓Buttons with contrasting fill color and white text
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.
| What to repeat | Why it matters |
|---|---|
| Color palette (3-5 colors) | Creates instant brand recognition |
| Font choices (2-3 max) | Builds visual consistency |
| Spacing patterns | Makes layouts feel organized |
| Button styles | Users learn where to click |
| Photo treatment (filters, borders) | Ties disparate images together |
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.
Left alignment — The safest default. Creates a strong invisible line down the left edge. Use for most body text and cards.
Center alignment — Elegant for short text (headlines, invitations, posters). Dangerous for long text — it creates a ragged edge that's hard to scan.
Right alignment — Uncommon but useful for captions, secondary info, or pull quotes. Creates visual tension that draws attention.
Grid alignment — The invisible scaffolding behind every great layout. Columns, rows, and gutters that keep everything organized.
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.
The CRAP Audit
25 XPVisual 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:
| Pattern | When it happens | What it means for design |
|---|---|---|
| F-pattern | Reading web pages and text-heavy layouts | Users scan the top, then the left side. Put key info top-left. |
| Z-pattern | Landing pages and minimal layouts | Eyes go top-left to top-right, diagonal to bottom-left, then to bottom-right. Put your CTA bottom-right. |
| Gutenberg diagram | Print pages and symmetrical layouts | Top-left gets the most attention, bottom-right gets the least. Put your headline top-left and your call-to-action bottom-right. |
The hierarchy stack — elements that command attention, from most to least:
1. Size — Bigger things get seen first. Always.
2. Color — Bright or contrasting colors pull the eye before muted tones.
3. Weight — Bold text outranks regular text.
4. Position — Top beats bottom. Left beats right (in LTR languages).
5. White space — Elements surrounded by empty space feel more important.
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.
✗ Without AI
- ✗Every inch filled with content
- ✗Text crammed edge-to-edge
- ✗Images touching other elements
- ✗Feels overwhelming and cheap
✓ With AI
- ✓Breathing room between sections
- ✓Comfortable margins and padding
- ✓Images framed by empty space
- ✓Feels calm, confident, and premium
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.
| Balance type | When to use it | Effect |
|---|---|---|
| Symmetrical | Formal designs, invitations, luxury brands | Feels stable, elegant, traditional |
| Asymmetrical | Modern designs, editorial, tech brands | Feels dynamic, energetic, contemporary |
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.
Redesign a Bad Flyer
25 XPDesign Principle Scavenger Hunt
50 XPPutting it all together: the design checklist
Before you finalize any design, run through this:
| Check | Question to ask |
|---|---|
| Hierarchy | Can someone tell what's most important in 2 seconds? |
| Contrast | Are different elements obviously different? |
| Alignment | Is everything aligned to a grid or invisible line? |
| Repetition | Are fonts, colors, and spacing consistent? |
| Proximity | Are related items grouped? Is there space between groups? |
| White space | Is there breathing room, or does it feel cramped? |
| Simplicity | Can you remove anything without losing meaning? |
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.
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.
Knowledge Check
1.You're designing a poster for a local event. The headline, date, location, and a decorative background image all appear to be the same visual 'weight' — nothing stands out. Which CRAP principle is most directly violated?
2.A client asks you to 'fill that empty space on the right side of the homepage' with more text and images. What design principle should guide your response?
3.You're reviewing a social media graphic. The heading is 16px, the body text is 14px, and the subheading is 15px. The viewer can't tell what to read first. What's the most effective fix?
4.Apple's 'Think Different' campaign used a portrait, two words, and large amounts of empty space on a black background. Which combination of principles made it effective?