Illustration System
When to Use Illustration
- Abstract concepts that can't be photographed
- Empty states and onboarding
- Error pages and status messages
- Feature explanations and how-it-works sections
- Brand personality expression
When to Use Photography
- Real people and places
- Product imagery
- Testimonials and case studies
- Trust building (real > illustrated)
Style Consistency
Every illustration in a set must share:
- Line weight (consistent stroke width)
- Color palette (same palette as the brand)
- Level of detail (all simple or all detailed, never mixed)
- Perspective (all flat, all isometric, or all 3D, never mixed)
- Character style (same body proportions, face style)
- Texture/rendering (all smooth, all textured, consistent)
Illustration Styles
| Style | Feel | Best For |
|---|---|---|
| Flat/geometric | Modern, clean | SaaS, tech |
| Hand-drawn | Warm, personal | Creative, education |
| Isometric | Technical, structured | Developer tools, data |
| 3D rendered | Premium, immersive | Marketing, luxury |
| Abstract/organic | Artistic, unique | Creative agencies, portfolios |
Anti-Patterns
- Using Humaaans or unDraw defaults without customization
- Mixing illustration styles across the product
- Illustrations that add nothing (decorative filler)
- Inconsistent skin tones or representation