Why Design Guidelines?

Why do I need the design guidelines?

Great question! The SAP Fiori design is built into the SAPUI5 front-end library – a framework that offers over 170 UI controls and numerous layout types. This framework ensures that the layout, control behavior, and visual design are consistent in all SAP Fiori apps. However, this in itself doesn’t guarantee a delightful user experience.

Apps need to be designed with the user in mind. And they need to follow consistent, established interaction patterns that factor in the requirements of each use case. In a large software enterprise such as SAP, these principles and patterns need to be applied by numerous application development teams worldwide. Also, as SAP Fiori gains traction, more and more SAP customers are extending SAP Fiori apps or building their own. These users too are looking to SAP for design guidance.

In a nutshell, the SAP Fiori Design Guidelines offer a single point of reference to anyone involved in designing SAP Fiori apps.

The guidelines extend far beyond general principles and paradigms. They offer concrete guidance so you can execute on a user-centered approach, and they explain how to apply the different layouts, patterns, and controls in detail. The guidelines give you the bigger picture and put technical features into context. They help UX designers and developers make the connection between design considerations and the corresponding SAPUI5 controls.

What are the advantages?

Have a look at some of the benefits of using the design guidelines:

A harmonized look and feel throughout the SAP Fiori app suite

You will have an easy-to-maintain and consistent design, ensuring a cohesive look and feel for your users across all apps.

Faster build times

Rather than having to develop everything from scratch, you can make use of a proven system with ready-made building blocks. This guarantees faster build times for new applications!

Easier testing

You will have a tool to do quick quality assurance checks. Neither the guidelines nor the control library are identical to an app. However, both point out issues you may have in your app. By tackling these early on, you’ll avoid them later!

One language for communication

You will have a shared vocabulary to use as a reference when discussing changes and iterations. Designing apps becomes more efficient when everyone involved speaks the same language.

A great onboarding platform

You will have a great platform for onboarding anyone joining the team! This will also help build awareness and appreciation of the design system.

What’s New and Versioning

The guidelines are updated with every even SAPUI5 release. Check out the What’s New page to see what’s been added or revised in each guideline version.

You can browse through the different versions of individual articles using the menu on the top right-hand corner of the screen.