IMAGE STYLES
Flat website illustrations for heroes, sections and empty states
Many software and service websites use flat illustration instead of photography: a hero image beside the headline, small spot illustrations next to features, and friendly pictures on error or empty pages. Flat art fits interface design, loads light and keeps a site looking consistent. ImageQuarry lets you describe each illustration in words, match it to your brand colors with follow-up requests, and keep every version together so the hero and the spot images look like one set.
Write a short illustration style rule for the site, describe each image's job, and check every version beside your real page layout.
Last updated October 2026
How to illustrate a website in flat style
- 01
Write the site's illustration rule
Choose the palette from your brand colors, decide on outlines or none, and pick a character style if people appear. Paste that rule into each request so the images stay related.
- 02
Describe the job of each image
A hero illustration sets the tone, a spot illustration explains one feature, an empty state reassures. Describe the image each place needs and generate it.
- 03
Leave space for the interface
Headlines, buttons and forms sit next to or on top of images. Ask for plain areas where the layout needs them, so text never lands on busy shapes.
- 04
Check versions in the layout
Compare versions inside a mockup of the page, choose the best one and download it. Then compress the image before publishing so the page stays quick to load.
Website illustration requests
Example requests for site illustrations. They describe what to ask for; results are versions you review.
SaaS hero image
A person interacting with abstract interface shapes is a common hero theme.
Feature spot illustration
Small spots explain one feature each and sit beside short text.
Empty state
Empty pages benefit from a light, friendly image.
Error page
A 404 page can use a lost or searching metaphor.
Quote section background
Subtle shapes can frame a quote area without competing with it.
Same set, new page
New pages should look like existing ones.
What website illustrations need
Responsive layouts crop and scale
Pages rearrange on phones and wide screens, so an illustration may be shown narrower or stacked under text. Keep the main subject compact and away from the edges.
Page speed matters
Large images slow pages down, which affects visitors and search performance. Compress downloaded illustrations and use the size the layout actually needs.
Accessible contrast
Text placed near illustrations must stay readable for people with low vision. Check contrast between text and any colored areas behind it.
Alt text describes purpose
Decorative illustrations can have empty alt text, while informative ones need a short description of what they show. Write it when you add the image to the page.
A coherent set
Hero, spot and empty-state images should share palette and character style. Use an approved image as a reference for the next one. References guide the result; review each version to see how closely it follows them.
Projects keep a site's images together
Keeping every illustration for a site in one project means each image stays with its prompts and versions for the next redesign.
Website image types
| Placement | Job | Request focus |
|---|---|---|
| Hero | Set tone next to the headline | Wide scene, plain area on the text side |
| Feature spot | Explain one feature | One compact object, two colors |
| Empty state | Reassure when there is no data | Friendly simple object, soft colors |
| Error page | Turn a dead end into a light moment | Lost or searching metaphor |
| Section background | Frame content quietly | Pale shapes at edges, empty center |
What is a flat website illustration?
A flat website illustration is an image for a web page drawn with solid colors and simple shapes, usually in the site's brand palette. Common uses are hero images, small feature illustrations, and images for empty states and error pages.
It is not an icon set for interface buttons, which needs pixel-precise vector icons, and it does not replace interface text, which stays in the page's code.
Flat website illustration questions
How do I keep illustrations consistent across the site?
Reuse the same style rule in every request and attach an approved illustration as a reference. References guide the result; review each version to see how closely it follows them. Compare each new version with the existing set before publishing.
Should text be part of the illustration?
No. Keep headlines and labels in the page's HTML, where they are readable, translatable and indexable, and leave space in the image for them.
How do I stop images slowing the page down?
Export only the size the layout needs and compress the image before uploading it to your site.
Can I update one illustration later?
Yes. Select it in the workspace and describe the change; the new version appears beside the old one.
Can I base an illustration on a screenshot of my product?
Yes. Upload the screenshot and ask for a simplified flat version of it, then compare the result with the original.
Related flat and web designs
Create an image. Edit it with words. Keep refining.
Illustrate the page that needs it most
Describe the image's job, keep your brand colors in the request, and choose the version that fits the layout.
Start creatingAlready have an account? Sign in