Spot Illustrations for Empty States and Onboarding

A spot illustration is a small, self-contained visual that supports a specific message. In a product interface, it should help someone understand a situation without competing with the task. An empty project list and a failed payment are both moments with little content, but they need very different imagery, tone, and emphasis.

Define the job before drawing the scene

Write a brief containing the user's situation, the message, and the next action. For a new project list, that could be: no projects exist yet; projects organize work; create the first project. The illustration might show a simple folder receiving one card. It does not need to explain every feature available after creation.

Use the aspect ratio calculator to plan the artwork's container before sketching. Try a 240-by-160 reference frame, then calculate matching dimensions for a narrower card. This keeps the composition predictable and exposes whether the design depends on a wide scene that will collapse on mobile.

Establish message priority explicitly: heading first, supporting text second, action third, illustration in support. The visual may attract attention initially, but it should lead back to the content. Avoid embedding essential instructions in the drawing where they cannot adapt to translation or be read as ordinary interface text.

Keep a written illustration brief beside the sketch. Include emotional tone and prohibited interpretations. For a permissions-related state, a locked box might wrongly imply security failure; a simple restricted document may better match the actual message.

Distinguish empty-state causes

A first-use empty state is an invitation. A filtered-results state is usually a recovery problem. A deleted-content state may need reassurance or an undo route. Treating all three as cheerful blank canvases creates tone mismatches and makes the artwork less useful.

For first-use states, choose imagery that suggests an achievable starting point. One card entering a tray is more concrete than a complex city of floating interface panels. Keep the scale modest so the primary action remains close to the explanation rather than falling below a large decorative scene.

For no-results states, emphasize the search or filter context without implying that data has vanished. A neutral magnifying glass can work, but an elaborate explorer character may distract from the simple task of changing a query. Sometimes no illustration is the best decision, especially in a dense professional workflow.

For error or permission states, match the seriousness of the situation. Avoid celebrations, jokes, or distressed characters that amplify frustration. The Nielsen Norman Group guidance on error messages is a useful reminder that recovery information matters more than decoration. Illustration cannot compensate for unclear ownership or a missing next step.

Build a restrained visual composition

Choose one primary metaphor and one supporting detail. For an onboarding step about connecting a calendar, the primary object could be a calendar tile and the supporting detail a connection line. A laptop, person, plant, cloud, and trophy would add visual work without clarifying the concept.

Start in monochrome. If the silhouette and hierarchy are unclear without color, extra palette choices will usually hide rather than solve the problem. Check the sketch at its final display size and at half that size. Remove details that become noise, such as tiny screen labels or decorative dots clustered around the focal object.

Use a limited palette: one dominant product accent, a quieter supporting color, and neutrals are often enough. Define where accents appear so each new illustration does not invent a different hierarchy. The color converter can help translate approved palette values between common formats during handoff.

Maintain negative space around the focal object. As a starting constraint, keep meaningful shapes inside the central four-fifths of the frame, then adjust for the actual composition. This is a safety zone, not a universal aesthetic law. Avoid visual tangencies where two shapes almost touch and become difficult to separate at small sizes.

Design onboarding as a related sequence

An onboarding sequence needs continuity without becoming a comic strip that users must decode. Give each step one concept and a recognizable recurring construction: similar object scale, shadow direction, stroke weight, and perspective. Change the meaningful object, not the entire visual language.

Create a three-step storyboard before polishing. For example: collect files, organize a workspace, share a result. Check whether the sequence duplicates the headings or adds a useful spatial cue. If the artwork merely repeats the same smiling character three times, reduce its prominence or simplify the sequence.

Keep labels outside the illustration so they can wrap and translate independently. Avoid language-dependent symbols where possible, including letter-based badges and culturally narrow gestures. If people appear, review representation and context deliberately rather than adding diversity as a final cosmetic pass.

Let users skip or revisit instructional material where the product supports it. The illustration should not carry mandatory knowledge that disappears forever after dismissal. Review the overall presentation against the site's broader design resources, but preserve the distinction between decorative interest and actual task instruction.

Prepare responsive and accessible assets

Decide whether the illustration is decorative or informative. If the adjacent heading and text communicate the complete message, an image can usually use empty alternative text. If it contributes essential information, provide an appropriate text alternative. The WAI images tutorial explains the distinction with practical examples.

For responsive placement, preserve composition integrity. Scale the complete drawing when every object matters; crop only when the artwork was designed with safe crop zones. The MDN object-fit reference explains image fitting behavior, but no property can rescue a composition whose focal point sits outside the visible area.

Deliver a static version first, even if motion is planned later. Keep raster dimensions appropriate to intended displays, and preserve SVG viewBox information for vector assets. Use the existing SVG optimization guide for cleanup, checking that simplification has not changed masks, gradients, or small details.

Review real-state screenshots with long headings, narrow layouts, dark surfaces, and missing optional actions. Make sure the art does not dominate a small viewport or push recovery instructions away. Finally, ask someone unfamiliar with the drawing what situation it suggests. If their interpretation conflicts with the product message, revise the metaphor rather than explaining it in a design review.

Key takeaways

• Tie each illustration to a specific state, message, and next action.
• Use one clear metaphor and remove details that disappear at display size.
• Keep onboarding sequences visually related without making artwork instructional shorthand.
• Deliver responsive assets with deliberate text alternatives and tested compositions.