Simple Graphics for BTP Services
Deliverables / Visuals
Introduction
Simple graphics are used in User Assistance deliverables on the SAP Help Portal to ensure visual consistency.
Getting Started
- If you haven't done so yet: downloadand install the SAP Icon Font.
- Download the Simple Graphic PowerPoint Template as well. PowerPoint is used to create simple graphics.
- If you want to do so, you can add the PowerPoint template to your Welcome Page for easier access.
- Familiarize yourself with the essential guidelines here on this page.
You can find some inspirational videos or websites on the basics of graphic design and other interesting graphics-related topics here:
Guidelines
In this section you can find the essential that you need to create or adapt simple graphics according to the SAP BTP UA standards and guidelines, such as typography, alignment, exceptions and more.
See also:
Typography
Use Benton Sans Regular, 13 pt, for all texts in simple graphics.
On background colors - such as gray boxes - set texts, icons and connections to dark gray (RGB: 64/64/64).
On accent colors - such as blue boxes - set texts, icons and connections to white.
See the following example:
Typography examples for the three use cases
For the correct font size in the PowerPoint template, make sure that your slides are the following size:
- Width: 37,5 cm
- Height: 23,429 cm
Use of Colors
Use the given color palette in the PowerPoint template depending on the use case of your simple graphic.
The complexity of the graphic and the number of objects increase from use case 1 to use case 3. Try to keep it as simple as possible: highlight your important elements in blue and use gray for backgrounds.
The three different use cases
If you want to color-code elements for a specific purpose, explain the color code in a corresponding legend.
See also:
Alignment
Always try to align objects to one another. Thinking in columns and rows and keeping a straight baseline in your graphic can help you keep your objects well balanced.
A good example of a complex simple graphic
Shapes and Images
Try to keep it simple and use rectangular shapes with sharp corners. Minimize background space.
- Shapes have the same size
- Aligned
- Rectangular
- Not a lot of white or background space
Best Practice 1
Best Practice 2
- Shapes are not aligned
- Rounded corners
- Different sizes
- Shadows
Lines and Connectors
Generally, there are only two connection types used.
- Straight lines
- Arrows
Their width is strictly set to 2 pt and, depending on their background foreground contrast, their color is either dark gray (RGB: 64/64/64) or white.
The connector type can vary:
- "Straight" for strictly horizontal and vertical connections
- "Elbow" for every other type of connections
Straight line and arrow connection types
Elbow connection type
An example of elbow-type arrows relating to Entitlement and Quotas
Exceptions
Graphs
Graphs can be colored in a combination of blue and gray shades. Texts are never written on graph shapes. Instead, use a legend.
You can create 2pt solid light gray (RGB: 242/242/242) guiding lines in graphs without further explanation in a legend. In any other case, the change of style is semantically motivated and therefore has to be described in a corresponding legend.
Legends
Legends are a special case and have a very strict appearance:
- It has a rectangular 1pt solid border in gray (RGB: 217/217/217).
- The heading is mandatory: "Legend".
- The heading is written in Benton Sans Light, 14 pt, dark gray (RGB: 64/64/64).
- Text in legends is written in Benton Sans Book, 10 pt, dark gray (RGB: 64/64/64).
- Position the legend left-aligned underneath and close to the graphic.
An example for a graph with a corresponding legend
Icons
You should only use the icons from the SAP Icon Font. Don't use pictograms. To guarantee a consistent use of an icon and its specific semantic, look it up in the SAP Icon Explorer. You should use the following formatting:
- Icons are inserted in size 20 pt.
- Describe icons in a corresponding legend or describe shapes directly with an icon + descriptor.
- The icon color is according to the font color of its descriptor either dark gray (RGB: 64/64/64) or white.
Here are some examples:
- Icon and descriptor are the same color.
- Good color contrast of descriptor and box.
Example icons with descriptors
An example related to platform users
- Bad color contrast.
- Icon not aligned.
- Icon not correctly sized.
An example for poor color contrast
A bad example for icon size
Adapting Existing Graphics
If you have existing graphics that you want to adapt, you can find a checklist here.
You can find an example of a step by step process where a graphic is adapted here.
Support
We offer a specialized private consulting hour every week on Wednesdays 11:00-11:25 (CET/MET). Please write to sabrina.dora@sap.com about your specific points of interest before joining. The consulting hour will then be prepared for your specific needs.
See also: