Enhanced content, a fresh visual design and new features! The SAP Fiori Design Guidelines (https://experience.sap.com/fiori-design/) have received a face-lift and now offer more content than ever before. The new guidelines span the whole spectrum of SAP Fiori design – from the general concepts to more in-depth articles on the various floorplans, app types, and UI elements. We’ve also thrown in some useful design resources and made the site much easier to navigate. 

Here are some of the new features you’ll be seeing:

Versioning

In each article, you can switch between guideline versions 1.26 and 1.28. The guideline versions correspond to the respective SAPUI5 versions 1.26 and 1.28. New guideline versions will be added in the future. 

 

Explore

You can now explore and filter for all floorplans, app types, frameworks and UI elements on a single page. This is a great way to get an overview and identify the right control or pattern for your app. Once you’ve found it, you can jump straight to the corresponding guideline article.

 

What’s new in SAPUI5 Version 1.28?

This article summarizes all the changes to the guideline with version 1.28. It provides a comprehensive overview of the new features added with the last release. 

 

Design Stencils

Design stencils are ready-to-use drafts of SAP Fiori layouts, floorplans and UI elements. You are welcome to use the design stencils to visualize your SAP Fiori app ideas in Axure. They are easy to use and give you a realistic impression of your final design. You can download the SAP Fiori design stencils at https://experience.sap.com/fiori-design/resources/downloads/.

 

Check out the new SAP Fiori Design Guidelines at:

https://experience.sap.com/fiori-design/

Not logged in
  • Mustafa Bensan   4 years ago

    This is a great new look for the Fiori Design Guidelines. The previous version included a very good description of the guidelines for Analytical Apps under the Application Types section. However, the Analytical App guidelines seem to have been completely omitted in the new version. I was wondering if there was a reason for this?

  • Sabina Hitzler   4 years ago

    Hello Mustafa Bensan,

    The SAP Fiori Design Guidelines have more analytical apps content now than in the previous version. There are two articles about this topic:

    Analysis Path Framework: https://experience.sap.com/fiori-design/app-types/analysis-path-framework/

    SAP Smart Business Framework: https://experience.sap.com/fiori-design/app-types/smart-business-drill-down-app/

    Does this help you?

    Best regards,
    Sabina

    • Mustafa Bensan   4 years ago

      Hi Sabina,

      Thanks for your prompt follow-up. I am familiar with both of those frameworks but was under the impression that they are just two specialised subcategories within the overall Analytical App Type category. For instance, it is possible to develop Fiori Analytical Apps without using either the Analysis Path Framework or the SAP Smart Business Framework. The previous documentation covered this scenario and so I think is still relevant and complementary to the new documentation. It seems that perhaps this was “lost in translation” during the transition from the old to new documentation. I think for completeness and clarity it would be helpful if the previous guidelines for general Analytical Apps were also included.

      Regards,

      Mustafa.

    • Sabina Hitzler   4 years ago

      Hi Mustafa,

      Thanks for your feedback. We check this.

      Best regards,
      Sabina

  • Anonym  4 years ago

    So where does this fit into the free SAP_Fiori_UX_Prototyping_Kit that is available for download. Why was it necessary to use a protoyping tool that must be purchased? Will the PowerPoint based Kit be kept up to date or will it be removed?

    • Sabina Hitzler   4 years ago

      Hello Harry Fumey,

      Microsoft PowerPoint has been retired as our interim solution for SAP Fiori prototyping. With SAP UI5 1.26 SAP has decided to switch to a professional prototyping tool for designing SAP Fiori applications – Axure. With Axure you can do it all in one: wireframing, prototyping, and documentation.

      Benefits of Axure
      – Make low-fi and hi-fi wireframes with dynamic interactions, or build fast mock-ups without interactions.
      – Masters and widgets/stencils make your work easier and save time.
      – Adaptive views help to visualize interactive mock-ups for all sizes (desktop, tablet, and smartphone). Interactive prototypes can be tested on all devices.
      – Availability of up-to-date stencils from the SAP Fiori Design team including all SAP Fiori icons.
      – No coding required! A tool for designers and anyone who wants to proof a concept.

      Best regards,
      Sabina

    • Mustafa Bensan   4 years ago

      Hi Sabina,

      I think it’s good that the SAP Fiori Design Team will be providing up-to-date stencils for a prototyping tool like Axure. I have the following suggestions in this regard:

      1. I have used Axure in the past for Fiori prototyping but have recently discovered a visual design software called Antetype (http://antetype.com/). Personally, I find its responsive layout and widget features far superior to those of Axure’s. Perhaps you could consider offering a Fiori Widget Library and Screen Templates for Antetype as well? That would be great if possible 🙂

      2. You probably already have this on the radar, but I thought I’d mention it anyway. Since the PowerPoint Fiori Prototyping Kit is being retired, you may wish to update the next version of the openSAP course “Build Your Own SAP Fiori App in the Cloud” accordingly as this course currently references the PowerPoint Kit.

      Thanks,

      Mustafa.

    • Sabina Hitzler   4 years ago

      Hi Mustafa,

      Thanks for your reply!

      1. SAP exclusively offers SAP Fiori design stencils for Axure. There are currently no plans for design stencils in Antetype.

      2. The colleagues of openSAP already know about this new stencils kit and take this into consideration.

      Best regards,
      Sabina

  • Anonym  4 years ago

    Will you replace Axure with Build? Right now it’s a bit cumbersome to buy an extra license for an official prototyping tool.

    • Vincent ESCALIER   4 years ago

      Hello Michal,

      Thank you for your interest in BUILD.

      The answer depends on the level of complexity of the prototype you want to make. BUILD currently offers some basic capabilities to create prototypes, but Axure is more advanced in this domain.
      Of course, BUILD is still in Beta, and will grow over time. Making it superior to Axure for prototyping in general and for Fiori specifically is our goal.
      In the meantime, you should use the tools that you are most comfortable with and that correspond to your needs.

      As a side note, we already allow you to import HTML Axure prototypes into BUILD, and run user research on top of it. We hope to support similar integrations with other tools as we mature.

      Best regards,

      Vincent Escalier
      Product Owner – BUILD Team

  • Mustafa Bensan   4 years ago

    Hi Sabina,

    The SAP Fiori 2.0 UX was recently announced in this press release: http://news.sap.com/sap-fiori-2-0/

    Will the SAP Fiori Design Guidelines be updated to reflect the new look and feel of Fiori 2.0 and if so, when can we expect such an update?

    Thanks,

    Mustafa.

    • Sabina Hitzler   4 years ago

      Hi Mustafa,

      The SAP Fiori Design Guidelines reflect the respective SAPUI5 version. Each guideline article has a versioning drop down on the upper right corner. Once Fiori 2.0 is released, the SAP Fiori Design Guidelines will be updated to reflect this in the corresponding version.

      The press release says the release is expected next year:
      “As we bring SAP Fiori 2.0 into the SAP portfolio now through next year, customers across the enterprise will be able to experience its benefits for both simple and complex transactions.” (http://news.sap.com/sap-fiori-2-0/)

      Best regards,
      Sabina