UX Illustrations

Foundations / Visual / UX Illustrations

Intro

UX illustrations simplify complex information, enhance comprehension, and boost engagement through visual storytelling in user interfaces. Thoughtful use of illustrations supports a human-centered experience, making interactions feel approachable, relatable, and meaningful.

To be effective, illustrations must reflect cultural, regional, and individual diversity, avoiding stereotypes or misunderstandings. Always pair illustrations with clear written messages, like those in the illustrated message component, to ensure context and clarity.

Collage showcasing examples of UX illustrations, including color tokens, illustration guidelines, and illustrations for success and empty state messages.

Examples of UX illustrations

When to Use

Use solution-oriented messages.
Clearly explain empty states.
Pair illustrations with clear, supportive text.

Don't

Don’t let visuals overpower text.
Don't use illustrations for warnings or messages that block users from proceeding.
Don’t use illustrations to present data or explain complex information.
Don’t use illustrations to represent functions or statuses. Use icons instead.
Don’t use illustrations solely for decoration.

Always pair UX illustrations with written messages to ensure they don't take the leading role in the user experience. They should remain supportive and noticeable without obstructing the user's path.

UX Illustrations for Empty States

UX illustrations are designed to pair solution-oriented messages with visuals to make empty state communications more effective and engaging than text alone. To support responsive design and various UI elements, illustrations come in four sizes. Use the illustrated message component to easily integrate these combinations into your applications.

Illustration Sizes

Large (L)

Size: 320x240px

Best for full-screen scenarios where maximum visual impact is needed.

Illustration of a hammock in size L, revealing detailed features not visible in sizes S and XS.

Example – Size L

Medium (M)

Size: 160x160px

Ideal for dialogs and modal windows with moderate space.

Illustration of a hammock in size M, revealing detailed features not visible in sizes S and XS.

Example – Size M

Small (S)

Size: 128x128px

Designed for compact UI elements, such as medium-sized cards.

Illustration of a hammock in size S, with simplified features compared to sizes M and L.

Example – Size S

Extra Small (XS)

Size: 45x45px

Suitable for areas with limited vertical space.

Illustration of a hammock in size XS, with minimal features compared to size S.

Example – Size XS

Illustration Style

The illustration style is inclusive and human-centered. Each illustration highlights a single main object to maintain focus. Background elements are generally avoided to reduce visual noise and distraction. They're only used when UI elements are needed to reinforce the concept or support the metaphor.

Colors

Illustrations follow a defined color system to ensure visual consistency:

Background and shadow: These colors are reserved exclusively for shadows and backgrounds to create visual harmony across illustrations.
Muted background elements: Up to three additional shades of blue are available for background elements that aren’t in focus, helping them blend subtly into the scene.
Foreground elements: Illustration designers can choose from three primary color pairs and a selection of complementary basic colors to bring focus and variety to key illustration components.
Accent color: A single red accent is available for semantic elements (for example, error icons) or subtle highlights within the illustration.

Color design tokens for the Morning Horizon theme, showcasing color samples for Background, Shadow, Accent, Foreground Elements, Basic Colors, Muted Background Elements, and Skin Colors, along with their theme values.

Example – color design tokens for Morning Horizon

Illustration Naming

The following naming convention applies across all themes.

<div> <div></div> <div>Naming Component</div> <div>Description</div> </div> <div> <div><strong>1</strong></div> <div><strong>Library prefix</strong></div> <div>Indicates the source library, such as <code>sapIllus</code> for the core library.</div> </div> <div> <div><strong>2</strong></div> <div><strong>Use case</strong></div> <div>Describes the illustration’s purpose or context.</div> </div> <div> <div><strong>3</strong></div> <div><strong>Size</strong></div> <div>Specifies the size: <code>Large</code>, <code>Medium</code>, <code>Small</code>, or <code>ExtraSmall</code></div> </div>

Illustration name example: "sapIllus-NoFilterResults-Large", demonstrating naming components joined by hyphens.

How to read illustration names

Best Practices

Level of Detail

Illustrations can feature varying levels of detail in both foreground and background elements. In large and medium sizes, all components should appear detailed and dimensional to create depth and richness.

As illustrations scale down, the illustration designer can simplify or adjust elements as needed. For example, when the size of the illustration below is reduced, the number of table columns decreases, and the arrow element becomes thicker to ensure visibility at smaller sizes.

Illustration for adding dimensions to a chart in different sizes, with detail decreasing as illustration sizes become smaller.

Illustrations with different levels of detail as they become smaller

Inclusive Objects

Use region-neutral objects and metaphors that are easily understood across various contexts and cultures. Focus on universally relatable metaphors and language, especially when designing for business software, to ensure inclusivity and clarity for a global audience.

Trophy illustration representing achievement, used as a universally recognizable metaphor.