A Beginner’s Guide to the Design Guidelines

Welcome

Welcome to the SAP Fiori Design Guidelines! If this is your first visit, you’re probably wondering what you’ll find in these guidelines. As a first step, you might want to get acquainted with SAP Fiori, the new user experience for SAP’s enterprise apps.

With SAP Fiori gaining more and more traction, the guidelines were established to give you all the information needed to create a unified and harmonious experience across all devices within the SAP Fiori application suite.

At its core, these guidelines represent the design language of SAP Fiori, which is based on five core principles: to provide a role-based, adaptive, simple, coherent, and delightful user experience. With these core principles in hand, the guidelines go a step further by providing you with concrete guidance, examples, and explanations so you can get started on creating your SAP Fiori app.

What’s In It For You

If the SAPUI5 Library already exists, 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 100 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 of using the guidelines?

Making use of these specifications really is worth the effort, but if you still need some convincing, have a look at some of the benefits of using the design guidelines:

A harmonious 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 throughout all apps for your users.

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 you build an awareness of and appreciation for the system.

Navigate Easily

Once you’re ready to take a more in-depth look at the SAP Fiori Design guidelines, you’ll want to get acquainted with our navigation structure (on the left-hand side of the screen). The guidelines feature hundreds of articles, which are divided into different categories: Foundation, General Concepts, SAP Fiori Elements, Floorplans & Frameworks, UI Elements, and more.

Take a look at the Get Started page to see what you can expect to find under each category.

Versioning

The SAP Fiori Design Guidelines are available starting from version 1.26. You can browse through the different versions of individual articles from the menu on the top right-hand corner of the screen.

Prototyping

Prototypes are the best way to test SAP Fiori app concepts with users. Put your knowledge of the SAP Fiori design language into practice by building prototypes with our Axure RP and Microsoft PowerPoint® design templates. We offer you an extensive set of design stencils that represent all existing controls. Check out design stencils for more information.

Keep Up to Date

As the world of UX and technology is evolving, we too are continuously developing the SAP Fiori design and interaction language. Thanks to the feedback from our users and all other stakeholders involved, we are able to develop SAP Fiori further, offering ever smoother and smarter experiences to our customers.

We are constantly extending and adding controls, as well as adjusting the visual design. Every few months, we update the SAPUI5 Library and simultaneously release a new version of the guidelines to describe these new features.

Want to be kept in the loop? Check out our What’s New section, or join the discussion in the experience.sap.com forum to ask design questions and post your design ideas.