Dürfen wir vorstellen: „Flat Design“. Auch bekannt als der raffinierte Cousin des Minimalismus. Doch was verbirgt sich eigentlich hinter diesem Begriff?

In den letzten Jahren hat sich im Design von Benutzeroberflächen vieles geändert. Wer sein Smartphone betrachtet, wird feststellen: Die Icons für Apps sahen früher irgendwie anders aus – detailreicher. Die tiefenscharfen Illustrationen von einst gehören längst der Vergangenheit an. Denn das Flat Design hat eine Ära der zweidimensionalen Darstellung von Bedienelementen eingeläutet und das sogenannte Skeuomorphic Design von unseren Bildschirmen vertrieben. Der Hype um das Flat Design ist seitdem ungebrochen. In diesem Artikel sehen wir uns an, warum.

Wie gut ist Ihre Website aufgestellt? Lassen Sie Ihre Seite jetzt prüfen und  entdecken Sie Optimierungspotenzial.

 

Der Trend zum Flat Design im Web: Entrümpelung im Internet

Wer vor 2013 im Internet surfte, musste mit jeder Menge Ablenkung rechnen: Chaotische Layouts mit hervorstechenden Elementen waren an der Tagesordnung. Bei so viel Reizüberflutung und endlosen Ladezeiten lag es auf der Hand, dass sich über kurz oder lang ein Trend in die entgegengesetzte Richtung herauskristallisieren würde. Das Flat Design mit seinem minimalistischen Ansatz baute viele der bestehenden Strukturen mit dreidimensionalen Elementen ab und verlegte den visuellen Schwerpunkt wieder stärker auf die Textinhalte. Simple Typografie und unaufgeregte Illustrationen bildeten einen neuen ästhetischen Rahmen.

Doch Flat Design sieht nicht nur gut aus, sondern punktet auch mit inneren Werten: Es ist besonders einfach zu bedienen, da die wenig komplizierten Elemente kürzere Ladezeiten und eine einfachere Navigation ermöglichen. Das Nutzererlebnis (User Experience, kurz: UX) steht hier an erster Stelle.

Es ist besonders einfach gehalten: Neben zweidimensionalen Objekten, knalligen Farben und wenig Textur weist das Flat Design oft einen einheitlichen Hintergrund auf. Die Gestaltung wird aufs Wesentliche heruntergefahren. Übersichtlichkeit steht klar im Vordergrund, was auch an den überarbeiteten Elementen erkennbar ist.

Flat-Design-Elemente: schlichte Ästhetik und Farbtupfer

Grafische Vereinfachung von Bedienelementen ist charakteristisch für Flat Design. Das bedeutet vor allem einen Wechsel von der dreidimensionalen auf die zweidimensionale Darstellung von Icons und anderen Illustrationen. Dieses minimalistische Design drückt sich auch in der Bevorzugung einfacher Schriften und Formen aus. Außerdem wird um die Icons herum mehr leere Fläche (Negativ-Raum) erlaubt. All diese Faktoren führen zu einer intuitiveren Bedienung der Elemente. Strahlende Farben sind ein weiteres Merkmal des Flat Design.

Flat Design: Beispiele

Windows 8 als Wegbereiter des Flat Design

2012 war ein gutes Jahr für Microsoft. Der Software-Gigant wagte sich mit der Einführung von Windows 8 an die Spitze der Flat-Design-Bewegung und gilt seitdem als ihr Wegbereiter. 2010 wurde bereits das im selben Stil gehaltene Windows Phone herausgebracht, was die sogenannte „Metro Design Language“ mit vereinfachten Symbolen benutzte. Doch der Design-Trend setzte mit dem neuen Betriebssystem von Windows erst so richtig ein. 

Das Flat Design bei Windows 8 erfüllte einen ganz bestimmten Zweck: Microsoft reagierte mit seiner Implementierung auf den Tablet- und Smartphone-Boom. Der Konzern strebte danach, eine einheitliche Benutzeroberfläche für alle derart betriebenen Geräte zu schaffen. Zudem war klar, dass das vereinfachte Design die Geschwindigkeit der Bedienung erhöhen würde.

Aus diesem Grund erhielt Windows 8 eine speziell für Touchscreens optimierte Benutzeroberfläche – zusätzlich wurde es für die Bedienung mit Maus oder Tastatur angepasst. Ein weiterer Vorteil dieser Vereinheitlichung von Bedienoberflächen ist die bessere Anpassung bei unterschiedlichen Bildschirmgrößen.

windows8-laptop

Bild: Microsoft Windows

Im Sinne des Flat Design wurden bei Windows 8 bunte Kacheln als Bedienelemente gewählt. Die neu eingeführten Windows-Apps werden hier zweidimensional dargestellt und fungieren wie kleine Fenster in die Programme: Bei der Mail-App in der türkis-farbigen Kachel links oben etwa werden die ersten Zeilen der erhaltenen Post eingeblendet. Das großzügige Layout der Kacheln erklärt sich durch die Möglichkeit einer Touchscreen-Bedienung. 

Typische Merkmale des Flat Design bei Windows 8 sind die strahlenden Farben und die einfach gewählten Formen mit wenig Textur. Die Bedienoberfläche priorisiert Funktionalität in modernem Design.

Mobile Flat Design

Seit der Einführung des Betriebssystems iOS 7 auf Apple-Geräten 2013 ist Flat Design auch mobilen Nutzern weitgehend bekannt. Bei Bedienoberflächen für Smartphones ist es mittlerweile klarer Favorit, da es wichtige Informationen auch auf kleinen Bildschirmen gut darstellt und besonders auf die Bedienung via Touchscreen zugeschnitten ist.

Durch das einfach gehaltene Design der Elemente wirkt der Screen zudem aufgeräumt und überfordert das Auge nicht. Der Minimalismus hat hier also zweierlei Nutzen: Er ist gleichzeitig ästhetisch und funktionell.

iPhone: Betriebssystem iOS 7 im Flat Design

Mit der Einführung des Betriebssystems iOS 7 im Jahr 2013 folgte Apple dem Trend des Flat Design: Die Icon-Gestaltung wurde von 3D auf 2D geändert. Spiegelreflexe wurden komplett gestrichen. Statt aber komplett auf optische Tiefe zu verzichten (wie bei Windows 8), arbeitet iOS 7 mit Farbverläufen und Transparenz-Ebenen. Dies ist mit hoher Wahrscheinlichkeit nicht aus rein ästhetischen Beweggründen geschehen: Kritiker des Flat Design führen nämlich an, eine strikte Aufmachung in 2D würde dem menschlichen Auge nicht gerecht, da sich dieses evolutionär auf dreidimensionale Objekte eingestellt habe. Apple wählte hier also einen Kompromiss – denn das Flat Design funktioniert auch mit Transparenzebenen.

IOS_6vs7_Home_ScreenBild: iOS Screenshots von Wikipedia

Moleskine: Kalender im Flat Design

Nicht nur Betriebssysteme schwören auf Flat Design. Auch Apps haben die Vorteile erkannt und strukturieren um. Ein gutes Beispiel ist die Kalender-App von Moleskine. Sie wirbt damit, dass Nutzer Aufgaben mühelos mit dem automatischen Listenorganisations- und Erinnerungstool erledigen können. Dies soll den Nutzern natürlich in einem möglichst modernen Design vermittelt werden: Schließlich handelt es sich um eine technische Innovation. Das Flat Design ist hier die offensichtliche Wahl.

moleskine-app-flat-designBild: Moleskine Actions

Auch hier fällt die Verwendung bunter Kacheln wie in der Benutzeroberfläche von Windows 8 auf. Die Bedienelemente füllen den Bildschirm nahezu komplett aus, wirken durch ihr schlichtes Design aber nicht überfordernd. Das Layout orientiert sich an der Nutzung mit Touchscreen: Größere und kleinere Felder ermöglichen einen guten Überblick über die einzelnen Steuerungsfunktionen sowie einen schnellen Zugriff.

Der Siegeszug des Flat Design ist ungebrochen. Seit große Betriebssysteme wie Windows 8 und iOS 7 den Anfang gemacht haben, kann sich kaum noch ein Nutzer seinem modernen Charme entziehen. Benutzerfreundlichkeit durch Übersichtlichkeit und Funktionalität wird beim Flat Design großgeschrieben. Farbenfrohe Gestaltung von Elementen und kleine Illustrationen sorgen zusätzlich für Freude bei der Nutzung.

Neuer Call-to-Action (CTA)

Headerbild: Bplanet / iStock / Getty Images Plus

Ursprünglich veröffentlicht am 31. Mai 2019, aktualisiert am Mai 31 2019

Themen:

Webdesign