Flat Design – was es ist, warum es bleibt

Immer wieder entwickeln sich globale Strömungen im Web, die man als Marketeer oder Designer nicht ignorieren kann. Das Web 2.0 war so etwas, genau wie der Einfluss von Social Media auf die Gestaltung von Webseiten, und jetzt sieht es aus, als würde die Welt flacher werden: Flat Design ist das Zauberwort. Da wir glauben, dass erfolgreiche Online-Kommunikation diese Entwicklung nicht unberücksichtigt lassen sollte, und weil das Thema viel weniger kompliziert ist, als es sich anhört, wollen wir Flat Design hier kurz beleuchten.

Was versteht man unter Flat Design

Unter Flat Design versteht man den aktuellen Trend zu einer Gestaltung, die geprägt ist vom

• Verzicht auf Texturen
• Typografie als Gestaltungsmittel
• stark ausgeprägter Hierarchie in Größen und Farben
• Verzicht auf Plastizität

Anwendung fand das Flat Design zuerst in der Gestaltung von Smartphone-Apps und setzte sich fort in aktuellen Versionen des Android-Betriebssystems. Einen endgültigen Durchbruch erfuhr Flat Design erstaunlich offensiv im Metro-Designvon Windows 8. Damit hat sich dieser Trend in recht kurzer Zeit zu einer ernst zu nehmenden gestalterischen Linie entwickelt. Dass iOS 7, die gegenwärtige Version des iPhone-Betriebssystems, sich dieser Entwicklung stellen musste, war schon vor dem aktuellen Release zu erwarten. Und tatsächlich übernimmt iOS 7 viele Elemente des Flat Designs. Es wird auf Plastizität und Licht-Effekte verzichtet, die Farben werden primärfarbiger und die Icons weniger photorealistisch. Aber welche Hintergründe gibt es für diese rapide Entwicklung? Wir versuchen das Phänomen aus den zwei Richtungen zu beleuchten, die zum Siegeszug von Flat Design geführt haben: Technik und Mode.

Der Weg zum Flat Design aus technischer Sicht

Die letzen Jahre sind durch eine enorme Diversifizierung der Ausgabemedien gekennzeichnet. Konnte man um den Jahrtausendwechsel noch davon ausgehen, dass man sich in einer ständigen Entwicklung in eine vorhersehbare Richtung befindet, nämlich hin zu besseren Prozessoren, besserem Datendurchsatz, größeren Monitoren mit höherer Auflösung und umfassender Multimedia-Fähigkeit, haben sich diese Merkmale weitestgehend verästelt und von einander abgekoppelt. Heute bedeutet ein großer Monitor nicht gleichzeitig gute Multimedia-Fähigkeiten (Browser von Spielkonsolen wie der Wii); heute ist eine hohe Auflösung nicht gleichbedeutend mit einer großen Wiedergabefläche (iPhone mit Retina-Display) oder mit einer hohen Datengeschwindigkeit (Tablet-PCs im Mobilnetz).

Diese vielseitigen Ausgabemedien verändern die Anforderungen an die Programmierung zeitgemäßer Websites und Apps. Heute ist eine Website

• ressourcenschonend im Hinblick auf einfache Prozessoren in Smartphones oder schleche Datenverbindung und Volumentarife in mobilen Netzen
• flexibel in der Darstellung um Hochformate wie Querformate, kleine und große Screens, dicht und weniger dicht aufgelöste Displays zu bedienen
• flexibel in der Bedienung um mit Mouse oder Berührung zu funktionieren

Damit ergeben sich stärkere Einschränkungen in den Gestaltungsmitteln. Große Bilder, etwa Texturen als Hintergründe, oder aufwändig gestaltete Buttons, erzeugen Datenlast und sind schlechter geeignet sich auf verschiedene Auflösungsdichten einzustellen. Will man etwa ein Retina-Display bedienen, muss fast immer auf JavaScript zurückgegriffen werden, um Grafiken in einer höheren Auflösung auszuliefern. Gleichzeitig ermöglicht die Weiterentwicklung von HTML und CSS innerhalb der Programmierung (und nicht ausschließlich im Grafikprogramm) zu gestalten. Die neuen Buzzwords sind hier Responsive Design, Web- und Iconfonts, CSS-Gradients, -Transitions, -Borders. Auch der Einsatz von JavaScript ist mittlerweile so unkompliziert, dass einfache Grafiken und Diagramme einfach dynamisch im Browser generiert werden können.

Webfonts und Flat Design

Endlich wird die freie Auswahl von Schriften in allen Browsern und den meisten Smartphone-Betriebssystemen unterstützt. Auch rechtlich gibt es hier wasserdichte Lösungen. Das ist noch nicht lange so. Bis vor Kurzem musste man sich entweder auf den Einsatz sehr weniger, plattformübergreifender Schriften konzentrieren oder – etwa bei Texten in der Hausschrift – Bilder verwenden. Mit den neuen Möglichkeiten, Webfonts (also browsergeeignete Schriften) zu verwenden, ergibt sich zum ersten Mal die Chance auf wirkliche typografische Gestaltung. Ein Hauptmerkmal des Flat Design.

Iconfonts und Flat Design

Iconfonts stellen eine praktische Möglichkeit dar um Icons auflösungsunabhängig auf einer Website einzusetzen. Der Designer baut die Icons, die er auf der Website verwenden will, einfach in eine Schrift um, die er dann, wie jeden anderen Font einsetzen kann. Weil Schriften immer als Vektoren und nicht als Pfade angelegt werden, sind sie ohne Qualitätsverlust skalierbar und werden auch auf hochauflösenden Displays scharf dargestellt. Der Nachteil ist allerdings, dass, wie mit anderen Schriften auch, die Icons nur in einer Farbe dargestellt werden. Mehrfarbige Icons sind mit dieser Technologie nicht umzusetzen. Das ist dramatisch für ein Designkonzept mit aufwendig gestalteten, glossy Icons – für Flat Design ist es um so besser.

Responsive Web Design und Flat Design

Und was hat Responsive Web Design (RWD) mit Flat Design zu tun? RWD konzipiert eine Website nicht als feststehende Bühne, sondern bezieht die Überlegung ein, dass sich das Layout und die Hierarchien anpassen müssen, wenn die Website auf unterschiedlichen Geräten angesehen wird.

Eigentlich gibt es keinen zwingenden Zusammenhang zwischen RWD und Flat Design. Was RWD aber von einem Design erwartet, ist ein hohes Maß an Flexibilität. Da müssen sich Bild- und Textgrößen anpassen lassen oder Positionen und Ausrichtungen verändern lassen. Ein klassisches Design, das sich auf Bilder und Effekte verlässt, führt hier schnell zu sehr komplizierten und teuren Lösungen. Weil Flat Design weitgehend mit Mitteln der Programmierung gestaltet, ist es viel leichter anzupassen.

Der Weg zum Flat Design aus gestalterischer Sicht

Der Schritt in die Zukunft ist rationaler und funktionaler. Bis vor kurzem schraubten Designer an immer mehr shiny und glossy Designs, so wie wir es z.B. von Apple gewöhnt waren. 3D Buttons, Spiegelungen und raffinierte Lichteffekte sind mittlerweile Standard. Dazu kommen haptische Oberflächen (Leder- oder Holz-Optik) in den Apple Anwendungen. Dagegen setzten immer mehr Designer auf genau das Gegenteil – wie Microsoft mit seiner aktuellen Webseite oder Google mit seinen Design-Richtlinien. Farbige Flächen und Buttons strukturien die Seiten. Es ist übersichtlich, schnell zu erfassen und zu nutzen. Die Usability ist wieder auf dem Vormarsch, chic ist es ja trotzdem. In Vergessenheit geratene Design-Grundsätze haben sich wieder nach vorne gekämpft: „form follows function“ erlebt ein Revival. Ist also doch wieder am Ende weniger mehr? Farben spielen im Flat Design wieder eine größere Rolle. Durch den Verzicht auf glossy Effekte und möglichst realistische Darstellungsweisen sind sie mehr in den Vordergrund getreten, sind stimmungsvoller und direkter (schön auf der Site von minimalmonkey). Das Mitspracherecht des Nutzers bei der Gestaltung der benutzten App scheint mehr Auswirkungen zu haben. Die Webapp SUN (Wetterdienst für iOS-Geräte) macht durch ihre einfache Bedienbarkeit und das Switchen zwischen den Farbpaletten einfach Spaß.

Flat Design folgt dem Trend, den Content einer Website nach Vorne zu bringen – mit wenig Aufwand, ohne viele Bilder, aber natürlich mit einem strukturierenden Layout-Konzept. Ein schöner Gegenpol zur oft übertriebenen Bilderflut oder kleinteiligen Layouts. Da ist die Flat Design basierte Webseite ein kleiner Erholungsurlaub …

Die Herausforderungen des Flat-Design

Für den Designer ist Flat Design durchaus eine Herausforderung. Shiny Buttons sind zumindest unmissverständlich Buttons, und zum Klicken gedacht. Mit der reduzierten Palette an Designelementen wird es komplizierter, die Funktion hindernisfrei zu kommunizieren. JayScrum (ein Projektmanagement Tool) setzt auf Flat Design in seiner Android-App und zeigt hier durchaus die Fallstricke. Der linkszeigende Pfeil soll mich aus der Seite „Projects“ zurückbringen zur Übersicht. Das ist schon zu verstehen, vor allem, weil iOS-Apps an ähnlicher Stelle immer einen »Zurück«-Button haben. Generell ist das Symbol aber nicht eindeutig als Bedienelement zu verstehen. Hätten wir hier ein etwas anderes Symbol – zum Beispiel einen schrägen Pfeil – könnte es genausogut ein Icon für »Projects« sein.

Man verlässt sich hier also sehr auf gelerntes Verhalten und ein natürliches Verständnis für die Leserichtung. Das ist sicher kein grober Usability-Schnitzer, verdeutlicht aber, dass ein sauber konzipiertes Layout im Flat Design nicht nur Gestaltungsmerkmal, sondern auch Verpflichtung ist, um die einfache Bedienbarkeit zu gewährleisten.

Vom Historismus zum Bauhaus, vom Skeuomorphismus zum Flat Design

Kann man dem aktuellen Trend zur flachen Gestaltung also mehr Bedeutung zumessen, als einer vergänglichen Mode? Folgt die Hinwendung zu einer Interface-orientierten Gestaltung einem wiederkehrenden Muster? Ist es normal, dass sich dekoratives, metaphorisches Design zu einer ikonografischen Form wandelt, die ihre eigenen Gestaltungsmerkmale aufweist? Flat Design als das next big thing des Internets zu bezeichnen wäre sicherlich voreilig. Trotzdem hat es in der Designgeschichte bereits ähnliche Bemühungen um eine eigene Formsprache gegeben, besonders im Umgang mit neuen Technologien. Vom Bauhaus über Dieter Rams’ Produktdesign für Braun haben Designer ständig versucht, sich von den Beschränkungen einer metaphorischen Erklärebene zu lösen und eigene, der Funktion des Objekts entsprechende, Stilmittel zu entwickeln.

Nun ist Flat Design sicher kein designtheoretischer Ansatz sich vom Rückgriff auf analoge Vergleiche zu befreien, sondern vor allem eine Gegenbewegung des Geschmacks. Dass Flat Design gerade einen solchen Boom erfährt, liegt natürlich auch in der der Post-Web-2.0 Ära begründet, in der einfache Web-Apps wie Wunderlist und besonders die Anwendungen von Apple mit Analogien zu ähnlichen Produkten aus der nicht Digitalen Umgebung ihre Usability demonstrieren wollten.

Dieser Krücke aus der Lebenswelt – man spricht übrigens von Skeuomorphismus – stellt das Flat Design ein neues Selbstverständnis entgegen. Ob das nun ein bewusster Prozess ist, oder aus den Zeichen der Zeit geboren: offensichtlich ist, dass sich das Web-Design damit von den anderen Design-Disziplinen emanzipiert, und sich zugesteht, seine eigenen Gesetze zu haben und seinen eigenen Konventionen zu folgen.

Wo kann es also hingehen?

Man sollte das Phänomen Flat Design sicher nicht überbewerten. Wenn man sich daran satt gesehen hat, und der technische Fortschritt mit neuen Möglichkeiten kommt, werden sich auch neue Design-Trends ergeben. Trotzdem ist dieser Trend erst einmal nicht zu ignorieren – und besonders Windows 8 und Android werden die Sehgewohnheiten der User prägen. In der zunehmenden Auflösung des grafischen Userinterfaces – die mit Geräten wie google glass einhergeht – entwickelt sich Flat Design vielleicht zur Sprache des allgegenwärtigen Information-Layers.

Weiterführende Links

Pinterest-Sammlung mit Flat Designs: http://pinterest.com/warmarc/flat-ui-design/ t3n über Flat Design: http://t3n.de/news/flat-design-webdesign-trend-438941/