Corporate Design Blog

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).

Formatvergleich_16x9

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.

Flat Design: Die Uhr von Android 4

Die Uhr von Android 4:
Ohne einen ausdruckstarken Font nicht denkbar.

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.

clients_tfc-kaeufer

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ß.

"SUN" eine iPad Wetter App

„SUN“ iPad Wetter-App

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.

Flat Icon von jScrum

Ein schräger Pfeil könnte 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.

SABA 311WL (1933) und Braun SK 2 (1955)

SABA 311WL (1933) vs. Braun SK 2 (1955)

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.

Skeuomorphismus am Beispiel Wunderlist und OS X „Lion“ Adressbuch

Skeuomorphismus am Beispiel Wunderlist und OS X „Lion“ Adressbuch

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/



Pflichtfeld

freiwillige Angabe, wird veröffentlicht

Kommentare

  1. Alex

    Skeuomorphst du noch oder flattest du schon? Sehr interessant! Danke für die tolle recherche und Beleuchtung!

  2. Yogi

    Ein sehr interessanter und sehr gut recherchierter Bericht. FormFollowsFunktion hat mir persönlich immer schon gut gefallen. Oft ist dann weniger mehr 🙂

  3. Andreas

    Für nicht-Designer wie mich ein hochinteressanter Einblick in das Buzzword. Wie immer sind die Beispiele der Schlüssel zum Verständnis.

  4. Matthias Meyer

    @Andreas: Super, so wars gedacht.

  5. 3 kreative "Flat" Webdesigner | VICTORSNETZ

    […] Flat Design ist ein Gestaltungsstil bei dem Formen auf ihr Minimum reduziert werden. Frei von Texturen, Verläufen und sonstigem Schnickschnack. Auch die Typografie spielt dabei eine ausschlaggebende Rolle. Dazu habe ich auf manx.de einen tollen Beitrag entdeckt: Flat Design – Was es ist, warum es bleibt. […]

  6. Xing — Altes vs. Neues Profil-Design | webpixelkonsum

    […] Anmeldung und Rundgang für das neue Profil-Design von Xing | Stand: 20.7.2013 [2] Flat Design – was es ist, warum es bleibt | Stand: 20.7.2013 [3] Neues Profil-Design von Xing — Beispiel Angestellte | Stand: 20.7.2013 […]

  7. Webdesign-Trend Flat Design | Magronet - Online Marketing - SEO - Webdesign

    […] Viele weitere spannende Details dazu gibt es bei manx.de. […]

  8. Die 5 wichtigsten Webdesign Trends 2013 / 2014 | Skydreamsong

    […] FlatDesign: bjoerntantau – FlatDesign sieht gut aus verbessert das Marketing t3n – Jakob Nielsen über FlatDesign Manx – FlatDesign Was es ist und warum es bleibt […]

  9. DerWiener

    Skeuomorphismus macht sogar ein misslungenes Design noch ansehnlich.
    Bei Flatdesign kommen nur wirklich hervorragende Sujet gut rüber, der Rest wirkt flach, flau, fad!
    Mit iOS7 schaut ein 900Euro iPad aus wie ein Kindercomputer von Fisher Price.
    Schöne neue Welt!

  10. Matthias Meyer

    @DerWiener: Sehr guter Kommentar! Gutes Design wird nicht gerade einfacher, wenn es flat sein soll. Aber der Versuch ein einfallsloses Design mit einem Mahagoni-Hintergrund irgendwie fesch aussehen zu lassen, hat das skeuomorphische Fass wohl zum Überlaufen gebracht. Durch grafische Tricks daran zu erinnern, dass man interaktive Elemente auch bedienen kann, war natürlich keine schlechte Idee. Ich persönlich weine dem “Filofax”-Look von iCal aber keine Träne nach. Schade natürlich, dass man jetzt auf Fisher Price Niveau hängen geblieben ist.

  11. Sascha

    Ich finde dieses designtrend grässlich. Auf mich wirkt das wie ein Rückschritt in die computeranfänge. Ios7 ist in meinen Augen das hässlichste was Apple jemals fabriziert hat. Zu grell, zu wenig Details, lieblos. Macht weniger Freude. Es funktioniert ja, aber es Giftmischer nicht das Gefühl von Wärme und des genutzt werden wollens. Wir haben heute Möglichkeiten ohne Ende, aber wir programmieren wie in den 80gern Platt nur weil alle irgend einem Trend hinterherlaufen. Ich habe mein ipad deswegen dicht geupdated nachdem ich auf den iPhone zu entsetzt war wie billig das geworden ist. Ich bin ein Fan von Form follows Funktion, aber es muss auch so sein das man es gerne nutzt. Es muss leben! Und genau das tut flat nicht, flat ist tot und kalt.

  12. Jens

    Wenn das mit den Digital Natives so weitergeht, muss man in ein paar Jahren die Gegenstände „in der Welt“ nach dem (noch immer flat?) Design des Webs gestalten, damit sich unsere inder darin noch zurecht finden. Das heiß dann „Flatomorphismus“ und ich bin jetzt schon gespannt, was der „Back“-Button – verzeihung, das „Back“-Ikon bei einer Kaffemaschine dann für einen Vorgang auslöst.

  13. Holger

    Flat-Design ist in meinen Augen „nicht“ benutzerfreundlich und dem Menschen unwürdig! Der Mensch nimmt den lieben langen Tag in 3D seine Umwelt war. Im Computerzeitalter der letzten Jahre war es „der Renner“ schlechthin. Die Orientierung der menschlichen Augen verlässt sich nun einmal auf 3D und kann viel schneller reagieren.

    2D (oder Flat-Design) mag für die technischen Verhältnisse (wie z.B. Geschwindigkeit durch weniger Rechenleistung) in Ordnung sein, für das menschliche Auge und das menschliche Gehirn ist es ein Graus.

    Das weiß jeder, der mal versucht hat mit einem Auge Auto zu fahren!

    Abgesehen davon wird sich die technische Seite in den nächsten Jahren durch schnellere Bandbreiten, Prozessoren und Grafikeinheiten dermaßen beschleunigen, dass auch 3D auf allen Geräten funktionieren wird.

    Über Geschmack lässt sich bekanntlich streiten. Mir scheint aber so, dass der Geschmack sich derzeit eher an den technischen Möglichkeiten orientiert, als an Benutzerfreundlichkeit oder dem was ein menschliches Gehirn erwartet.

    Vielleicht ist mein Gehirn auch einfach nur vor ein paar Jahren/Jahrzehnten hängen geblieben und die modernen Gehirne ticken anders. Kann auch sein 🙂

    Fazit: Flat-Design ist nix für meine „menschliche“ Wahrnehmung.

  14. Matthias Meyer

    @Holger: Super Kommentar. Dir geht Flat Design anscheinend richtig gegen den Strich. Und natürlich stimmt es, dass unsere Wahrnehmung auf eine dreidimensionale Welt ausgerichtet ist. Dieser „Veranlagung“ werden die zukünftigen Entwicklungen in Richtung Augmented Reality sicher entgegenkommen, als Interface im realen Raum.
    Die Frage ist nur, ob es Sinn macht Dreidimensionalität in 2D nachzubilden oder ob sich das – mit ein bisschen medialer Erfahrung – wie eine plumpe Metapher anfühlt. Ein bisschen so, wie die Mauszeiger, die man in den 90ern häufig auf Drucksachen fand um auf die Website hinzuweisen – vielleicht erinnerst du dich.
    Ich glaube die Entwicklung bleibt zum Glück wirklich unberechenbar. Vielleicht wird das Flat Design seine Stärken auch vor allem im Design von Software ausspielen aber in der Corporate-Communication eine reine Modeerscheinung werden.

  15. Tom

    großes Kompliment für diesen hervorragenden Artikel

  16. Rafael

    Witzig, dass in den Kommentaren die Kritiker des Flat Designs zu Wort kommen. Aber auch aus Usability Sicht is bzw. war Flat Design eine Katastrophe. Hübsch anzusehen aber kaum bedienbar. Mehr darüber in meinem (zugegeben sehr kritischen) Artikel über Flat Design:
    https://kopfundstift.de/flat-design-webdesign-trends-unter-der-lupe/
    Viele Grüße!