Learning Journey

Discover / SAP Products / SAP S/4HANA Only / Learning Journey
information
This page is no longer updated. We plan to integrate this content into the SAP Design System Academy space.

Intro

The following learning resources are available for both new and more experienced SAP Fiori designers:

  • Knowledge sessions and specific guideline articles provide a first overview of SAP Fiori for web design.
  • Knowledge chunks dive deeper into specific SAP Fiori design topics.
  • A training deck for the prototyping tool Figma.
  • The Related Links section contains general UX onboarding and learning resources.
Check out the new SAP Design System Academy for a growing collection of learning resources around SAP’s design system.

New to SAP Fiori Design for Web?

Take a look at our onboarding assets.

Knowledge Session | SAP Fiori Design System

Duration: 1 hour

Content

  • Learn how SAP Fiori evolved from an escalation into the design system for SAP.
  • Get a deeper understanding of the design system.
  • See examples of the design system and its application.

Resources

▷ Watch the recording

View the slide deck

Last update: January 2021

Knowledge Session | SAP Fiori Design Guidelines for Web

Duration: 1 hour

Content

  • Get an overview of the structure and the content of the SAP Fiori design guidelines for web applications.
  • See SAPUI5 samples for selected controls and layouts.
  • Get a system demo to see how the SAP Fiori layouts, floorplans, and controls work together.

Resources

▷ Watch the recording

View the slide deck

Last update: June 2021

Knowledge Session | SAP Fiori and Accessibility

Duration: 1 hour

Content

  • Get an overview of global accessibility laws and regulations.
  • Learn how to consider accessibility in software design and development.
  • Understand how accessibility is supported by the SAP Fiori design.

Resources

▷ Watch the recording

View the slide deck

Last update: January 2021

Knowledge Session | SAP Fiori Elements for Designers

Duration: 1 hour

Content

  • Understand the motivation and role of SAP Fiori elements for our design system.
  • Take a deeper look at the technical details of the SAP Fiori elements framework.
  • Understand the developer’s perspective and how to have discussions on an equal footing.

Resources

▷ Watch the recording

View the slide deck

Last update: June 2021

Article | Best Practices for Designing SAP Fiori Apps

Duration: 15 minutes

Content

  • What do you need to know when designing SAP Fiori apps?
  • SAP Fiori information architecture (layouts, floorplans, UI elements)
  • Overview of the most important general patterns
  • How to experience SAP Fiori in action
  • 3 steps towards a consistent SAP Fiori design

Resources

Read the article

Deepen Your Knowledge

Get detailed information on specific topics in 30-minute online sessions.

Knowledge Chunk | How to Handle Dialogs

Duration: 25 mins

Content

  • Get to know the difference between:

    • Dialog
    • Popover
    • Quick view
    • Smart link

  • Learn when to use which type of dialog

Resources

▷ Watch the recording

View the slide deck

Last update: March 2021

Knowledge Chunk | Messages in SAP Fiori

Duration: 20 mins

Content

  • Overview of message types (success, warning, etc.) and UI elements for messages (message toast, message popover, etc.)
  • Best practices on when to use which message type and message element
  • Prototype demo to see message handling in action

Resources

▷ Watch the recording

View the slide deck

Last update: July 2021

Learn Figma

The modular training deck is aimed at both beginners and advanced users of the Figma prototyping tool. It concentrates on the most important features and functions, with a focus on SAP use cases. You can use the built-in navigation to jump directly to your topic of interest, or go through the complete training deck to discover features you weren’t aware of.

Check out the Figma Training Deck