Website Illustrations Development
Illustrations are not decoration, they're a functional communication element. They work where photography is impossible (abstract concepts, processes, data) and where you need style standing out from stock uniformity. Developing illustrations makes sense when the site needs to stand out and have recognizable character.
When Illustrations Are Needed, When Not
Needed:
- Hero section of product where photos don't exist or don't convey abstraction
- Empty states, 404, onboarding — to reduce user anxiety
- Explainer sections with processes (steps, diagrams, how it works)
- Marketing pages with non-standard positioning
Not needed (better alternatives):
- Instead of real product or team photos — illustration reduces trust
- When site requires maximum neutrality (legal, financial services strict B2B)
- If budget doesn't allow custom illustrations and stock ones obviously are stock — better to skip
Illustration Styles
Style choice is determined by brand positioning:
Flat / Geometric — flat shapes, limited palette, no shadows. Good for tech products, SaaS. Examples: early Dropbox, Notion. Pros: easy to maintain consistency, SVG weight minimal.
Outline / Line Art — contour illustrations, often monochrome or minimal fill. Elegant, neutral, scales well. Popular for B2B services.
Isometric — three-dimensional view at 30°, popular for technical concepts (servers, diagrams, infrastructure). More complex development, requires strict angle adherence.
Character illustration — characters, people, scenes. Most emotional variant. Complexity: must avoid cultural specificity, watch for inclusivity.
Abstract / Generative — organic shapes, gradients, texture. Popular in fintech and brands wanting to look "modern" (Stripe, Linear). Easily implemented in SVG with gradient and blur.
Development Process
1. Define illustration set Inventory: where on site illustrations are needed, what size, in what context. Typical set for marketing site: hero (1 large), features (4–6 small, icon-style), empty states (3–6), 404, onboarding (3–5 steps).
2. Style tile / Moodboard Two-three style directions with references. Client chooses direction before drawing starts.
3. Sketch → Vectorization Rough sketch → approval → final vector in Illustrator or Figma. For character illustrations — additional character approval stage.
4. System creation All illustrations in one style — means unified palette (4–6 colors), unified stroke weight (if line art), unified shadow angle (if present). Illustrations — not separate works but elements of one language.
Technical Requirements for Web
Website illustrations export to SVG (for icons and small illustrations) or WebP (for complex with textures and many elements).
SVG illustration optimization:
- SVGO with
cleanupIds,removeComments,mergePathssettings - Complex illustrations with 500+ paths — sometimes PNG/WebP cheaper by weight
- Animated illustrations: CSS animation for SVG or Lottie JSON (export from After Effects via Bodymovin)
Lottie for animated illustrations:
Lottie — JSON animation format working via lottie-web or React wrapper @lottiefiles/react-lottie-player. Animation weight: 10–200 KB depending on complexity. Significantly lighter than GIF and video. Used for hero animations, empty states, success screens.
Inclusivity and Neutrality
If illustrations contain people:
- Diversity in skin color, build, age
- Neutral names in UI illustrations (not "John" and "Mary")
- Avoid culturally specific gestures
- Don't bind roles to appearance (all doctors in white coats = men — antipattern)
Timeline
| Stage | Time |
|---|---|
| Moodboard and style approval | 2–3 days |
| Development of 1 hero illustration | 3–5 days |
| Set of feature icons (6–8 pcs) | 3–5 days |
| Empty states + 404 (4–6 illustrations) | 3–5 days |
| Optimization and asset export | 1 day |
Complete illustration set for marketing site: 2–4 weeks depending on style and quantity.