Illustrations in web design: choosing them over photos and keeping one style
Illustrations in web design earn their place when they can show something a photograph can't: an idea, a process, a product that doesn't exist yet, or a mood that belongs to the brand. They fail when they're generic, mixed from several sources, or used in place of real photos of people and places visitors want to see.
When illustration beats photography
- Abstract ideas
- Security, privacy, collaboration or growth have no honest photograph. A drawing can show the idea without a staged stock scene.
- Processes and how things work
- A diagram-like illustration explains steps, flows and parts more clearly than a photo of someone at a laptop.
- Things that don't exist yet
- An app in development, a building before it's built, a product concept.
- Sensitive subjects
- Health, money worries or bereavement, where photos of real people can feel intrusive and stock photos feel false.
- Brand character
- Children's services, games, food brands and anything playful can carry a distinctive voice through drawing that photography can't.
Photography remains better for anything the visitor wants to verify: the team, the premises, the product, the work. A drawn portrait of a dentist doesn't tell you what the dentist looks like. Website photography direction covers that side.
The generic look, and why it spread
Through the late 2010s, many technology companies adopted a similar flat style: figures with small heads, long bendy limbs, flat bright colours and no outlines, often called Corporate Memphis. It was friendly, inclusive and easy to produce at scale with illustration kits and libraries. Its very success made it anonymous; it now signals “startup template” the way the purple gradient does. Free illustration libraries made it easier still to use the same figures as everyone else.
The fix isn't a different trend. It's choosing a style for a reason connected to the business, and keeping to it.
Keeping one illustration style
| Decision | Options | Keep consistent |
|---|---|---|
| Line | No outlines, uniform outlines, varied hand-drawn lines | Stroke weight relative to image size |
| Colour | Brand palette only, a limited extra palette, monochrome | The same few colours in every image |
| Shading | Flat, simple shadows, texture or grain | One approach everywhere |
| Perspective | Flat, isometric, loose perspective | Never mix flat and isometric in one section |
| People | None, simplified, detailed, partial (hands only) | Proportions and level of detail |
| Detail level | Iconic, moderate, rich | Similar density across a page |
Write these down as a short illustration brief before commissioning or choosing anything. If you buy from a library, take everything from one set by one illustrator. Mixing two libraries is the quickest way to make a site look assembled.
Do's and don'ts
- Do use the site's palette, so illustrations and the action colour don't compete. Illustrations in the action colour make it harder to see what's clickable.
- Do keep illustration and photography in separate roles: drawings for ideas, photos for real things.
- Do size and place illustrations to support the text beside them, not to fill space.
- Don't put an illustration in every section. A few strong ones work better than many small ones.
- Don't use illustrations of people to suggest a team or customers you don't have.
- Don't draw text into the image. Real text can be read, translated, resized and found by search.
Accessibility
An illustration that carries information, such as a diagram of steps, needs a text alternative that gives the same information, or the information must also be in the surrounding text. A decorative illustration should have empty alt text so screen readers skip it. Under WCAG 2.2's non-text contrast criterion, parts of a graphic needed to understand it need 3:1 contrast against their background. Animated illustrations should stop under reduced motion. How to write alt text covers the wording.
Illustration in Anticode
Anticode doesn't draw illustrations, and its design systems don't come with an illustration set. Uploaded artwork is placed the same way as photos: the file is checked by its first bytes, stored under your account, and the model sees it so it can place it in a sensible section. Sentinel requires a text alternative on every image before a page can be published, so even a decorative drawing needs a short description on an Anticode page.
Some design systems carry a little graphic character of their own without illustration: Playful has soft blob shapes behind the hero, Organic a hand-drawn underline, and Technical a blueprint grid.
Questions people ask
Should I use illustrations or photos on my website?
Photos for real people, places and products; illustrations for ideas, processes and brand character. Many good sites use both in clearly separate roles.
What is Corporate Memphis?
A name for the flat illustration style with simplified, long-limbed figures and bright colours that many technology companies adopted. It's now widely seen as generic.
Are free illustration libraries a good idea?
For prototypes, yes. For a finished site, they risk looking like many others. If you use one, take every illustration from the same set.