Flat Design: Individuelle Illustration und Farben

Zu Deutsch bedeutet Flat Design „Flaches Design“ und bezeichnet damit einen Design-Stil für funktionale Benutzeroberflächen. Dabei werden in erster Linie einfache, zweidimensionale Elemente sowie helle Farben angewendet. 

Oft wird es als Gegenteil von Skeuomorphismus bezeichnet, wo in erster Linie durch die Kopie realer Eigenschaften die dreidimensionale Illusion auf zweidimensionalen Displays und Bildschirmen erzeugt wird. 

Flat Design ist an sich keine neue Erfindung. Jedoch wurde die vereinfachte Designsprache 2010 durch das Windows Phone 7 so richtig bekannt. Später folgte Windows 8 sowie Apple iOS 7 und Googles Material-Design. 

Vor iOS 7 prägten Leder-Kalender, realistische Bücherregale oder dreidimensionale Buttons die Benutzeroberfläche. Seit 2013 ist damit aber Schluss. Nun folgt auch Apple getreu dem Motto „weniger ist mehr“ und verwendet einfache Symbole und weniger „fotorealistische“ App-Icons.

Auch Microsoft setzte den vereinfachten Grafikstil 2010 erstmals im Windows Phone 7 ein. 2012 folgte auch schon das Betriebssystem Windows 8 in simplem, flachem Design.

Es dauerte nicht lange, als auch Google die Vorteile des Flat Designs erkannte. Um die Performance und Usability zu steigern, bekamen sowohl die Website als auch das Logo einen neuen Anstrich im flachen Design.

Flat Design ist ein Grafikstil, der sich auf das Simpelste konzentriert und allen möglichen Schnick-Schnack weglässt. Besonders charakterisiert wird das Flat Design durch:

• den Verzicht von Texturen & Verzierungen
• großes Augenmerk auf die Typografie
• ausgeprägtes Spiel von Formen und Farben

Durch die reduzierte Darstellung werden komplexe Objekte wesentlich einfacher dargestellt. Zudem ist das gesamte Erscheinungsbild übersichtlicher, da große Schriften und Symbole verwendet werden.

Hinzukommt aufgrund schnellerer Ladezeiten die vereinfachte Nutzung auf mobilen Endgeräten. Die vielfältigen Farbwelten sorgen dafür, dass das Design lebendig und seriös erscheint. Zu guter Letzt erfreut sich das Flat Design einer einfachen Usability, weil es aufgrund seiner breiten Nutzung vieler namhafter Global Player immer am aktuellsten Stand ist.

Während es beim Skeuomorphismus darum ging, Websites möglichst naturgetreu darzustellen, steht beim Flat Design die Einfachheit im Mittelpunkt. Statt 3D-Elementen, Lichteffekten sowie plastisch dargestellten Schaltflächen kommen klare Linien, gut lesbare Schriften mit elegantem Verlauf sowie typische Flat Design Farben zum Einsatz. 

Das minimalistische Design ist charakteristisch. Deshalb kommen auch überwiegend einfache und serifenlose Schriftarten zum Einsatz. Die Schrifttypen werden unterschiedlich formatiert, wodurch die User die Bedienung der einzelnen Elemente vereinfacht erkennen.

Ein weiterer wesentlicher Bestandteil des Flat Designs sind helle Farbpaletten mit mehreren Farbtönen. Üblicherweise werden nur bis zu drei unterschiedliche Farben genutzt. Bei Websites im Flat Design kommen hingegen sechs bis acht verschiedene Farben zum Einsatz. Zu den beliebtesten Flat Design Farben gehören Retro-Farben, Orange, Violett, Grün, Türkis und Blau.

• Die Schriftarten sind frei wählbar (Webfonts)
• Kein Qualitätsverlust bei der Gestaltung der Icons, da die Vektoren in jedem Browser skaliert werden können
• Auf Hintergrundbilder oder -texturen wird verzichtet
• Einfache Strukturen durch farbige Flächen und Schaltflächen
• Intuitives Navigieren durch klare Übersicht 
• Fokus auf Inhalte, nicht auf Design
• Keine kleinteiligen Layouts mit zu vielen Bildern

Flat Design wird häufig bei One-Pager-Websites angewendet, bei denen sich alle wesentlichen Informationen auf einer einzigen Seite befinden. Auch Websites im Supersized Format sind Teil der Flat Design Illustration, da hier eine große Grafik und eine zugehörige Aussage im Mittelpunkt stehen.

Trotz der überwiegenden Vorteile gibt es auch Kritik, die wir nicht vorenthalten wollen. Viele behaupten, dass Flat Design lediglich ein Trend ist, dem zahlreiche Designer und Entwickler nachgehen, um den Anforderungen heutiger Websites gerecht zu werden. Diese Behauptung ist zum Teil gerechtfertigt, da Flat Design Illustration tatsächlich nicht immer so sinnvoll eingesetzt wird wie bei Apple oder Microsoft. 

Außerdem wird Flat Design oft mit Responsive Design in Verbindung gebracht. Demnach sollen beide in Kombination für einen starken Einheitslook verantwortlich sein, worauf zahlreiche Flat-Layouts verstärkt Defizite in den Bereichen UX sowie Usability aufwiesen. 

Das flache und minimalistisch gehaltene Design ermöglicht dem User, sich rein auf den Inhalt zu fokussieren. Das Design rückt dabei in den Hintergrund und vermittelt auf den ersten Blick reine Benutzerfreundlichkeit. Die klare visuelle Hierarchie der Formen, Farben und Schriften unterstützt eine intuitive Navigation sowohl in der Desktop- als auch in der mobilen Anwendung. 

Im Gegenzug dazu kommt es häufig dazu, dass der flache Designstil die Benutzerfreundlichkeit dahingehend beeinträchtigt, dass die User den Überblick verlieren, was anklickbar ist und was nicht. Zudem verzichtet man in manchen Fällen auf wichtige Informationen für den User, um das einfache Design beizubehalten. 

Immer öfter taucht die Kritik auf, dass die einfache Ästhetik in den Vordergrund rückt, weshalb auf wesentliche Funktionen und Interaktionsmöglichkeiten verzichtet wird. 

So weisen manche Experten explizit darauf hin, dass ein extremes Flat Design für einen Onlineshop sogar zu geringeren Conversion Rates führen könnte. Dabei können sich die Conversion-Elemente nicht mehr eindeutig abheben und werden in weiterer Folge von Usern nicht mehr als Interaktionsmöglichkeiten wahrgenommen. 

Jedoch hat man auf diese Punkte reagiert und das ursprüngliche Flat Design in Form von Flat 2.0 bzw. Almost Flat weiterentwickelt. Dabei kommen bei Googles Material-Design wieder leichte Formen, Schatten, Glanzlichter sowie Strukturen zum Einsatz. Diese deuten zwar in abgeschwächter Form auf eine Dreidimensionalität hin, verbessern jedoch die Benutzerfreundlichkeit enorm.

Obwohl sich beide Begriffe sehr nahestehen, meinen sie nicht exakt dasselbe. Websites im Responsive Design können sich mühelos an die verschiedenen Browser sowie Endgeräte anpassen. Das bedeutet, dass Websites auf einem Smartphone-Monitor genau gleich dargestellt und bedient werden können, wie z.B. auf einem 24 Zoll Monitor. 

Zwar ist Responsive Design auch oft zweidimensional, also flach gestaltet, jedoch ist Flat Design nicht immer im Responsive Design konzipiert. Allerdings verringert das flache Design die Ladezeiten und ist deshalb auf verschiedenen Ebenen flexibler anpassbar. Angesichts dessen ist es in vielen Fällen Bestandteil des Responsive Designs.

Vergleicht man eine gute Website im Flat Design mit einer mit unzähligen Bildern überladenen Seite, ist die Variante mit flachem Design eine wahre Entspannungskur. Verpixelte Buttons, bunte Farben sowie unzählige Karteireiter wirken nicht nur verwirrend, sondern erwecken oft auch einen unstrukturierten Eindruck. 

Flat Design sollte nicht als Trend betrachtet werden, sondern „als sich stetig weiterentwickelndes Prinzip“ – so der Designer Hakan Tanriverdi. Googles Material-Design macht den ersten Schritt und bedient sich einfacher Elemente wie leichten Schatten oder Glanzlichter, ohne dabei den typischen 3D-Effekt zu fokussieren. 

Und auch abseits des Webdesigns hat sich das Flat Design weiterentwickelt und fest etabliert. Grafiken, Icons und auch Videoproduktionen orientieren sich an der flachen Gestaltung – aufgrund der großen Beliebtheit und der einfachen Umsetzung von Corporate-Design-Vorgaben innerhalb von Unternehmen.

Zusammenfassend kann gesagt werden, dass der flache Grafikstil eine Überladung mit überflüssigen Elementen verhindert. Damit wird eine einfache Nutzung von Webseiten und grafischen Medien gefördert. Außerdem werden Informationen zielgerichtet an den Konsumenten weitergegeben und das Verständnis erhöht. Und objektiv betrachtet sieht Flat Design wesentlich ordentlicher aus als in sich verlaufenden Elemente.