336 lines
10 KiB
Markdown
336 lines
10 KiB
Markdown
# New Project: Aesthetic Design Philosophy
|
|
|
|
**Use this when building from scratch** - no existing codebase to match, full creative freedom.
|
|
|
|
This guide helps you create bold, distinctive frontend interfaces that avoid generic "AI slop" aesthetics and deliver memorable user experiences.
|
|
|
|
---
|
|
|
|
## Design Thinking Process
|
|
|
|
Before coding, understand the context and commit to a BOLD aesthetic direction.
|
|
|
|
### 1. Understand the Context
|
|
|
|
**Purpose**
|
|
- What problem does this interface solve?
|
|
- Who are the users?
|
|
- What are their goals and pain points?
|
|
|
|
**Constraints**
|
|
- Technical requirements (framework, performance targets)
|
|
- Accessibility standards (WCAG compliance)
|
|
- Browser support needs
|
|
- Device/viewport considerations
|
|
|
|
**Differentiation**
|
|
- What makes this interface UNFORGETTABLE?
|
|
- What's the one thing someone will remember?
|
|
- How does it stand out from competitors?
|
|
|
|
### 2. Choose an Aesthetic Direction
|
|
|
|
**Pick an extreme** - commit fully to a clear conceptual direction:
|
|
|
|
- **Brutally minimal**: Sparse layouts, monochrome palette, extreme negative space
|
|
- **Maximalist chaos**: Dense information, bold colors, layered complexity
|
|
- **Retro-futuristic**: Nostalgic elements with modern tech aesthetic
|
|
- **Organic/natural**: Flowing forms, earthy tones, biomimicry
|
|
- **Luxury/refined**: Sophisticated typography, muted elegance, premium feel
|
|
- **Playful/toy-like**: Rounded shapes, bright colors, whimsical interactions
|
|
- **Editorial/magazine**: Strong typography hierarchy, grid-based, content-focused
|
|
- **Brutalist/raw**: Exposed structure, harsh contrasts, utilitarian
|
|
- **Art deco/geometric**: Symmetry, geometric patterns, metallic accents
|
|
- **Soft/pastel**: Gentle gradients, low contrast, calming atmosphere
|
|
- **Industrial/utilitarian**: Function-first, mechanical aesthetics, technical precision
|
|
|
|
**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
|
|
|
|
### 3. Implementation Goals
|
|
|
|
Create working code that is:
|
|
|
|
✅ **Production-grade and functional**
|
|
- Real, working code (not mockups)
|
|
- Properly structured components
|
|
- Responsive across devices
|
|
- Accessible to all users
|
|
|
|
✅ **Visually striking and memorable**
|
|
- Immediate visual impact
|
|
- Distinctive from generic templates
|
|
- Reinforces brand/purpose
|
|
|
|
✅ **Cohesive with clear aesthetic point-of-view**
|
|
- Every element serves the chosen direction
|
|
- Consistent visual language
|
|
- Intentional design decisions throughout
|
|
|
|
✅ **Meticulously refined in every detail**
|
|
- Precise spacing and alignment
|
|
- Thoughtful micro-interactions
|
|
- Polish in typography, color, motion
|
|
|
|
---
|
|
|
|
## Frontend Aesthetics Guidelines
|
|
|
|
Apply these principles when executing your design vision:
|
|
|
|
### Typography
|
|
|
|
**Go beyond generic fonts** - typography is personality.
|
|
|
|
✅ **DO:**
|
|
- Choose distinctive, characterful fonts
|
|
- Pair a bold display font with a refined body font
|
|
- Use font variation (weight, width, slant) for hierarchy
|
|
- Consider custom/variable fonts for uniqueness
|
|
- Test readability across sizes and contexts
|
|
|
|
❌ **AVOID:**
|
|
- Generic system fonts (Arial, Helvetica, system-ui)
|
|
- Overused web fonts (Inter, Roboto - unless intentional)
|
|
- Poor contrast or readability
|
|
- Inconsistent font pairing
|
|
|
|
**Examples:**
|
|
- Display: Ginto, Clash Display, Syne, Archivo Black, Fraunces
|
|
- Body: Work Sans, Söhne, Untitled Sans, Sentient, Supreme
|
|
- Mono: JetBrains Mono, Commit Mono, Berkeley Mono
|
|
|
|
### Color & Theme
|
|
|
|
**Commit to a cohesive palette** - colors create atmosphere.
|
|
|
|
✅ **DO:**
|
|
- Use CSS variables for consistency
|
|
- Choose dominant colors with sharp accents
|
|
- Create intentional color relationships
|
|
- Consider color psychology (warm/cool, energetic/calming)
|
|
- Test contrast for accessibility (WCAG AA minimum)
|
|
|
|
❌ **AVOID:**
|
|
- Timid, evenly-distributed palettes
|
|
- Clichéd combinations (purple gradient on white)
|
|
- Poor contrast ratios
|
|
- Randomness without purpose
|
|
|
|
**Approaches:**
|
|
- **Monochrome + accent**: Single base color with one bold accent
|
|
- **Analogous harmony**: Adjacent colors on color wheel
|
|
- **Bold contrast**: High-contrast complementary colors
|
|
- **Muted elegance**: Desaturated tones with subtle variation
|
|
|
|
### Motion & Animation
|
|
|
|
**Animate with purpose** - motion should delight and inform.
|
|
|
|
✅ **DO:**
|
|
- Prioritize CSS-only solutions for performance
|
|
- Use Motion library (Framer Motion) for React when needed
|
|
- Focus on high-impact moments (page load, key interactions)
|
|
- Use staggered reveals (animation-delay) for orchestration
|
|
- Add scroll-triggered animations for engagement
|
|
- Create surprising hover states
|
|
|
|
❌ **AVOID:**
|
|
- Scattered, meaningless micro-interactions
|
|
- Performance-heavy JavaScript animations for simple effects
|
|
- Motion that distracts from content
|
|
- Animations without easing (linear motion feels robotic)
|
|
|
|
**High-Impact Patterns:**
|
|
- Staggered fade-in on page load
|
|
- Smooth scroll-triggered reveals
|
|
- Morphing shapes on interaction
|
|
- Parallax effects (use sparingly)
|
|
- Magnetic cursor effects
|
|
- Elastic hover states
|
|
|
|
### Spatial Composition
|
|
|
|
**Break expectations** - layouts should surprise and guide.
|
|
|
|
✅ **DO:**
|
|
- Use asymmetry intentionally
|
|
- Overlap elements for depth
|
|
- Create diagonal flow to guide eye
|
|
- Add grid-breaking elements for interest
|
|
- Use generous negative space OR controlled density (not in-between)
|
|
|
|
❌ **AVOID:**
|
|
- Predictable centered layouts
|
|
- Uniform spacing everywhere
|
|
- Tight, cramped compositions
|
|
- Lack of visual hierarchy
|
|
|
|
**Techniques:**
|
|
- **Asymmetric grids**: Offset columns, uneven distribution
|
|
- **Z-index layering**: Overlap for depth and dimensionality
|
|
- **Diagonal flow**: Angles create energy and movement
|
|
- **Negative space**: Breathing room emphasizes important content
|
|
- **Controlled density**: Information-rich areas with clear structure
|
|
|
|
### Backgrounds & Visual Details
|
|
|
|
**Create atmosphere** - go beyond solid colors.
|
|
|
|
✅ **DO:**
|
|
- Add contextual textures and effects
|
|
- Use gradient meshes for depth
|
|
- Apply subtle noise/grain overlays
|
|
- Create layered transparencies
|
|
- Add dramatic shadows for elevation
|
|
- Consider decorative borders and ornaments
|
|
- Experiment with custom cursor styles
|
|
|
|
❌ **AVOID:**
|
|
- Plain solid color backgrounds everywhere
|
|
- Overused gradient patterns
|
|
- Details that don't match aesthetic direction
|
|
- Visual noise without purpose
|
|
|
|
**Techniques:**
|
|
- **Gradient meshes**: Soft, organic color transitions
|
|
- **Noise textures**: Subtle grain for tactile quality
|
|
- **Geometric patterns**: Structured, repeating motifs
|
|
- **Radial gradients**: Spotlight effects, vignettes
|
|
- **Blurred shapes**: Abstract background elements
|
|
- **Glass morphism**: Frosted glass effects (backdrop-filter)
|
|
|
|
---
|
|
|
|
## Anti-Patterns: Avoiding AI Slop
|
|
|
|
**NEVER** create generic AI-generated aesthetics. Recognize and avoid these patterns:
|
|
|
|
❌ **Overused font families**
|
|
- Inter everywhere (it's become the Arial of AI-generated designs)
|
|
- Roboto (overused, lacks character)
|
|
- System fonts without intentionality
|
|
- Space Grotesk (recently overused in AI designs)
|
|
|
|
❌ **Clichéd color schemes**
|
|
- Purple gradients on white backgrounds
|
|
- Generic blue/teal combinations
|
|
- Pastel everything without purpose
|
|
- Rainbow gradients without restraint
|
|
|
|
❌ **Predictable layouts**
|
|
- Centered hero → 3 feature cards → testimonials → CTA
|
|
- Same component patterns as every SaaS landing page
|
|
- No surprises, no memorable moments
|
|
- Cookie-cutter grid systems
|
|
|
|
❌ **Lack of context-specific character**
|
|
- Designs that could be for any product/service
|
|
- No connection to brand, purpose, or audience
|
|
- Generic stock photography aesthetic
|
|
- Templated feel throughout
|
|
|
|
---
|
|
|
|
## Creative Freedom Guidelines
|
|
|
|
**Interpret creatively** - make unexpected choices that feel genuinely designed for the context.
|
|
|
|
### Vary Your Approach
|
|
|
|
**No two designs should be the same.** Intentionally vary:
|
|
|
|
- **Theme**: Light vs dark (or something in between)
|
|
- **Density**: Spacious vs information-rich
|
|
- **Tone**: Professional vs playful vs experimental
|
|
- **Complexity**: Minimal vs maximalist
|
|
- **Typography**: Serif vs sans-serif vs mixed
|
|
- **Color**: Monochrome vs vibrant vs muted
|
|
|
|
**NEVER converge on common choices** across different projects. If you used Space Grotesk last time, choose something completely different this time.
|
|
|
|
### Match Complexity to Vision
|
|
|
|
**Aesthetic vision dictates code complexity:**
|
|
|
|
**Maximalist designs** → Elaborate implementation
|
|
- Extensive animations and effects
|
|
- Complex layering and composition
|
|
- Rich interactions and micro-animations
|
|
- Advanced CSS techniques
|
|
|
|
**Minimalist designs** → Restrained implementation
|
|
- Precise spacing and alignment
|
|
- Subtle, purposeful animations
|
|
- Careful typography tuning
|
|
- Attention to micro-details
|
|
|
|
**Elegance comes from executing the vision well**, not from choosing "simple" vs "complex."
|
|
|
|
---
|
|
|
|
## Implementation Checklist
|
|
|
|
Before finalizing your design:
|
|
|
|
### Context & Strategy
|
|
- [ ] Clearly defined purpose and audience
|
|
- [ ] Identified key differentiator (the memorable element)
|
|
- [ ] Chosen specific aesthetic direction (not generic)
|
|
- [ ] Considered technical constraints
|
|
|
|
### Typography
|
|
- [ ] Distinctive font choices (not Inter/Roboto by default)
|
|
- [ ] Clear hierarchy (display vs body vs UI)
|
|
- [ ] Tested readability across sizes
|
|
- [ ] Proper font pairing
|
|
|
|
### Color & Theme
|
|
- [ ] Cohesive color palette with CSS variables
|
|
- [ ] Intentional color relationships
|
|
- [ ] Tested contrast for accessibility (WCAG AA+)
|
|
- [ ] Avoided clichéd combinations
|
|
|
|
### Motion & Animation
|
|
- [ ] High-impact moments identified and animated
|
|
- [ ] CSS-first approach for performance
|
|
- [ ] Easing curves feel natural
|
|
- [ ] Animations enhance, not distract
|
|
|
|
### Spatial Composition
|
|
- [ ] Unexpected or intentional layout choices
|
|
- [ ] Visual hierarchy guides user attention
|
|
- [ ] Appropriate use of space (generous or dense)
|
|
- [ ] Breaking the grid where appropriate
|
|
|
|
### Visual Details
|
|
- [ ] Contextual backgrounds and textures
|
|
- [ ] Atmospheric depth (gradients, shadows, layers)
|
|
- [ ] Details match chosen aesthetic
|
|
- [ ] Polish in every interaction
|
|
|
|
### Originality
|
|
- [ ] Doesn't look like generic AI output
|
|
- [ ] Context-specific character throughout
|
|
- [ ] Memorable and distinctive
|
|
- [ ] Different from previous projects
|
|
|
|
---
|
|
|
|
## Remember
|
|
|
|
**Claude is capable of extraordinary creative work.**
|
|
|
|
Don't hold back. Show what can truly be created when:
|
|
- Thinking outside the box
|
|
- Committing fully to a distinctive vision
|
|
- Avoiding generic templates and patterns
|
|
- Designing with intention and purpose
|
|
|
|
Create something unforgettable.
|
|
|
|
---
|
|
|
|
**See also:**
|
|
- [EXAMPLES.md](EXAMPLES.md) - Real-world design examples and case studies
|
|
- [REFERENCE.md](REFERENCE.md) - Deep-dive into specific aesthetic techniques
|