SUI Graphics

Deliverables / Visuals

Introduction

SUI (Simplified User Interface) is a design treatment for screenshots that takes a software product’s User Interface and turns it into a simplified representation. Contextually unimportant text and graphical elements are reduced to simpler shapes to maintain the overall context – while allowing the important elements to remain unchanged and move into focus (see definition).

Example: SUI

Getting Started

Check out the example tutorials and get a feeling for how these screenshots look like, for instance, SAP Tutorial Navigator - Get a Free Account in SAP BTP Trial or SAP Tutorial Navigator - Automate Account Operations with the Command Line Interface (CLI).
If you haven’t done so already: Download Snagit from the Software Center and familiarize yourself with the handling (see guidelines and/or video "Youtube - How to Take the Best Screenshots").
Familiarize yourself with the SUI guidelines on this page.
Watch the Hands-on Session on how to create SUIs - Recording Hands-On Session:

default

https://cdn-assets-eu.frontify.com/s3/frontify-enterprise-files-eu/eyJwYXRoIjoic2FwXC9hY2NvdW50c1wvZmVcLzQwMDA3NDVcL3Byb2plY3RzXC8xMTFcL2Fzc2V0c1wvMDBcLzI2ODAxXC80OTUwZDZkYWQ3NjA2OTc0NzY5NGFlOTc3MzdiNGYwNS0xNjI5MTgwNzg3Lm1wNCJ9:sap:jBZV6My1cwEc29vR_-M7ccK_u7zp8R5J7gm8Mwd9Ulg?width=%7bwidth%7d&format=mp4

Golden Rules for Creating SUI Graphics

Balance: The most important rule when creating SUI graphics is to find the right balance between keeping enough information on the screen to guarantee that users can orient themselves while reducing the unnecessary information.
Amount of Information: Unnecessary information is defined as all icons, headlines, table headers, labels, buttons, and such that are not imminently necessary for completing the step described.
Zoom: In all your screenshots, zoom in and focus on the relevant part of the screen.
Corporate Design: SUI graphics made for SAP services and products should always recognizably belong to SAP. Therefore, never cover up the SAP logo when it is visible in the part of the screenshot you want to display. Therefore, if your screenshot includes the SAP logo do not cover it.
Blurring Effect: Do not use the blurring effect but cover up the relevant parts. Use it only in case you want to cover confidential information.

false

Recommended: SUI

less clutter
soothing to the eye
future-proof

dont

false

Not Recommended: Screenshot

many details
hard to orientate oneself
not future-proof

Example: SUI

Working with Snagit

Our tool of choice for creating simplified user interface graphics is Snagit. Download it from the SAP Software Center, accessible via your desktop: Windows > Software Center > Snagit. Download the newest version.

Snagit

The functionality we need to work with Snagit is accessible from the top icon bar:

Select 'More' from the header tab.
Select 'Simplify'. We do not recommend working with the 'Automate' function as this functionality does not comply to our standards.
Depending on which screen/UI you are working with, the program will already offer a colour selection on the right. However, stick to the color and shapes guidelines when creating SUIs.

false

Add the SUI hex codes to your favorites for better access.

false

Check the original without having to remove the shapes you've set.

dont

false

The results you will get don't comply to our standards.

Guidelines

See this section for the in-depth description of guidelines related to colors, shapes, blurring and confidential information, UI elements that should never be covered, how to handle pictures and videos, highlighting as well as wizards, dark modes, and mobile screens. The cheat sheet summarizes the most important guidelines, for more details scroll down:

Cheat sheet for SUIs

Shapes

Use the following shapes to SUIfy elements that you do not need.

<div> <div>UI Element to be SUIfied</div> <div>Recommended Value / Snagit Tool</div> </div> <div> <div> <p>Icons & Avatars, also Trash Icon</p> <p><em>Tip: While drawing the circle, press shift key to ensure the circle is perfectly round (this trick also works for PowerPoint).</em></p> </div> <div>Round Circle</div> </div> <div> <div>Headlines & Table Headers</div> <div>Rectangle with square brackets (not rounded edges)</div> </div> <div> <div>Text</div> <div> <p>Replace text with the text mode</p> <p><em>Note: If your text field is too small, this function will not work properly. We then recommend drawing the individual lines by hand.</em></p> </div> </div> <div> <div>Buttons</div> <div> <p>Cover the button text</p> <p><em>Tip: To select the color of button, use the pipette to match the correct color.</em></p> </div> </div> <div> <div>Product Names</div> <div>Replace product name entirely: do not use a differently colored element to cover it, but make it disappear, i.e., cover the product name with an element that has the same color as the background</div> </div> <div> <div>Images</div> <div>Replace images with a placeholder offered by Snagit in the quick styles selection. Adjust the colors with the help of the pipette</div> </div> <div> <div>Videos</div> <div>Replace images with a placeholder offered by Snagit in the quick styles selection. Adjust the colors with the help of the pipette</div> </div>

false

Symmetry and enough space: use copy&paste of the shapes to ensure that your shapes have always the same height
Sometimes, there is not enough space between an icon and the text thereafter to comfortably cover the icon with a round circle, and the headline with a square element. We recommend performing the following steps: Cover the entire upper part of the tile with a white element. Now that you have the necessary space, go ahead, and recreate the headline and icon structure, only this time, leave more space between icon and text

dont

false

No symmetry between the shapes
Not enough space between shapes

Colors SUI Color Palette

This is the default SUI color palette for Fiori. Use, for instance, for SAP BTP Cockpit and its services. However, we've prepared alternatives for other color palettes.

Light Grey

#f2f2f2

RGB(242, 242, 242)

Dark Grey

#d9d9d9

RGB(217, 217, 217)

Dark Blue

#364b5d

RGB(54, 75, 93)

Light Blue

#d1e8ff

RGB(209, 232, 255)

Medium Blue

#5a7da0

RGB(90, 125, 160)

Red

#fc4242

RGB(252, 66, 66)

<div> <div>Colors</div> <div>Usage</div> <div>Hex</div> </div> <div> <div>Light Grey</div> <div> <p>Cockpit: left-hand navigation bar, texts, bread crumbs etc.</p> <p>In general: texts, headlines, etc.</p> </div> <div>#F2F2F2</div> </div> <div> <div>Dark Grey</div> <div>Cockpit: headlines; text on light grey backgrounds</div> <div>#D9D9D9</div> </div> <div> <div>Dark Blue</div> <div>Cockpit: header, covering services names</div> <div>#364B5D</div> </div> <div> <div>Light Blue</div> <div>Cockpit: left-hand navigation bar, selected</div> <div>#D1E8FF</div> </div> <div> <div>Medium Blue</div> <div>Cockpit: user icon, help icon, in header etc.</div> <div>#5A7DA0</div> </div> <div> <div>Red</div> <div>For highlighting</div> <div>#FC4242</div> </div>

Further Color Themes

See the examples and palettes below if you are working in differently themed UIs.

guideline

If you are not sure about the theme of your screenshots, you can check the source code of the website with the Inspect Element of Google Chrome: Press F12 for Windows, Command + Shift + C for Mac.

Fiori 1 = Blue Crystal
Fiori 2 = Belize
Fiori 3 = Quartz
Fiori 4 = Horizon

How to learn about the color theme used on a website