Heldinhow Frontend Design
Overview
Create frontend designs that are distinctive, production-grade, and avoid generic "AI slop" aesthetics. Focus on unique typography, cohesive color schemes, and meaningful animations.
Process
1. Choose Design Direction
- Commit to one clear aesthetic vision
- Avoid generic patterns everyone uses
- Consider asymmetry, overlap, unexpected layouts
2. Typography
- Use distinctive fonts (not Inter/Roboto/system)
- Import from Google Fonts or premium typefaces
- Establish clear type scale
3. Color Scheme
- Define cohesive palette with CSS variables
- Choose dominant accent color
- Build supporting neutrals
4. Spatial Composition
- Break grid conventions thoughtfully
- Use whitespace actively
- Create visual hierarchy
5. Animations
- Add meaningful transitions (150-200ms)
- Animate on load
- Hover states and micro-interactions
6. Atmospheric Effects
- Subtle gradients
- Noise textures
- Depth with shadows
Examples
- Landing Page: Hero section with bold typography + gradient overlay
- Dashboard: Card-based layout with subtle shadows + hover lifts
- Mobile App: Bottom navigation + smooth page transitions
Limitations
- Don't over-animate - can slow down UX
- Avoid too many fonts - performance + readability
- Don't sacrifice usability for aesthetics
- May need fallbacks for older browsers