Die Evolution des Flat Designs

Flat Design 2.0
Kommentare

Heutzutage ist ein Trend zu beobachten, dass Designer im Flat Design immer häufiger auf schmückende Ornamente setzen. Eigentlich widerspricht das der ursprünglichen Idee der Designrichtung, die konsequent auf eine simple und minimalistische Gestaltung Wert legt. Haben wir es mit dem Ende des Flat Designs zu tun oder entwickelt sich der Stil nur Schritt für Schritt weiter?

Auch wenn es 2010 als etwas komplett Neues erschien: Das Flat Design war keine Revolution – trotz seines enormen Einflusses auf die visuelle Gestaltung. In der Kunstgeschichte reichen seine Ursprünge sogar bis in die 1920er nach Deutschland zurück.

Der Bauhaus-Stil wurde 1919 von Walter Gropius in Weimar gegründet und hatte eine große Wirkung auf verschiedene Richtungen in der Architektur und der Kunst. Unter anderem inspirierte der Trend eine Strömung, die als größter Einflussfaktor für das Flat Design gilt: das Swiss-Design.

Swiss Design und Minimalismus

Das Swiss Design entstand in den 1940ern und 1950ern in der Schweiz. Die Stilrichtung zeichnet sich durch rasterförmige Anordnungen, Sans-Serif-Schriftarten sowie eine klare Hierarchie zwischen Layout und Inhalt aus. Ebenfalls typisch für die Strömung war die Kombination von großen Fotografien und simpler Typografie. Und auch die heute sehr beliebte Schriftart Helvetica wurde 1957 in der Schweiz entwickelt.

14084539434_4c21e326fb_k

Type Poster in Helvetica by Graham SmithCreative Commons

Neben dem Swiss Design gibt es noch eine weitere wichtige Einflussgröße: Die Strömung des Minimalismus in der Kunst und der Architektur. Die Reduzierung auf einfache und übersichtliche Grundstrukturen ist typisch für die Kunstrichtung. Außerdem zeichnen sich minimalistische Designs durch geometrische Formen, wenige Elemente sowie helle Farben und klare Linien aus.

Der Aufstieg des Flat Designs

Die typischen Muster des Flat Designs stammen aus dem Swiss Design und Minimalismus. Was uns 2010 als visuelle Revolution erschien, war also im Grunde nicht Neues – einzig der Kontext hat sich gewandelt. Ästhetische Maßstäbe, die zuvor in der Kunst und Architektur Verwendung fanden, haben Einzug in die digitale Welt gefunden. Das Flat Design verdankt seine Popularität jedoch nicht seiner visuellen Gestaltung, sondern der zeitgleichen Entwicklung des responsiven Designs.

Das Flat Design entstand Anfang 2010 als Gegenreaktion auf das sogenannte „Rich Design„, das hauptsächlich auf schmückende Ornamente wie Schrägen, Reflektionen, Schlagschatten und Farbverläufe setzte (wie etwa Brightkite.com im Jahr 2009). Die Philosophie des Rich Design lag darin, die Bausteine für die Nutzer besonders haptisch zu gestalten, um Interaktionsmöglichkeiten klar hervorzuheben. Allerdings waren solche Elemente ungeeignet, um auf verschiedenen Geräten mit unterschiedlichen Displayauflösungen richtig dargestellt zu werden.

brightkite2009

Quelle: http://brightkite.com/ (2009)

Das Flat Design hat die visuelle Umsetzung in erster Linie effizienter gemacht. Durch die Reduzierung der Bausteine konnte nicht nur die Performance angehoben werden, sondern auch die Inhalte besser skaliert und angepasst werden.

„Designers are shifting focus to relative units and not worrying about placing singular pixels. It’s a macro game now”

Und auch die massenhafte Verbreitung hochauflösender Displays hat ihren Anteil am Erfolg des Flat Designs. Heutzutage ist es notwendig, auf gestochen scharfe Fotos zu setzen – jede Pixelunschärfe fällt den Usern mittlerweile auf. Simple Typografien und klare Formen besitzen einen klaren Vorteil gegenüber der Integration von Bildern in unterschiedlichen Auflösungen.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Charakteristische Merkmale des Flat Designs

  • Minimalismus: Minimalismus und Flat Design gehen Hand in Hand. Sie teilen das gleiche simple Designprinzip. Visuelle Elemente sind in der Regel so gestaltet, dass der Fokus der Nutzer auf den Inhalt gelenkt wird. Auch wenn weniger Bausteine die Aufmerksamkeit der User besser auf sich ziehen können, ist dennoch Vorsicht geboten: Eine falsche Umsetzung kann hier besonders viel Schaden anrichten. Wie es richtig geht, zeigt Micelistudios.com:
    minimalismus

    Quelle: http://www.micelistudios.com/

  • Dynamische Farben: Um das Fehlen visueller Effekte auszugleichen, basiert die Dynamik des Flat Design auf hellen und leuchtenden Farben. Der starke Kontrast, den sie erzeugen, verhindert, dass die Elemente einer Webseite langweilig und eintönig erscheinen. Die Verwendung lebendiger Farben ist auf die Verbreitung hochauflösender Displays zurückzuführen: Je mehr Pixel, desto mehr Farbtöne. Wie man sie richtig einsetzt, macht Helbak.com vor:
    farben

    Quelle: http://helbak.com/

  • Einfache Typografie: Die Typografie im Flat Design ist simpel und einfach zu lesen. In der Regel wird auf serifenlose Schriftarten mit gleichmäßiger Strichstärke zurückgegriffen. Inky ist hierfür ein gutes Beispiel:
    typografie

    Quelle: http://inkymail.squarespace.com/

Flat Design 2.0

Das Flat Design besitzt einen Nachteil: Leichte Skalierung und inhaltlicher Fokus können nicht darüber hinwegtäuschen, dass aufgrund des Verzichts auf Ornamente nicht immer ganz klar ist, was angeklickt werden kann und was nicht. Darunter leidet insbesondere die visuelle Hierarchie. Die Designer scheinen sich dieser Tatsache in letzter Zeit bewusst geworden zu sein und setzen wieder verstärkt auf schmückendes Beiwerk.

“Flat 2.0 is an evolution, not a revolution. Flat design is the Christmas tree, Flat 2.0 is the ornaments and candy canes”

Es handelt sich hierbei aber weniger um das Ende des Flat Designs als vielmehr um seine Weiterentwicklung. Das Flat Design 2.0 erfindet das Rad nicht neu, sondern greift auf das „alte“ Modell zurück und passt es den aktuellen Bedürfnissen und Trends an. Die ursprüngliche Version besaß nur wenige Akzentuierungen und war konsequent flach. Demgegenüber besitzt die 2.0-Variante mehr Eye-Candy-Bausteine und ist deutlich verspielter.

Aktuelle Trends im Flat Design 2.0

  • Aussagkräftige Icons: Da das Flat Design nur die essentiellsten Elemente auf dem Bildschirm darstellt, gewinnen die verwendeten Icons eine immer wichtigere Rolle. Sie werden zu festen Bestandteilen jedes Entwurfs. Im Vergleich zur ursprünglichen Version sind die Icons im Flat Design 2.0 deutlich größer geworden und zeichnen sich durch mehr Details aus – wie zum Beispiel auf Munchery.com:
    icons

    Quelle: https://munchery.com/

  • Ghost-Buttons: Der Ghost-Button schmiegt sich unauffällig in Fotos sowie Hintergründe ein und erfreut sich heutzutage insbesondere im Webdesign einer großen Beliebtheit. Ghost-Buttons sind zwar gut zu erkennen, drängen sich dem Betrachter aber nicht auf. Bundlin.com ist hierfür ein gutes Beispiel:
    ghostbutton

    Quelle: https://bundlin.com/

  • Herausstechende Typografie: Der Trend in Sachen Typografie weist im Flat Design 2.0 in eine Richtung: mehr Dramatik. Häufig setzen Designer auf Hero-Header, überdimensionierte Schriftarten und Text-Only-Webseiten. Während Hero-Header dem Flat Design einen Touch Realismus einhauchen, verpassen überdimensionierte Schriftarten dem visuellen Auftritt eine persönliche Note. In Kombination können die beiden Elemente die Aussage einer Webseite ausdrucksstark unterstreichen – Papertelevision.com demonstriert das eindrucksvoll.
heroheader

Quelle: http://www.papertelevision.com/

  • Ein Design, eine Schriftart: Mit Ausnahme der Logoschriftzüge basieren die meisten Texte im Flat Design immer öfter auf der gleichen Schriftart. Sie ist in der Regel simpel gestaltet, damit die Aufmerksamkeit der Nutzer auf den Inhalt und nicht auf die Gestaltung der einzelnen Buchstaben gelenkt wird – wie etwa beim Dropbox-Guide.
    dropbox

    Quelle: https://www.dropbox.com/guide

  • Akzentuierte Farben: Die charakteristischen Farben des Flat Designs werden wahrscheinlich nie aus der Mode kommen. Dennoch wird in letzter Zeit öfters mit gedeckten Farbpaletten experimentiert, bei denen helle Farben nur zur Akzentuierung eingesetzt werden. Leuchtende Farben vor dunklen Hintergründen machen es Designern leichter, die Aufmerksamkeit der Besucher gezielt auf bestimmte Elemente zu lenken. Eine besonders schöne Umsetzung findet sich auf Arte.tv:
    Unbenannt

    Quelle: http://infographic.arte.tv/

  • Lange Schatten: Durch lange Schattenwürfe werden Tiefe und Komplexität gestärkt – ohne den minimalistischen Ansatz gänzlich aufzugeben. In der Regel wird hierbei auf feine Schattenwürfe gesetzt.
    schatten

    © Shutterstock / Yury Velikanov

UX Matters

Doch warum kehren die Designer zurück zu verspielten Ornamenten? Der Grund hierfür liegt im Wandel vom UI- zum UX-Design. Die Erfahrungen, die Nutzer im Umgang mit einem (digitalen) Produkt machen, sind heute richtungsweisend für die visuelle Gestaltung von Elementen.

Das Flat Design war eine Reaktion auf die technischen Erneuerungen im Gerätebereich und zielte auf die Steigerung der Effizienz. Das Flat Design 2.0 hingegen richtet seinen Fokus auf die Bedürfnisse und Wünsche der Anwender, um die User Experience zu steigern.

Der Grund, warum wieder auf schmückende Beiwerk gesetzt wird, ist somit auf das Verhalten der Nutzer zurückzuführen und weniger ästhetischen Präferenzen geschuldet: Die Bedienung und Aussage visueller Bausteine müssen den Usern intuitiv verständlich sein. Das Flat Design 2.0 versucht die Schwächen seines Vorgängers zu beheben.

Fazit

Das Flat Design 2.0 stellt vermutlich noch nicht das Ende seiner „Evolution“ dar. Da heutzutage die User Experience bei Gestaltungsfragen im Vordergrund steht, ist es wahrscheinlich, dass die Stilrichtung mit immer weiteren Designmustern verschmelzen wird. Neben der Integration von Fotografien und Bilddateien ist hierbei insbesondere an Animationen und interaktive Elemente (Stichwort: Mikrointeraktionen) zu denken. Vielleicht dauert es auch nicht mehr lange, bis Flat Design und Material Design ein und dasselbe bedeuten.

Aufmacherbild: Flat design style via Shutterstock / Urheberrecht: Bloomua

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -