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
Explore the revised article on theming and discover the new Quartz Light colors.
(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.
The guideline for actions and their placement has been refined as part of SAP’s UX consistency product standard. We’ve also defined standard labels for common actions.
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
You can see how SAP Fiori 3 and the Quartz Light theme look in practice by browsing the layouts and floorplans (for example, the dynamic page layout, list report, or object page).
Note: Other parts of the guideline may still show the alternative SAP Belize theme.
New SAP Fiori 3 Design Stencils
With this guideline version, we provide a fully revised stencil package with new stencils for SAP Fiori 3. In addition to stencils in Axure RP, we now also provide Sketch stencils for Mac users.
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.