Skip to content

Design Guidelines

Web design is very similar to fashion design. Each year, something new is trendy and maybe old things are coming back. Blogs like 17 UX/UI Trends for 2021 are showing, what is going on, but not everything fits to our customers.

Concerning our B2B design strategy, we figured out some trends, that will give our solutions and customers an advantage in 2022 (and possibly beyond).

Differentiating UX and UI Design

Since we will mix up UX and UI trends, you can read The Beginner's Guide to UX vs UI to get a better understanding of the related area's.

UDINA UX vs UI Design

Additionally, you can read the Justinmind blog, deep dive into A Pilot to the Difference between UI and UX or the Guide to Information Architecture.

Dark Mode

Nearly each OS is supporting a dark mode and this is no more something just for developer nerds, but instead it plays a vital role in user experience.

Light- and Dark ModeAdvantages of the Dark Mode
Dark Mode
  • It saves the battery if the device uses an OLED or AMOLED screen.
  • It is better in terms of the readability of text.
  • It is better for reducing eye strain in low-light settings while using the device at night.
  • It reduces the screen glare and minimizes blue lights.

Since some advantages turn into negative in a high-light setting, the dark mode should be an additional offering that can be easily switched between dark and light mode (day/night).

Minimalistic Design

Sometimes, Less is more! Today, there is an overload of information, and we will try to focus on the main points. A minimalistic user experience takes care of just the relevant information and focus the user with bold typographie.

Minimalism often goes hand-in-hand with Flat design

Flat design is a style of interface design emphasizing minimalist use of simple elements, typography and flat colors.


Neumorphism combines flat design and skeuomorphism. It is a visual style that combines background colors, shapes, gradients, and shadows to ensure UI elements’ graphic intensity. All that allows achieving a soft, extruded plastic look and almost 3D styling.

justinmind blog: Neumorphism: why it’s all the hype in UI design

Neumorphism is the contrast of Flat design. It gives users a more organic and intuitive feeling, that a raised button can be pressed while clearly visualizes different control states.

Micro Interactions

Micro interaction exists in every software application. We use it every time while using different applications. The “Like” feature of Instagram and “Retweet” of Twitter are the perfect examples of micro-interaction.

Under the hood of SAPUI5, more and more features as running asynchronly and there is the need to give a nice and stylish animated feedback (besides the good old busy indicator). Especially, if you have some operations, that will take some time to be executed in the on-premise systems.

SAPUI5 also implemented the Animation Modes, so that control developers can take care of the intensity of the animation.

fullAll animations are shown
basicA reduced, more light-weight set of animations
minimalNo animations are shown, except animations of fundamental functionality
noneDeactivates the animation completely

Skeleton Screens

Luke Wroblewski introduced Skeleton Screens in 2013 through his work on the Polar app, later acquired by Google.

A skeleton screen is essentially a blank version of a page into which information is gradually loaded.

Luke Wroblewski

Unlike Loading Spinners, where the UI displays all at once. A skeleton screen helps load a user interface gradually, a little at a time. This means that the barebones UI displays first. Then the loaded content is gradually populated on-screen.

The SAP Fiori Placeholder Loading UX pattern joins this approach to create an impression of speed and reliability when an app encounters performance barriers.

Placeholder Loading animation of the Object Page

Bold Typographie

Did you notice that web typography is getting bigger and bolder? Especially for landing pages and microsites. Bold typography is one of the easiest ways to grab users’ attention.

SAP Horizon introduces Bold design principle

Bold yet friendly, making users feel relaxed and inspired by using bolder colors and typography, with a friendly, approachable, and contemporary look and feel.

SAP Horizon Bold Typographie

The Experience Mindset

Mobile First

Not new, but still important, since more and more users are used to access the internet with their mobile devices.

What is mobile first design?

Mobile-first design is a design philosophy that aims to create better user experiences by beginning the design process with mobile devices in mind first, often prioritizing the smallest of screens.


Design System

More and more companies are getting serious about unified design experience and building their design system. Material Design, Ant Design, Fluent Design System are the most popular open-source design system.

SAP is taking care about this with the SAP Fiori Design System.

SAP Fiori Design System

Neutral Background Colors, Smooth Gradients and Pastel Tones

Microsoft’s fluent design system and the new design approach by Apple in macOS Big Sur are two of the big pushes in gradient-based designs.

This topic should/can be seen as a subtopic of a design system.

Empty and Error State Illustrations

Errors are scary, and emptiness is boring. But they both are an integral part of a software application. SAPUI5 introduced the IllustratedMessage available since 1.88 (currently experimental).

Illustrated Message Session TimeoutAll applications that require user sign-in should employ a mechanism for automating user sign-out. When the inactivity is about to reach that threshold, a session timeout dialog appears automatically to inform the user.

Currently, there are many places to replace boring "No Data" text for Lists and Grids by using a more descriptive illustrated message. Today, this needs to be done by the developer, but in the future, hopefully controls will get an nodata aggregation to take care of this.

Frictionless Authentication

Since we are using SAP Customer Data Platform, and we also integrate Microsoft Azure AD B2C, we are able to allow an easy way of authentication across different channels. This is one of the main benefits of the SAP BTP.

Status Quo

Luckily, SAP is also following trends and with the upcoming SAP Fiori Horizon redesign where some trends are also taking into account.

Dark ModeThe Horizon theme currently does not offer the Dark Mode (like the Fiori theme), but maybe just a matter off time.
Minimalistic DesignHorizon is reducing the design to be more minimalistic and flat.
NeumorphismCurrently not taken (recognizable) into account. We will play around at least with input controls and the inset look and feel to get rid of the underline placeholder, which look like a formula baseline to mimic paper forms.
Micro InteractionsFirst animations e.g. the animated Switch control are available.
Skeleton ScreensThe SAP Fiori Placeholder Loading pattern introduces the SAP approach. Besides SAP Fiori Elements see also the Freestyle App Use Case.
Bold TypographiePart of the design principles from Horizon.
Mobile FirstAvailable with the early release of the sap.m library.
Design SystemTaken into account by Horizon, but will be finetuned by developer.
Empty and Error State IllustrationsAvailable in an experimental state inside SAPUI5. Still, controls need additional aggregations to benefit from this.

Since SAPUI5 1.101, list based controlls support the IllustratedMessage inside the noData aggregation for visual feedback.
Frictionless AuthenticationSupported by 3rd Party identity providers like SAP Customer Data Platform or Microsoft Azure AD B2C.


A lot of the design trends we want to address are currently also taking into account by SAP. At some points, the designers had a different taste, but anyhow they are following the actual best practices in UX and UI design.

This make is easy to benefit from Horizon just by switching the theme (if finally available and supported by SAP).

Anything missing can be done using custom css and custom controls!

UDINA E-Commerce Enhancements

For our Storefront, which is quite actionable, we have to add things like a Sticky Menu Navigation to enhance the overall user experience and also adding a Scroll-To-Top Button.

These concepts are currently not taken into account by UI5!