Illustrations bring personality and warmth to digital products. They go beyond icons to tell stories, guide users through flows, and make empty or error states feel less frustrating. The key challenge is making illustrations feel purposeful and consistent with the rest of your interface.
Types of UI Illustrations
Different parts of your product call for different illustration styles and sizes:
- Spot illustrations — Small, focused graphics used alongside text to reinforce a message. Think of a small rocket next to a "Getting Started" heading. Typically 80-200px.
- Empty state illustrations — Shown when a list or view has no content yet. They soften the experience and often include a call to action. For example, an illustration of an empty inbox with "No messages yet."
- Onboarding illustrations — Used in welcome flows to explain features or set expectations. These are usually larger and more detailed.
- Error state illustrations — Displayed on 404 pages, server errors, or failed actions. They add empathy to frustrating moments.
- Feature illustrations — Used in marketing sections, landing pages, or feature announcements to visually explain capabilities.
Designing for Empty States
Empty states are one of the most impactful places to use illustrations. A blank screen with just text feels broken. An illustrated empty state feels intentional and inviting.
Best practices for empty state illustrations:
- Keep the illustration relevant to the content area — an empty task list should show something related to tasks, not a generic image
- Include a clear call to action below the illustration, such as "Create your first project"
- Size the illustration proportionally to the viewport — it should not dominate the screen
- Use muted colors so the illustration does not compete with the primary action button
Practical example: For an empty "Favorites" page, you might draw a simple heart with a dotted outline, suggesting something is meant to go there. Pair it with the text "Save items you love" and a "Browse products" button.
Maintaining Style Consistency
Your illustrations should feel like they belong to the same product as your icons, typography, and color scheme. This requires establishing illustration guidelines just as you would for icons.
Elements to keep consistent:
- Color palette — Pull from your product's brand colors. Limit yourself to 3-5 colors plus tints.
- Line weight — If your icons use 2px strokes, your illustrations should use a similar weight or a proportional one.
- Level of detail — Decide whether your style is minimal, moderately detailed, or highly detailed. Stick with it.
- Human representation — If you include people, define a consistent style for body proportions, faces, and skin tones.
- Perspective — Choose flat, isometric, or slight perspective and apply it uniformly.
Working with Scale
Unlike icons, illustrations vary significantly in size across your product. A spot illustration might be 100px wide while an onboarding illustration spans the full screen.
Tips for handling scale:
- Design at the largest size you need and simplify for smaller contexts
- Create a library of reusable elements — shapes, characters, objects — that can be recombined
- Test illustrations at their actual display size, not just zoomed in on your design canvas
- Ensure line weights remain visible and consistent when scaled down
Collaborating with Developers
Illustrations often require more communication during handoff than icons do:
- Export as SVG when possible for scalability and small file size
- For complex illustrations with gradients or textures, PNG or WebP may be more practical
- Provide both light and dark mode versions if your product supports theming
- Specify exact dimensions and padding to ensure proper placement in layouts
Key Takeaways
- Use illustrations purposefully — empty states, onboarding, and error pages benefit the most
- Maintain visual consistency with your icon set and brand colors
- Design at the largest needed size and simplify downward
- Provide clear assets and specifications for developer handoff