--- title: "Flat Website Illustrations with AI | ImageQuarry" url: https://www.imagequarry.com/image-styles/flat/website/ last_updated: 2026-10-20 --- # 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. ## How to illustrate a website in flat style 1. **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. 2. **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. 3. **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. 4. **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 - [Flat style](https://www.imagequarry.com/image-styles/flat/): The style page: shapes, palette, no shading - [Flat presentation visuals](https://www.imagequarry.com/image-styles/flat/presentation/): The same set for slides - [Flat logos](https://www.imagequarry.com/image-styles/flat/logo/): Marks to sit in the header - [Isometric website visuals](https://www.imagequarry.com/image-styles/isometric/website/): Angled scenes for technical products - [Marketing images](https://www.imagequarry.com/marketing-images/): Campaign visuals for your site - [All image styles](https://www.imagequarry.com/image-styles/) ## 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.