Webdesign wird wieder „plastischer“ und dreidimensionaler: „Material Design“ setzt neue Trends

Benedikt Seurig

– 26. April 2017

Flat Design kommt langsam, aber sicher aus der Mode. Material Design ist in. Lesen Sie die wichtigsten Hintergründe der aktuellen Entwicklung im modernen Webdesign, die übrigens auch von Google forciert wird. Es ist wie in der Mode: Trends kommen und gehen. Was gestern out war, ist morgen schon wieder modern. Im Webdesign ist das nicht anders. Vor einigen Jahren ging der Trend zum so genannten „Flat Design“. Flächige Darstellungen ersetzten die vorherigen, in 3D hervorgehobenen, Layouts mit verschiedenen Ebenen.


Der bisherige Webdesing-Trend: „Flat Design“
Die flächige Optik mit den bunten, ohne Linien aneinandergefügten Kacheln hielt Einzug in Windows 8 und wurde stilprägend für das App- und Webdesign der letzten Jahre. Dafür gab es einen realen technischen Hintergrund: die Smart Phone Revolution. Bedingt durch die geringen Ladevolumen der Mobiltechnologie musste im Design nach Wegen gesucht werden, Layouts mit wenig Datenvolumen zu erzeugen. Das Ergebnis: Flat Design. Ein Design, das mit nur einer einzigen Layer-Ebene auskommt und somit Ladezeiten spart. Ohne komplexen Firlefanz, ohne Kaskaden von 3D-Elementen aufzutürmen. Sogar die Zwischenlinien hat man sich gespart (!).

Neu: „Material Design“. Der Versuch einer Definition und Übersetzung
Doch die Ladevolumen der Mobilverträge vergrößern sich zunehmend und haben daher auch dem Mobildesign und Webdesign wieder mehr Spielräume verschafft. Das Ergebnis ist zwar keine Rückkehr zu extremen 3D-Layer-Optiken, aber: im „Material Design“ kann das Webdesign wieder dezent mit verschiedenen Ebenen arbeiten und dabei auf verschiedene stilistische Eigenschaften zurückgreifen wie Schattierungen, Effekte, Farbabstufungen. Diese Stilmittel geben einem Designelement plötzlich wieder ihre Plastizität und Dreidimensionalität zurück: einfaches Beispiel dafür ist ein simpler Schatten unter einem Pop-Up.

Material Design Example

Der Begriff „Material Design“ ist im Deutschen allerdings mit Vorsicht zu genießen, da wir ihn in unserem Sprachraum als eine Art „Spiel mit Materialien“ verstehen oder übersetzen. Das ist damit jedoch nicht gemeint, sondern eher das Design von Oberflächen. Der Begriff ist am besten als Abrenzung zum „Flat Design“ zu verstehen. Im Prinzip stellt das Material Design keinen Gegenentwurf vom „Flat Design“ dar. Es fügt der bisherigen puren Fläche jetzt mit Hilfe diverser Effekte wieder etwas mehr Dreidimensionalität hinzu, aber dezent, da der Blick auf die Ladezeiten noch immer nicht vernachlässigt werden darf. Was jedoch früher einfach nur als „flache“ Fläche ausgeführt werden musste, darf jetzt wieder in seiner Oberfläche und Struktur ein wenig bearbeitet, auch leicht animiert oder schattiert und damit „materialisiert“ werden. Ohne freilich deshalb gleich wieder in 3D-Layer-Kaskaden zu verfallen oder wirklich Metall- und Lederoptiken zu erzeugen. Stichworte:

• Schatten-basiert
• Animations, Transitions
• Tiefe, Höhe, Licht, Plastizität
• Farben
• Größen
• Nicht planar/flächig, sondern plastisch/greifbar

Woher stammt „Material Design“? Von Google
Ob Material Design von Google erfunden wurde oder nicht, ist nicht ganz klar. Fest steht jedoch, dass Google ein Design-Manifest namens „Material Design“ herausgegeben und damit den Begriff geprägt hat. Sie werden fragen: Google als Design-Trendsetter? Was hat denn ein Internetkonzern damit zu tun? Viel, wenn man sich vor Augen hält, worum es Google dabei geht: um Usability.
Das vorrangige Ziel von „Material Design“ und der dabei vorgeschlagenen Verwendung von Animationen, Schatten usw. ist nämlich, über die leichten (Tiefen-) Effekte die User sehen zu lassen, welche Bereiche interaktiv sind oder geklickt werden können oder welche Teile wichtige Informationen transportieren ( = Userführung!). Somit sollen die neuen Effekte im Material Design helfen, die Nachteile des Flat Designs zu kompensieren. Diese bestehen eben in der Gefahr, im Webdesign einen flächigen Einheitsbrei zu erzeugen, in welchem wichtige Ebenen von weniger wichtigen Ebenen nicht unterschieden werden können. Da Google stets den Webuser im Blick hat, hat sich Google eben kurzerhand auch auf die Design-Bühne begeben. Dies ging Hand in Hand mit der Entwicklung des Google Betriebssystems Android und der damit verwendeten Apps. Google suchte hier sicher nach einer Möglichkeit zurr neuartigen und uniquen Gestaltung dieser Plattform. Konsequenterweise wird Material Design heute mehr in Apps (vor allem Android) eingesetzt und weniger im Web. Aber, die Botschaft lautet: Material Design erobert immer mehr auch das normale Internet.

Wie nutzt man Material Design im Web?
Material Design in Webdesign und Programmierung geht Hand in Hand mit der Planung der Informations- und Kommunikations-Ebenen. Welche Inhalte haben eine hohe Relevanz? Was muss hervorgehoben werden? Auf dieser Basis entstehen nun neue Pop-Up Fenster oder Fehlermeldungen mit neuen Schatten, Layern oder Farbabstufungen. Indem das Webdesign nun diese neuen Hierarchien erhält, grenzt es sich a) vom Flat Design ab und liefert b) dem User wichtige Orientierungshilfen für seine Usability. Was sich im Vordergrund befindet ist „wichtig“, was sich im Hintergrund befindet „unwichtig“. So einfach kann das neue Material Design manchmal sein.

Ein Fallbeispiel (siehe unten) stellt deutlich dar, dass durch Material Design (im rechten Bild) der Vorder- von dem Hintergrund deutlich stärker abgetrennt ist als im linken.
Dem Betrachter wird dadurch deutlich gemacht welches Element die höhere Priorität besitzt. Auch ist es deutlich angenehmer für das Auge.

Fazit: Material Design ist keine Revolution, sondern eine Evolution des bisherigen Flat Designs. Es sollte mit Bedacht verwendet und speziell in Verbindung mit Usability-Zwecken eingesetzt werden, um dem Nutzer einen Vorteil zum Verständnis der Homepage/der Web-Plattform zu verschaffen. Gleichzeitig taugt es aber genau deshalb auch dazu, einen neuen Design-Stil zu prägen. Verbinden Sie das Nützliche mit dem Angenehmen und Fortschrittlichen: Verschaffen Sie Ihrer Seite mit „Material Design“ nun eine innovative Optik, die sich wohltuend von bestehenden flachen Webseiten „abhebt“ – im wahrsten Sinne des Wortes.

Benedikt Seurig