design-philosophy

# 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.**