Hero Illustrations
The hero illustration is the single largest piece of art on your site and the one that gets judged in under a second. It has to communicate the product category, carry the brand palette, and survive being cropped on a phone — all while sharing the frame with a headline and a button that must stay readable on top of it.
Generate several compositions before committing. Hero art is a layout decision as much as an art decision: an isometric scene reads as "platform," a single character reads as "tool for you," an abstract composition reads as "infrastructure." Produce three or four candidates in one pass, drop them into your actual page, and judge them there rather than in isolation. Export as SVG so the final piece stays crisp on retina displays without shipping a 400KB PNG.
Layout notes
| Aspect | 16:9 or 4:3 for side-by-side hero layouts; 1:1 when the art sits below the headline on mobile |
|---|---|
| Safe zone | Keep the focal subject off-center so the headline column does not overlap it at desktop widths |
| Weight | SVG heroes typically land between 15KB and 80KB — an order of magnitude under an equivalent PNG |
| Mobile crop | Design so the scene still reads when the outer 25% is cropped away on narrow screens |
Styles that fit
Each of these presets is tuned for full-scene illustration, not icon glyphs. Pick one to open the generator with it already selected — suggested canvas for this job is 16:9.
Example prompts
Describe the whole set in one prompt — generating the scenes together is what keeps them looking like one family.
How the illustration flow works
- 1
Pick the job
Open the Illustrations tab in the generator and choose the use case — hero illustrations maps to a tuned prompt template rather than a blank box.
- 2
Describe the scene
Give the product context and, optionally, the specific scene. Suggestions appear as you type, and you can attach up to three of your own illustrations as style references.
- 3
Review before you commit
Generation returns a preview first. Keep the ones that work, generate more into the same batch, and only then import — credits are spent on generation, not on browsing.
- 4
Vectorize and refine
Accepted scenes are traced to real SVG paths and land in a project. Open any one in the studio to clean nodes, recolor fills, or simplify paths.
- 5
Expand later, still matching
When you need scene number nine, expand the same project. Your existing illustrations become the style reference, so the new ones match instead of drifting.
Frequently asked questions
What size should a hero illustration be?+
Design at a 16:9 or 4:3 ratio and let SVG handle resolution — vector heroes have no fixed pixel size. If you need a raster fallback for social previews, export a 1200×630 PNG from the same source.
Do hero illustrations hurt page speed?+
Raster ones can. A detailed hero PNG at retina resolution routinely exceeds 500KB, while the same scene as optimized SVG usually lands well under 100KB and scales infinitely. Run the SVG optimizer before shipping to strip editor metadata.
Related illustration guides
Keep reading
Make your hero illustrations
Describe the scenes, pick a style, and get a matched set as editable SVG. Free to start, no credit card required.
Open the illustration generator