UX Illustrations

Intro

UX illustrations are visual elements that can be paired with written messages. You can use UX illustrations to:

Examples of UX illustrations

Examples of UX illustrations

When to Use

UX illustrations are always paired with written messages and should never take the leading role in the user experience. The illustrations should remain supportive and noticeable, but not obstruct the flow of the user’s path.

Do not use UX illustrations should as decoration or to fill an empty space. Use them purposefully as a method for communicating with users.

UX Illustrations for Empty States

UX illustrations for SAP Fiori are recommended combinations of a solution-oriented message and illustration that better communicate an empty state than just a message alone. The current UX illustration library targets the most common empty states across SAP Fiori products. UX illustrations come in four sizes to work responsively and within a variety of UI elements. The illustrated message control is available for this purpose.

Illustration Sizes

X-Small (Dot Illustrations)

Dot illustrations are the smallest size and designed to fit within very small UI elements, such as table rows and smaller cards.

They are one size at 45px (2.813rem) square.

Dot illustration example

Dot illustration example

Small (Spot Illustrations)

Spot illustrations are designed to fit within smaller UI elements. The smallest UI element recommended for this use case is a medium-sized card.

They are one size at 128px (8rem) square.

Spot illustration example

Spot illustration example

Medium (Dialog Illustration)

Dialog illustrations are larger than spot illustrations and are typically used within dialogs.

They are one size at 160px (10rem) square.

Dialog illustration example

Dialog illustration example

Large (Scene Illustrations)

The largest illustration is mainly used to support full screen scenarios. These illustrations are designed to scale to a maximum-minimum width for responsive behavior across form factors.

  • Maximum size: 320px (20rem) width x 240px (15rem) height
  • Minimum size: 240px (15rem) width x 180px (11.25rem) height

Scene illustration example

Scene illustration example

Illustration Styles

Illustrative Style (Default)

The illustrative style uses vibrant foreground elements on detailed, but monochrome, backgrounds to convey a story to the user.

The sizes Small to Large show a snapshot of a larger scene. As the size decreases, so does the lens through which the user views it. For the smallest size, X-Small, only the foreground element remains.

This style is perfect for visualising complex use cases and attracting the user’s attention.

Success use case in illustrative style

Success use case in illustrative style

Simple Style

Alternatively, you can use the simple style. The simple style relies solely on the foreground element and, depending on the size, accents. The backgrounds are either simple or non-existent. This makes the illustrations a much less crowded alternative to the illustrative style.

This style is perfect for achieving a more minimalistic look.

[internal_only]To see which simple style illustration corresponds to which illustrative style illustration and use case, see the Illustration Use Case Library. [/internal_only]

Success use case in simple style

Success use case in simple style


UX Illustrations for Creative Purposes

UX illustrations that do not follow the color, size and general style rules defined for illustrations, should be used for creative purposes only (for example: presentation slides).

[internal_only]A library of such illustrations can be found in the Media Kit.[/internal_only]

Example of an illustration kit

Example of an illustration kit

Best Practices

Choosing Illustrations

A UX illustration must be paired with a message that clarifies a situation and communicates the next steps. Use the right size illustration for the context and size of the UI element. Don’t hack the illustration or scale it unnecessarily.

Message Pairing

Implementing Illustrations

The UX Illustrations for SAP Fiori are provided as coded, themeable SVGs and made available through the illustrated message control.

[internal_only]

Creating Illustrations

A detailed guide on how to create an illustration can be found within the Illustration Creation Kit in Figma. This also includes a library of existing accents, backgrounds, and foreground elements to ensure a fast and easy illustration creation process.

When creating your own elements, mind the color and general style rules outlined in the Illustration Creation Kit.

[/internal_only]

Elements and Controls

Implementation

Visual Design