design-philosophy

name	design-philosophy
description	Design thinking and taste-building principles based on Dieter Rams. Use when making design decisions, reviewing UI quality, or building taste for any visual interface — web or native.

Design Philosophy Skill

How to think about design. Not tools — thinking.

"The details are not the details. They make the design." — Charles Eames

---

The Core Truth

Everyone has access to the same tools. Framer Motion, Three.js, Tailwind, GSAP — they're commoditized. What makes something 1 of 1 is taste, and taste is built through intentional observation and relentless editing.

The skill isn't "I know how to use X." The skill is: "I can look at a blank page and know what belongs there."

---

Dieter Rams' 10 Principles

The foundation. Memorize these.

1. Good design is innovative
2. Good design makes a product useful
3. Good design is aesthetic
4. Good design makes a product understandable
5. Good design is unobtrusive
6. Good design is honest
7. Good design is long-lasting
8. Good design is thorough down to the last detail
9. Good design is environmentally friendly
10. Good design is as little design as possible

#10 is everything: "Less, but better."

---

The Questions That Matter

Before any design decision, ask:

About the whole:

• What's the one feeling this should create?
• What would Steve Jobs remove?
• If I had to cut 50% of this, what stays?

About each element:

• What happens if I remove this? (If nothing — remove it)
• Does this earn its place?
• Is this decoration or communication?

About motion:

• Why does this move? (If no answer — don't animate)
• Does this motion guide attention or distract?
• Would Apple do this?

About typography:

• Can I read it in 0.5 seconds?
• Does the hierarchy lead the eye?
• Am I using more than 2 font weights?

---

Design for Feeling, Not Features

Great landing pages don't list features. They create emotional responses.

Brand	The Feeling
Apple	"I want this"
Linear	"This is serious software"
Stripe	"These people are smarter than me, I trust them"
Notion	"I could organize my entire life"
Vercel	"Speed and elegance"
Superhuman	"I'll be more productive"

Before designing, write one sentence: "When someone sees this, they should feel _______________."

Everything flows from that sentence.

---

The Hierarchy of Impact

What actually matters, in order:

1. Typography (80% of design)

• Get this right, everything else follows
• One typeface, two weights maximum
• Size contrast creates hierarchy (not color, not weight)
• Line height matters more than you think

2. Whitespace

• Empty space is not "nothing" — it's intentional
• Whitespace creates focus
• When in doubt, add more space
• Cramped = cheap, Spacious = premium

3. Hierarchy

• What do I see first? Second? Third?
• Squint test: Does the important stuff pop?
• One focal point per viewport

4. Color

• Restraint. One accent color.
• Dark mode ≠ black background (#0a0a0a, not #000000)
• Color draws attention — use it sparingly

5. Motion

• Last priority, not first
• Motion should guide, not decorate
• One signature animation > ten generic ones

---

Constraint Breeds Creativity

The best work comes from limitation. Before starting:

Pick constraints:

• One typeface
• One accent color
• Maximum 3 sections
• One animation style
• One "wow" moment

"What if I could only use..."

• Black, white, and one color?
• No images?
• No animations?
• 100 words total?

Constraint forces creativity. Unlimited options create mediocrity.

---

The Process

1. Define the feeling (before anything else)

Write it down. "This should feel like ___."

2. Study 10 references

Not to copy — to understand. For each one:

• What's the feeling?
• What's the one thing they want me to notice?
• What did they remove?

3. Typography first

Set your type. Hierarchy. Spacing. This is 80% of the work.

4. Layout in grayscale

No color yet. If it doesn't work in grayscale, color won't save it.

5. Add one "moment"

The thing people screenshot. The reason they say "wow."

6. Edit ruthlessly

• Remove 30% of what you have
• Then remove 20% more
• If you're not slightly uncomfortable, you haven't removed enough

7. Refine details

• Spacing in 4px increments
• Consistent border radius
• Micro-interactions on buttons
• Hover states that feel intentional

---

How to Build Taste

Taste isn't innate. It's developed.

1. Look at great work daily

Not scrolling — studying. 15 minutes of intentional observation:

• godly.website
• awwwards.com
• land-book.com

2. Analyze, don't admire

Don't say "this is cool." Say:

• "The tension between the massive headline and the tiny subtext creates drama"
• "They used motion to guide my eye from hero to CTA"
• "The single accent color makes every orange element feel important"

3. Save with intention

When you save a reference, write why. "Cool animation" teaches you nothing. "The staggered reveal creates anticipation" is insight you can reuse.

4. Recreate

Take a site you love. Rebuild it from scratch. You'll learn more in 4 hours than 40 hours of tutorials.

5. Ship and reflect

After launching, ask:

• What would I remove now?
• What feels dated already?
• What do people actually compliment?

---

Red Flags (You've Gone Wrong If...)

❌ You're explaining why something is there ❌ You added an animation "because it's cool" ❌ You're using more than 2 colors ❌ The page feels "busy" ❌ You can't describe the feeling in one word ❌ Everything is fighting for attention ❌ You're proud of how much is there

Green Flags (You're on Track If...)

✅ It feels "obvious" — like it couldn't be any other way ✅ You're slightly uncomfortable with how little is there ✅ The hierarchy is crystal clear at a glance ✅ One thing dominates attention ✅ You know exactly what feeling it creates ✅ You can't find anything to remove ✅ It still works with animations disabled

---

Quotes to Remember

"Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." — Antoine de Saint-Exupéry

"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

"The ability to simplify means to eliminate the unnecessary so that the necessary may speak." — Hans Hofmann

"Good design is obvious. Great design is transparent." — Joe Sparano

"Content precedes design. Design in the absence of content is not design, it's decoration." — Jeffrey Zeldman

---

Inspiration Sources

Galleries (daily ritual)

• godly.website — Cutting-edge interaction design
• land-book.com — Landing pages specifically
• awwwards.com — Industry standard, expert-judged
• minimal.gallery — Clean, restrained sites
• onepagelove.com — Single-page excellence
• mobbin.com — Mobile UI patterns

Studios to study

• lusion.co — WebGL boundaries
• metalab.com — Product design excellence
• andagain.uk — Typographic mastery
• basement.studio — Creative development
• linear.app — Product page perfection

Individual portfolios

• ped.ro — Pedro Duarte
• leerob.io — Lee Robinson
• rauno.me — Rauno Freiberg
• paco.me — Paco Coursey

Reading

• "Dieter Rams: As Little Design as Possible"
• "The Shape of Design" — Frank Chimero
• "Designing Brand Identity" — Alina Wheeler
• Steve Jobs biography (design chapters)

---

The One-Page Test

Can you answer these in one sentence each?

1. What feeling does this create?
2. What's the one thing I want them to notice?
3. What would I remove if I had to cut 50%?
4. Why does each animation exist?
5. Would Apple ship this?

If you can't answer clearly — keep editing.

---

Final Thought

The gap between good and great is editing.

Everyone can add. Few can subtract.

The discipline to remove the thing you worked hard on — because it doesn't serve the whole — that's the skill.

Less, but better.