SAP Fiori for Web – Updated Design Guidelines for SAP Fiori 3
The SAP Fiori Design Guidelines for web applications have been updated to reflect SAPUI5 version 1.72. This bumper edition comes with new content for SAP Fiori 3, as well as a host of other updates for new and improved features. Here are some of the highlights…
SAP Fiori 3
New “Quartz” Theme
(Quartz Dark colors will follow in the next version of the guideline.)
New SAP Fiori Launchpad Shell Bar
The new SAP Fiori shell bar has been standardized across all SAP products.
Designing for Intelligent Systems
The guidelines now have a brand new section on designing for intelligent systems. As well as our guiding principles, you’ll find design concepts for different facets of intelligence in enterprise software, including situation handling, ranking, matching, recommendations, and how to explain the results provided by intelligent systems.
Updated Layouts and Floorplans
Note: Other parts of the guideline may still show the alternative SAP Belize theme.
New SAP Fiori 3 Design Stencils
We’ve also added new articles for the following controls and patterns:
- The comparison pattern is a new page layout for displaying information from multiple items side by side.
- The grid list is an alternative view to a list or table. Instead of being displayed in rows, items are shown in a grid. This can be useful for content that requires more height, such as images and charts.
- There’s now a dedicated article for the existing Formatted Text control.
For a complete overview of the updates with each guideline version, see the corresponding What’s New pages:
- What’s New with Guideline Version 1.72
- What’s New with Guideline Version 1.70
- What’s New with Guideline Version 1.68
- What’s New with Guideline Version 1.66
That’s it for this update. The next update (guideline version 1.74) is due out in early April. In the meantime, enjoy working with the SAP Fiori design guidelines!
This post originally appeared at https://experience.sap.com/news/sap-fiori-for-web-updated-design-guidelines-for-sap-fiori-3/ and https://medium.com/sap-design/sap-fiori-for-web-updated-design-guidelines-for-sap-fiori-3-af1f731665a3.