Flat Design (2.0) – alles andere als flach

In Interface Design, User Experience Posted

Sobald sich die Frage stellt, welches Interface Design den vermeintlich plastischen Benutzeroberflächen des Skeuo- oder gar Neumorphism Konkurrenz macht, kommt Flat Design ins Spiel. Völlig konträr zum Ansatz, eine möglichst dreidimensionale User Experience zu schaffen, hält das Flat Design den Content so flach wie möglich – im wahrsten Sinne des Wortes. Unaufdringlich, minimalistisch und schnörkellos setzten sich die Entwürfe lediglich aus Vorder- und Hintergrund zusammen. Opulente Effekte haben bei diesem Gestaltungsansatz keine Chance. Und das ist auch gut so, schließlich liegt das Ziel der Zweidimensionalität darin, Informationen möglichst einfach zu vermitteln.

Flat Design in der Praxis

Im Vergleich zum mittlerweile etwas in die Jahre geratenen Skeuomorphism ist das Flat Design in seiner Umsetzung um ein Vielfaches simpler. Während die Ausgangssituation sich zuvor durch den Versuch charakterisierte, den Nutzer*innen grundlegende Schritte im Umgang mit digitalen Benutzeroberflächen näherzubringen, hat sich im Laufe der Jahre selbstverständlich ein Wandel vollzogen. Uns ist mittlerweile bewusst, welchen Symbolen welche Funktionen zuzuschreiben sind, beziehungsweise wie die grobe Struktur einer Website aussieht. Die digitale Darstellung real existierender, analoger Geräte ist somit nicht mehr notwendig und rein optisch eher out.

Nichtsdestotrotz sollte der ein oder andere Kniff berücksichtigt werden, um auch im Flat Design ein stimmiges Endergebnis zu schaffen. Auf diese Weise kann auch ohne aufwendige Codierung der Monotonie den Kampf angesagt werden. Die Faustregel dabei lautet: step by step zum Wow-Effekt.

1. Kontraste schaffen

Auch wenn ausschmückende Bausteine wie Farbverläufe im Flat Design unberücksichtigt bleiben, bedeutet dies nicht zwangsläufig, dass die Joy of Use unter den Tisch fällt. Ganz im Gegenteil: durch die Reduzierung der Inhalte auf seine wesentlichen Bestandteile, steht den User*innen die Möglichkeit offen, sich voll und ganz dem Interface zu widmen. Kontraste erweisen sich dabei als sinnvolle Technik, Vorder- und Hintergrund klar voneinander zu trennen und klickbare Elemente hervorzuheben. Eine Problematik, die üblicherweise mit Schattierung und Co. gelöst wird. Um die Navigation innerhalb der Anwendung zusätzlich zu supporten, sollten außerdem helle Akzente das Design komplettieren. Weiße Flächen und Elemente ziehen so die Aufmerksamkeit des Betrachters auf sich und unterstützen zudem die Navigation auf der Website.

2. Illustrative Elemente und schlichte Fonts nutzen

Flat Design sollte jeder Altersgruppe zugänglich sein; unabhängig vom Alter und technischen Wissen der User*innen. Die Verwendung von Kontrasten bildet schon einmal die Basis für eine optimierte Usability. Sollte sich dennoch herausstellen, dass die Anwendung weiterhin Fragen aufwirft, könnten unterstützende grafische Elemente, wie beispielsweise Pfeile, des Rätsels Lösung sein. Die Symbolik zählt, während kunstvolle Schriftarten eher in den Hintergrund treten. Beeinflusst von der Schweizer Typografie sowie dem Bauhaus-Motto Form Follows Function sind Serifen und Schnörkel ein absolutes No-Go. Fonts mit Block-Charakter vor einem möglichst satten Hintergrund sind wiederum besonders vorteilhaft.

3. Mittels Animationen Abwechslung schaffen

Durch die Zweidimensionalität des Gestaltungsansatzes laufen Anwendungen bei einer unvorteilhaften Realisierung des Flat Designs schnell Gefahr, einschläfernd zu wirken. Um die User*innen also während der kompletten digitalen Interaktion bei Laune zu halten, bieten sich kleinere Animationen an. Diese minimieren nicht nur das Einschlafrisiko, sondern spielen in Sachen Emotion Design eine ausschlaggebende Rolle. Gefühle wecken und eventuell sogar das Belohnungszentrum aktivieren hat in diesem Sinne oberste Priorität. So lassen sich bereits mit kleinen Bewegungsabläufen wesentliche Effekte erzielen.

Back to the roots – Flat Design 2.0

Die Idee hinter Flat Design ist denkbar simpel und mittlerweile fast schon ein altbewährter Klassiker, betrachtet man die aktuelle Evolution in Richtung Flat Design 2.0. Auch wenn der Name an sich etwas unkreativ sein mag, bietet die Weiterentwicklung des Gestaltungsansatzes einige optimierende Features. Während das klassische Baukasten-System bestehen bleibt, wird das Konzept der flachen Zweidimensionalität durch den Einbau realistischer Merkmale durchbrochen. Effekte wie Schattierungen sollten dabei möglichst dezent eingesetzt werden und umfangreicheren Content zulassen. 

Zusammenfassend eignet sich Flat Design (2.0) für sämtliche Anwendungen, in denen Informationen schnell und einfach verständlich vermittelt werden sollen; Manuals sind wahrscheinlich ein klassisches Beispiel. Aber auch komplette Logos, welche noch im kleinen Format attraktiv aussehen sollen, sind perfektes Ausgangsmaterial für die flache Gestaltung. Wer sich nun also fragt, ob Flat Designs für die eigene Anwendung in Frage kommen, sollte stets das Verhältnis zwischen Content und Optik abwägen. Je weniger Inhalte kommuniziert werden müssen, desto leichter lässt sich ein zweidimensionales Interface ästhetisch umsetzen.

• Die Evolution des Flat Designs – Flat-Design 2.0 entwickler.de am 08.12.2015
• Flat Design: 10 Tipps und Infos für bessere Grafiken t3n.de am 02.04.2016
• Flat Design: Was ist es und wie nutzt du es 99designs 2019