|

Flat Design: Elemente und Trends.

Über die letzten Jahre hat sich im Design von Benutzeroberflächen einiges geändert. Schaut man sich den Startscreen seines Smartphones an, stellt man fest, dass die App-Icons früher anders aussahen. Vor 2013 gab es digital jede Menge Ablenkung: Chaotische Layouts mit hervorstechenden Elementen waren an der Tagesordnung. Bei so viel Reizüberflutung und endlosen Ladezeiten war es naheliegend, dass sich über kurz oder lang ein Trend in die entgegengesetzte Richtung entwickeln würde. Die detailreichen, tiefenscharfen Illustrationen wurden vom Flat Design abgelöst. Flat Design schlägt die Richtung der zweidimensionalen Darstellung von Bedienelementen ein; der visuelle Schwerpunkt liegt stärker auf den Textinhalten. Simple Typografie und unaufgeregte Illustrationen bilden einen neuen ästhetischen Rahmen. Was genau das bedeutet und warum der Hype schon seit einigen Jahren anhält, erörtern wir in diesem Beitrag.

Was genau ist Flat Design?

Flat Design, also flaches Design ist ein grafisch minimalistischer Gestaltungsstil im Interfacedesign. Es wird ein zweidimensionaler Stil gewählt, um Informationen schnell und auf direktem Wege zu vermitteln. Auf den Einsatz von realistisch wirkenden Texturen, Schlagschatten und Verzierungen sowie auf dreidimensionale Elemente wird verzichtet. Betriebssysteme, Internetpräsenzen und Applikationen sind typische Beispiele für die Möglichkeiten des Flat Designs.

Dazu kommt: 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. Außerdem bietet das Design eine bessere Anpassungsmöglichkeit bei unterschiedlichsten Bildschirmgrößen. Zudem verhindert ein Flat Design, dass Internetpräsenzen überladen wirken. Dies wirkt sich positiv auf die Übersichtlichkeit aus. Im Fokus steht ganz klar die User Experience: Durch die Anwendung von Flat Design sollen Funktionalität und Simplizität in den Vordergrund rücken. Ein Nachteil von Flat Design kann dabei aber ein schwacher Wiedererkennungswert einer Benutzeroberfläche sein, dauerhaft können Charakter und Abwechslungsreichtum verloren gehen.

Die Elemente des Flat Designs

Flat Design ist, wie bereits erwähnt, besonders einfach gehalten: Neben zweidimensionalen Objekten, knalligen Farben, Verzicht auf Plastizität und wenig Textur weist das Flat Design oft einen einheitlichen Hintergrund auf. Die Gestaltung wird eben aufs Wesentliche heruntergefahren. Übersichtlichkeit steht klar im Vordergrund, Flat Design nimmt den User an die Hand und vermittelt so ein intuitives Erlebnis.

Icons haben im Flat Design eine wichtige Bedeutung: Sie sind ein fester Bestandteil jedes Flat Designs, um die Icons herum wird mehr leere Fläche (Negativ-Raum) erlaubt. Grafische Vereinfachung von Bedienelementen ist charakteristisch, weswegen auf die zweidimensionale Darstellung von Icons und auch von anderen Illustrationen gesetzt wird. Dieses minimalistische Design drückt sich auch in der Bevorzugung einfacher Schriften und Formen aus, Typografie wird als Gestaltungsmittel genutzt. All diese Faktoren führen zu einer intuitiveren Bedienung der Elemente.

Wirkungsvolles Flat Design ist unaufdringlich. Das heißt, dass es häufig „unsichtbare“ Designelemente enthält. Dabei handelt es sich um Entscheidungen des Designers, die der Nutzer nicht bemerkt. Nutzer fühlen und interagieren mit diesen Elementen, aber sehen sie nicht wirklich – selbst wenn sie Teil des Designs sind. Ein Beispiel ist etwa ein Einkaufswagen-Symbol, das dem Nutzer vermittelt, wohin er klicken muss, um seinen Kauf abzuschließen. Das Symbol ist zwar sichtbar, jedoch gibt es keinen Call-To-Action, der vermittelt: „Hier klicken“. Auch die Nutzung bestimmter Farbkombinationen ist ein Beispiel: So kann dem Nutzer vermittelt werden, wie bestimmte Bilder und Informationen zu bewerten sind.

Anwendung fand das Flat Design zuerst in der Gestaltung von Smartphone-Apps und setzte sich fort in Versionen des Android-Betriebssystems. Den Durchbruch schaffte der Gestaltungsstil mit dem Design von Windows 8, dem wohl bekanntesten Beispiel für Flat Design. Microsoft reagierte damit auf den Tablet- und Smartphone-Boom. Ziel war es, eine einheitliche Benutzeroberfläche für alle derart betriebenen Geräte zu schaffen. Zusätzlich erhöhte das vereinfachte Design die Geschwindigkeit der Bedienung. Deswegen 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, der aus dieser Vereinheitlichung von Bedienoberflächen entstand, ist die bessere Anpassung bei unterschiedlichen Bildschirmgrößen. So hat anschließend auch iOS 7 viele Elemente des Flat Designs übernommen. Es wurde auf Plastizität und Licht-Effekte verzichtet, die Farben wurden primärfarbiger und die Icons weniger fotorealistisch.

Aber nicht nur Betriebssysteme schwören auf Flat Design. Auch Apps haben die Vorteile erkannt und strukturierten um. Ein Beispiel ist etwa die Kalender-App von Moleskine. Nutzer können damit Aufgaben mit dem automatischen Listenorganisations- und Erinnerungstool erledigen. Das soll den Nutzern in einem möglichst modernen Design vermittelt werden. Das Flat Design ist hier die offensichtliche Wahl. Es werden bunte Kacheln verwendet und 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.

Flat Design 2.0

Trotz des großen Erfolgs zeigten sich mit der Zeit auch ein paar Nachteile von Flat Design, denn oft wird eine moderne Ästhetik dann doch über ein gut bedienbares Interface gestellt. So vernachlässigten einige Designs das gute Nutzererlebnis. Zu den größten Mängeln gehört, dass Orientierungshilfen wie Verläufe, Schatten oder Tiefen fehlen. Bei einem solch komplett flachen Interface können Benutzer nicht unterscheiden, welche Elemente eine Aktion auslösen und interaktive Elemente werden nicht wahrgenommen.

Flat Design 2.0, auch Semi-Flat Design genannt, will das ändern und lässt sich daher wohl am besten mit „flach und doch irgendwie nicht“ beschreiben. Um diese Wirkung zu erreichen, mischen sich hier die besten Bestandteile der Flat-Design-Ästhetik mit Elementen zur Steigerung der Usability. Aktuell geschieht das vor allem durch den Einsatz mehrerer Ebenen, die eine visuelle Z-Achse erzeugen. Hierfür eignen sich subtile Schatten, verschiedene Farbpaletten, Highlights und Ebenen. Auf den ersten Blick sieht es zwar aus wie der bisherige Flat-Design-Trend, allerdings mit einer gewissen Dreidimensionalität im Design. So werden Usability-Probleme gelöst – die perfekte Verbindung zwischen Minimalismus und Skeuomorphismus.

Googles Designsprache Material Design ist bisher das beste Beispiel für Flat 2.0. Material Design übernimmt die Eigenschaften des Flat-Designs und rundet das Ganze mit gewissen Effekten ab, um die Verbindung zwischen realer und digitaler Welt besser zu visualisieren. Die Verbindung wird beim Material Design durch Tiefe und Unterteilung der Ebenen mit Schlagschatten erzeugt. Im Google-Material-Design Guide ist dokumentiert, wie das Ganze genau aussieht und umgesetzt wird.

Fazit

Designer müssen sich natürlich nicht an die Vorgaben von Googles Material Design halten, aber um ein Gefühl von Flat 2.0 zu bekommen, ist es einen Blick wert. Flat 2.0 ist eine gute Antwort auf die bisherigen Probleme, die Flat-Design bisher mit sich gebracht hat – ein guter Kompromiss zwischen Funktionalität, Ästhetik und Usability.

Quellen

https://blog.hubspot.de/marketing/flat-design
https://t3n.de/tag/flat-design/
https://t3n.de/news/flat-2-0-neuen-design-trend-709306/
https://kulturbanause.de/faq/flat-design/
https://manx.de/flat-design/
https://99designs.de/blog/news-trends/flat-design-semi-flat-design/