designing-frontendlisted

# Designing Frontend ## Workflow 1. **Conceptualize** - Identify purpose and user context - Choose a bold aesthetic direction (brutally minimal, maximalist, retro-futuristic, organic, luxury, brutalist, etc.) - Define the one unforgettable element - Note technical constraints (framework, performance, accessibility) 2. **Implement** - Write production-grade code (HTML/CSS/JS, React, Vue, etc.) - Apply aesthetic guidelines below 3. **Verify** - Check visual hierarchy and cohesion - Test interactions and animations - Validate accessibility requirements - Confirm no generic patterns emerged 4. **Iterate** - Refine details based on verification - Enhance distinctiveness where needed ## Aesthetic Guidelines **Typography** - Use distinctive, characterful fonts (avoid Inter, Roboto, Arial, system fonts) - Pair expressive display fonts with refined body fonts **Color & Theme** - Build cohesive palettes with CSS variables - Use dominant colors with sharp accents, not evenly-distributed schemes - Avoid clichéd combinations (purple gradients on white) **Motion** - Create high-impact moments with orchestrated page loads and staggered reveals - Use CSS animations for HTML; Motion library for React - Add surprising hover states and scroll-triggered effects **Spatial Composition** - Break from grid conventions: asymmetry, overlap, diagonal flow - Use generous negative space OR intentional density **Backgrounds & Visual Effects** - Layer gradient