Flat Design! Was ist es? Was kann es? Was kommt danach?

Flat Design ist bereits einige Jahre alt, in Designer-Kreisen quasi ein alter Hut und auch so gut wie jeder Smartphone-Nutzer hat diesen Begriff schon irgendwo gehört. Und trotzdem wissen viele nicht, was sich genau hinter dem Begriff verbirgt. Wie kam es zum Flat Design? Wie funktioniert es? Was genau ist so faszinierend daran? Und wie lange wird es uns noch begleiten?

UI-Design Trends vor dem Flat Design

Erinnert Ihr euch noch an die Zeit, in der alles dreidimensional und „echt“ auszusehen hatte? Diese Zeit in der alles, aber auch wirklich alles, von Website bis zu Apps, mindestens eine Art von Textur, Schlagschatten oder Lichteffekten bekam. Wenn ja, dann wisst Ihr bereits was Skeuomorphismus ist! Ein Trend der dazu neigte, realistische Gegenstände mit allerhand Effekten und Texturen nachzubilden.

Zu Zeiten des Skeuomorphismus, in denen unglaubliche Overloads an Ressourcen (in Form von zu viel 3D und „Bling Bling“ Textur) die Web- und Appwelt beherrschten, entstand eine Gegenreaktion: Das Flat Design. Designer wie Nutzer hatten sich an den überladenen User Interfaces satt gesehen und verlangten nach einer Atempause. Ähnlich dem Gefühl, dass viele von uns in der Zeit nach den Weihnachtsfeiertagen ergreift. Ein Ende der Völlerei! Neben der Verfolgung von Prinzipien wie „form follows function“ und „weniger ist mehr“, war es deshalb an der Zeit, die visuelle Überforderung einzudämmen und den glitzernden Mausverfolgern und nachgebildeten Arbeitsplätzen Lebewohl zu sagen.

Doch obwohl Flat Design bereits 2010 erstmals in Kombination mit dem Windows Phone 7 auf dem Markt erschien, zog es zunächst keinerlei größere Aufmerksamkeit auf sich. Diese erreichte es erstmalig bei seinem Redesign innerhalb von Windows 8, wobei der große Durchbruch erst 2013 beim Release von Apples iOS 7 kam. Damals begann der große Hype und seither prägt diese Stilrichtung die Designbranche in jeder Form – sei es im Interface Design, im User Interface/ User Experience Design, im Webdesign oder in Applikationen.

Was ist Flat Design und wie funktioniert es?

Der Begriff Flat Design beschreibt einen minimalistischen Gestaltungsstil, welcher den Inhalt und nicht das Design der Anwendung an sich fokussiert. Kurz: Brauche ich den hübsch gestalteten Firlefanz für meine Funktion wirklich? Nein? Dann raus damit!

Die genutzten Formen sind dabei ausschließlich zweidimensional und verzichten auf jede Art von Textur, Verläufen, Drop Shadows (Schatten hinter dem Objekt) und anderen allgemeinen Darstellungstechniken der Dreidimensionalität. Abgesehen von diesen elementaren, flach gehaltenen Strukturen ohne Extras, beruht Flat Design auf einer klaren Hierarchie und der genauen Platzierung von Elementen. Alles ist gut durchdacht. Heraus kommt ein Design, welches auf allen Geräten gleich angezeigt wird – mit einer aufgeräumten, einfachen Benutzeroberfläche, der Ersparnis von Ressourcen und einer verbesserten User Experience (z.B. aufgrund von geringen Ladezeiten).

Das klingt eigentlich ziemlich einfach oder gibt es doch etwas, was man dabei falsch machen kann?

Nachteile von Flat Design

Flach ist nicht gleich gutes Design. Auch wenn einfach einfach einfach ist, besteht die Gefahr auf Verwirrung und Irritation des Nutzers. Simpel kann manchmal eben schlichtweg zu wenig durchdacht sein, beispielsweise bei einer Menüführung. Flat Design bringt die Gefahr mit sich, mit seinen flach gehaltenen Elementen beim Nutzer diverse Unklarheiten hervorzurufen. So kann der Nutzer aufgrund der zu ähnlichen Farb- und Formgebung gegebenenfalls nicht zwischen einer Infobox und einem Button unterscheiden. Familiäre Farbabstufungen können unter anderem auch eine komplexere Übersicht nicht sinngemäß ordnen, sodass eine größere Hierarchiefolge nicht mehr möglich ist. Das kann die Benutzerfreundlichkeit ungewollt enorm einschränken.

Wie kann man Flat Design benutzerfreundlich gestalten?

Um etwaigen Verwirrungen vorzubeugen, wurden fünf Erweiterungen des Flat Designs entwickelt, die es Designern ermöglichen, auch komplexe Sachverhalte einfach, aber nicht zu simpel, abzubilden.

Long Shadows

Fluidmobile Blogbeitrag zu Flat Design - Long Shadows Bild

Bunte Farbpaletten

Fluidmobile Blogbeitrag zu Flat Design - Bunte Frohe Farben Farbpalette Bild

Simple Typo & Icons

Fluidmobile Blogbeitrag zu Flat Design - Simple Typografie und Icons Bild

Ghost Buttons

Fluidmobile Blogbeitrag zu Flat Design - Ghost Buttons Bild

Minimalismus

Fluidmobile Blogbeitrag zu Flat Design - bunter Minimalismus Bild

Nicht alle dieser Erweiterungen sind unter Designern gleich beliebt, aber für mich zählen Ghost Buttons ganz sicher zu den nützlichen Erweiterungen, um die Usability für den Nutzer zu erhöhen.

Die Definition sowie die Erweiterung von Flat Design dürften nun klar sein. Aber gibt es auch etwas nach dem Flat Design? Erst gab es den Skeuomorphismus, dann das Flat Design – steht schon ein nächster Trend vor der Tür? Um etwaige Aussagen über die Zukunft von Flat Design machen zu können, sollten wir einen Blick auf den Designmarkt werfen.

Nicht alles, was flach ist, ist Flat Design.

Neben Flat Design gerät oft der Begriff Material Design ins Gespräch. Schnell wird jedoch klar, dass diese Designstilrichtung sehr am Flat Design orientiert ist. Während Flat Design den Fokus auf digitale Interaktionen setzt und dabei auf minimalistisch abstrakte Formen schwört, wird, wie wir schon gesehen haben, die Komplexität von Bedürfnissen manchmal zu stark vereinfacht. Ausführlichere, komplexere Hierarchien, wie z.B. Unternavigationen sind daher nur bedingt bis nicht kompatibel mit den eigentlichen Guidelines von Flat Design.

An dieser Stelle kann das Material Design glänzen. Die Kommunikation, also das Feedback auf die Handlung des Users steht hier im Mittelpunkt. Eine ästhetisch flach gehaltene, aber multidimensional aufgebaute Gestaltung soll die reale und digitale Welt miteinander verbinden, indem ein Hauch von Skeuomorphismus sein Comeback findet. Der Nutzer kann Elemente klar trennen ohne, dass er verwirrt ist. Und das Ganze dank einer mäßigen Nutzung von Schatten, Textur oder Verläufen. So kann ein höheres Maß an Komplexität dargestellt werden. Genutzte Verläufe dienen hier als Verdeutlichung von interaktiven Elementen, während Drop Shadows diverse Elemente voneinander trennen sollen.

Hier die unterschiedlichen Designstile im Vergleich:

Fluidmobile Blogbeitrag zu Flat Design - Skeuomorphismus Mikro Bild

Skeuomorphismus

Fluidmobile Blogbeitrag zu Flat Design - Material Design Bild

Material Design

Fluidmobile Blogbeitrag zu Flat Design - Zahlen Spiel Beispiel Bild

Flat Design

Die Frage aller Fragen: Was kommt nach dem Flat Design?

Wie bei allen vorherigen Trends auch, sind anstehende Stilwechsel-Prophezeiungen mit Vorsicht zu genießen. Niemand kann genau sagen, ob und wann das Flat Design sein Haltbarkeitsdatum erreicht. Fakt ist derzeit nur, dass diverse Versionen und Erweiterungen dieser Gestaltungsform bestehen und deren Einsatz abhängig von den Bedürfnissen und Anforderungen der User variiert.

Man kann demnach sagen, was man möchte, aber ich denke, das sich Flat Design mit seinen verschiedenen Erweiterungen und verwandten Designstilen noch eine Weile an der Spitze behaupten kann. (Außer Apple entscheidet sich dafür, einen neuen Design-Hype auf den Markt zu bringen …)

Ist das Flat Design das richtige User Interface Design für Ihre App? Welches Design befriedigt die Bedürfnisse Ihrer User aus grafischer Sicht? Wir beraten Sie gerne rund um die Themen App-Strategie, UX-Design und UI-Design. Kontaktieren Sie uns!

Anzeigen von 0 Kommentaren
  • henry

    f design ist das letzte
    man schaue nur diese google bildchen die manchmal animiert sind
    ein graus
    primitiv
    pfui
    beleidigung fürs auge

    • Kira Tschierschke

      Hallo Henry, na das ist doch mal eine klare Meinungsäußerung. 😉 Bist Du dann eher Verfechter des Skeuomorphismus? Was denkst Du, wo sich der Trend hinentwickelt? Grüße Kira