Fiori Design Guidelines

For years now SAP have shared their SAP Fiori Design Guidelines with customers and partners and have included tools to rapidly prototype applications. Visit the guidelines at http://experience.sap.com/fiori-design/

These guidelines have recently been updated and Kai Richer has summarised the new website very well. We have replicated it below.

What’s New

The "What’s New“ section… well, it gives you an overview of what has been added or changed in the present release. This overview is available for each release and all updates are linked to the corresponding article that has been modified. It is a handy way for you to learn what has been changed in a new release. As everything in the design guidelines, the focus is on the best usage of the technology. It is less about what technology has introduced a new feature which will help you take the right decision about what features to include in new designs.

Explore

Is a great way to explore all available components in the guidelines. You can easily filter controls, floor-plans or entire application types by different criteria and you get handy cards that give you a visual preview as well as some short description of the component. You can quickly differentiate between different controls and decide which control might be the best suitable for you. If you just want to get an overview you can scan the cards and get an impression of the richness of the SAP UI5 control library and the 75+ components that are listed in the current version of the guidelines.

Foundation

The foundation topics include a "getting started“ section that gives you a synopsis of the most important elements of the guidelines. You learn more about the design principles that guide us in designing SAP Fiori applications, which will help you to better take your own design decisions and better understand ours.

Responsive design and adaptiveness to different form factors is an important ingredient for SAP Fiori. We believe, that any application should have a representation on any device as we see the world converging. Many users freely move between their desktop computers to tablets, smartphones and wearable devices and they expect the right functionality to be available where they are. This is a great challenge for the entire market today but we believe that with SAP Fiori we have the right basis to provide the right solution on any device. A good part of the foundations discusses how applications can prepare and design for cross-device usage and optimisation.

SAP Fiori relies on an icon font to render icons independent of device and resolution. In this section, you can find the icons we have available already and where you can get access to the icons font.

As all good designs, SAP Fiori values great typography. Also, we want to make sure that our applications support many languages and type systems, run fast and on a small footprint and support custom themes. This brought us to the decision to step back from custom fonts (remember, in the first release SAP Fiori was using the web font Open Sans) and to work with the default sans-serif system font of the corresponding platform.

General Concepts

Many aspects of the design apply across individual applications. A core element of integration is the SAP Fiori Launchpad. While the name misleadingly gives the impression that this is about the beautiful start page with the tiles only, the SAP Fiori Launchpad is much more than that. On the UI-side, the launchpad holds all elements around the application itself including the home page, the catalogue, the navigation bar, etc. Technically, the launchpad is a bundle of services that can be used by the applications to navigate, share context, define settings, persist personalisation, etc. Other cross-functionality like the handling of UI messages or (the newly supported) draft handling are must-reads for everyone. Such cross-application infrastructures should be applied consistently in order to achieve a coherent user experience.

Floor-plans

For many use cases, SAP Fiori has developed standard ways to address them. Such standard screen layouts and page flows are called floor-plans. Such floor-plans represent a best practice that can be reused across different scenarios. The number of floor-plans is growing and there are already new floor-plans on the horizon.

Today we have the following basic floor-plans defined in the guidelines:

• Object View – is used to display an object with multiple facets ordered on different tabs and with the possibility to drill down into details and related objects
• Flat Object View – is a variant of the Object View with no tabs but with all content elements laid out below each other
• Edit Page – is a form-based page grouped in different sections to edit (or create) objects or information
• List Report – is a page to display and handle large sets of data with powerful filter and table (or other visualisation controls)
• Work List – is optimised to work through lists of assigned work items
• Initial Page – is a floor-plan specific to tasks that require an initial selection (e.g. entering a document number, scanning a shipment container) before entering or checking associated data.

Fundamentally, in SAP Fiori we distinguish between full-screen applications that make use of the entire width of the screen and applications that are split into a master-list and the corresponding details. The split-screen layout stems from the responsive pattern where the master list and the details are split on a phone or narrow screen while being shown side-by-side on a wider screen. Most floorplans can be embedded into both layouts.

App Types and Frameworks

Some application patterns have been established during the still young life of SAP Fiori. Some of the most commonly known patterns are the approval apps and other master-detail apps that represented the main part of the initial scope of SAP Fiori. The big advantage of this application pattern is the fact that responsiveness comes for free as it easily adapts to different device sizes and that the interaction pattern is so commonly known in existing consumer applications. We have described some prototypical application types like approval apps, master-detail apps or a shopping cart in this section. These articles contain cross-references to the individual floor-plans and controls and describe how to use them in a composition of an application.

UI Elements

This section contains all details related to the controls available through the SAP UI5 control library as part of the SAP Fiori design language. With more than 150 controls SAP UI5 is one of the most comprehensive HTML5 control libraries available in the industry which fully supports product standards like accessibility as well as enterprise qualities like localisation, theming, RTL, and others. A major part of these controls has been designed as responsive controls to be used in SAP Fiori applications. These controls are documented in this section. The Explore section is an alternative access to the articles in this section.

Services and Resources

There is a number of resources that we offer to our customers and partners to make it easier for them to create their own designs consistent with the standard solutions delivered by SAP. For designers, the most valuable tool will be the design stencils for Axure that allows you to quickly create interactive design mockups for testing purposes that reflect the implementable state.

The SAP Fiori Client is a native container in which SAP Fiori applications can be deployed. The client acts like a specialised browser which handles authentication, caching optimisation and some native device integration features. This SAP Fiori client can be downloaded from the native app stores.

Finally, SAP offers some sample implementations that reflect the best practice in design and development. These so-called "Reference Apps“ can be used to learn developing SAP Fiori applications as well as a blueprint for your own projects. SAP UI5 itself offers a wealth of documentation and support that will help you to get started. This includes the new web-based development tools.