Product Design Philosophy and Aesthetics. Covers universal design principles, aesthetic philosophy, and foundational product thinking.
Guide for understanding universal design principles and aesthetic philosophy in product design.
| Principle | Description | Application |
|---|---|---|
| Simplicity | Less is more | Remove unnecessary elements |
| Consistency | Similar things look similar | Uniform patterns |
| Feedback | Actions have reactions | Immediate response to user |
| Affordance | Objects suggest use | Visual cues for interaction |
| Progressive Disclosure | Show more as needed | Layer information |
| Usable by everyone |
| Consider all users |
| Principle | Description | Example |
|---|---|---|
| Proximity | Things close together are related | Group related items |
| Similarity | Similar things are related | Same color = same function |
| Continuity | Lines continue in patterns | Smooth visual flow |
| Closure | We complete incomplete shapes | Rounded corners suggest buttons |
| Figure-Ground | Clear distinction between object and background | Clear hierarchy |
| Philosophy | Core Belief | When to Use |
|---|---|---|
| Minimalism | Remove everything unnecessary | Productivity tools, dashboards |
| Maximalism | Express abundance and richness | Creative tools, entertainment |
| Skeuomorphism | Real-world objects | Learning apps, gaming |
| Flat Design | Purely digital aesthetic | Modern apps, mobile |
| Material Design | Digital paper metaphor | Google ecosystem |
| Neumorphism | Soft, extruded shapes | Mobile apps |
| Color | Associations | Common Use |
|---|---|---|
| Blue | Trust, calm, professional | Enterprise, finance |
| Green | Growth, health, nature | Health, environment |
| Red | Urgency, passion, alerts | E-commerce, notifications |
| Purple | Creativity, luxury | Creative tools |
| Orange | Energy, enthusiasm | Social, fitness |
| Black | Luxury, power | Premium products |
┌─────────────────────────────────┐
│ Heading (H1) │ ← Most important
├─────────────────────────────────┤
│ Subheading (H2) │ ← Section titles
├─────────────────────────────────┤
│ Body text with detail... │ ← Main content
│ More details here... │
├─────────────────────────────────┤
│ Caption / metadata / actions │ ← Supporting
└─────────────────────────────────┘
/* Golden ratio scale */
--text-xs: 0.75rem; /* 12px - captions */
--text-sm: 0.875rem; /* 14px - secondary */
--text-base: 1rem; /* 16px - body */
--text-lg: 1.25rem; /* 20px - subheadings */
--text-xl: 1.5rem; /* 24px - headings */
--text-2xl: 2rem; /* 32px - titles */
--text-3xl: 2.5rem; /* 40px - hero */
| Display Font | Body Font | Vibe |
|---|---|---|
| Playfair Display | Source Sans Pro | Editorial |
| Montserrat | Open Sans | Modern |
| Oswald | Lato | Energetic |
| Merriweather | Roboto | Trustworthy |
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
| Type | Description | Example |
|---|---|---|
| Visual | Same look | Colors, fonts, icons |
| Functional | Same behavior | All buttons work the same |
| Internal | Product patterns | Own conventions |
| External | Platform conventions | iOS vs Android patterns |