Google’s Material Design and SAP Fiori Design

Categories Interfaces0 Comments

Also availabe in/Auch verfügbar auf: Deutsch (German)

I have gained quite some knowledge about Fiori. I started with Fiori, because I have worked as an UI/UX deisgner for quite some years. I started with table layouts, which means that a layout was structured by a classic table like this:

Layout Element Layout Element Layout Element
Layout Element Layout Element Layout Element
Layout Element Layout Element Layout Element

To create such a layout was quite a hassle and to modify it, after being ready, was aweful. There was so much code of nested tables in table cells with further code in the embedded tables, that one could spend ages finding the right element to modify. Than one day, I have discovered an article from Ethan Marcotte about the idea to display websites on small screens. The article is quite old, in terms of web design, but its still a good and valid article. Read more here.

And after reading this article, I was inspired. I knew instantly, that this was the future. The people around me weren’t convinced and the answer on my enthiusiasm was “Do you really think, that people want to visit a website on their phone???”. But I was totally convinced and started  playing around, although XHTML and CSS were not really ready for such complex applications.

And at a certain moment, speople slowly started to use smartphones. The first real smartphone was brought to the public by, who else, Apple. The Apple iPhone 3G was the newest development and a sensation.  And the W3C (World Wide Web Consortium) started to develop a new version of HTML4 and CSS2 which are now HTML5 and CSS3. HTML5 enables a more semantic code for the layout and CSS3 makes it possible to optimize a layout for multiple screensizes.

But it took quite a while, untill both had been fully released. During that time, new browsers and, very important, new screen sizes appeared. The new browsers brought us a lot of problems, because in the beginning there were only two browsers:

  • The Internet Explorer
  • The Netscape Navigator

Each browser interpreted a website in a different way (one can compare it with television sets in an electronic market. There the same show is broadcasted on every screen and each screen shows different colors). This caused us the effort to make comprehensive adjustments a design for each browser separately. Fortunately this Problem belongs to the past now. Except for the Inernet Explorer which still rendrs websites incorrect, if a developer doesn’t make special adjustments.

Finally the way to responsive web design war smoothened and the triumph march of mobile sites was unstoppable. Google is the big influencer about new features for websites and is quite strict about it. Websites which are not responsive will be punsihed by bad rankings in realtime. Google also has created the new design rules for the internet. And we’re all following those rules.

The latest one is “Material Design”. In another post, there’s an explanation about what Google’s Material design is all about (will be published later).

One of the main features of Material Design are cards.

A card is a sheet of material that serves as an entry point to more detailed information.

Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length. A card collection is a layout of cards on the same plane. (Source:

Here are some examples:


These card layouts are very popular on desktop pc and and laptop as well:

Websites which feature such card layouts, are intuitive and therefor comfortable and easy to use.

SAP has reconized the signs of the times, for people are using their samrtphones more and more. Might it be to book a ticket, to buy clothing, to book their holiday or to gain informations like the weather, where there’s a traffic jam and so on. And because we are all very familiar with mobile devices, it is a logical consequence to apply this into working life.

The old interface of SAP was, and still is, confusing. Users had a hard time to learn which elements, like input fields, were reserved for their tasks. To achieve a more comfortable and pleasant working experience, SAP has developed a new interface, which delivers the following design principles:


This design concept  contains the use of apps. Those apps are browser based. The apps can be found in a launchpad similar as the start menu of Windows 1o. Apps are regular SAP transactions (there are also other applications) and by clicking one of the tiles, the employee can start performing his or her tasks.

Of course the launchpad adapts so every screensize.

One of the great SAPUI5 apps are  Overview Pages. The name says it all. by clicking a tile in the OVP, the user is forwarded to a view with cards. Those cards contain different informations about one subject or several subjects. Here is an example of an OVP with procurement informations:

And here, the same desing principle from Google Material Design cards is used. Below you can compare a google layout with cards and  an OVP. By dragging the slidebar you can see the comparison:

And this leads to the conclusion, that the new design of SAP is based on the design principles of Googles material Design principles.

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress spam blocked by CleanTalk.