Flat Design ist nur ein Webdesign Trend - ähnlich dem Metro Design

Flat Design: Webdesign Trends unter der Lupe

Flat Design ist sicherlich nicht der neueste Webdesign Trend. Als ich 2011 an ein paar Kampagnen für das neue Windows Phone arbeitete, kam ich das erste Mal in Kontakt mit diesem Flat Design. Microsoft nannte es allerdings Metro Design. Wenn man jedoch von der Kachelgestaltung absah, war es die Geburtsstunde des Flat Designs.

Während viele Jahre das skeuomorphistische Webdesign eigentlich alle Websiten prägte, kam mit dem Metro Design eine Gegenbewegung auf. Waren wir vom Skeuomorphismus Verläufe, Schlagschatten und einiges an Eye-Candy gewöhnt, bestand das Metro Design komplett aus einfarbigen, geometrischen Flächen und Icons. Als Gestaltungsmittel nutzte man Schrift, Farben und die Komposition. Einfach, minimalistisch – weniger ist mehr.

Dabei ist dieser Ausbruch von Microsoft aus der „Apple“-isierten Welt verständlich. Man wollte mit dem Windows Phone nochmal versuchen, sich im Smartphone Bereich zu etablieren. Den Microsoftentwicklern musste klar gewesen sein, dass sie dies nur durch eine Innovation erreichen konnten. Sie kehrten dem skeuomorphistischen Webdesign den Rücken zu. Flat Design kann hier als Gegenpol gesehen werden.

Später erstrahlte dann auch Windows 8 im Metro oder auch Flat Design. Nachdem es nun bei Apple aber auch generell im Web den absoluten Effekte-Schlagschatten-Eye Candy Overkill gab, entspannte und begeisterte das Flat Design.

Metro Design

Das Metro Design zeichnet sich durch die Kacheldarstellung aus.

Apple veröffentlichte das iOS7 im Flat Design und auch Google bzw. Android bedienen mit dem Material Design oder „Nearly Flat Design“ eine Unterkategorie des Flat Designs.

Was macht Flat Design aus?

In meinem Designstudium habe ich sehr oft die Worte „Weniger ist mehr“ und „form follows function“ gehört. Diese Zitate treffen das Flat Design relativ gut, wenn das Flat Design auch nicht ganz konsequent reduziert ist. Gestaltet wird jetzt nicht mehr mit Schlagschatten, Konturen, Glanz oder halbtransparenten Reflektions-Spielereien. Während für echte Designer auch in skeuomorphistischen Zeiten schon der Farbverlauf der größte Feind war, drangen jetzt reduzierte Gestaltungsmethoden in den Webdesigner Mainstream ein. Was gerade noch der letzte Schrei war, ist jetzt total verpönt und vom letzten Jahr.

Es gibt keine Schnörkel oder wie Adolf Loos sagen würde: Tod dem Ornament – der sinnfreien Dekoration. Das Flat Design scheint sich auf Funktionalität zu konzentrieren. Das Webdesign ist also scheinbar Usability und funktionsorientiert und sollte den User führen.

Durch die Erfindung der Web-Fonts können jetzt auch Schriften systemunabhängig in Websiten eingebunden werden. Dies nutzt das Flat Design und versucht Gestaltung über Typographie, geometrische (meist eckige) Objekte und Elemente, Farben und die Komposition bzw. den Weißraum zu erreichen.

Da beim Flat Design Verläufe und Effekte zur Benutzerführung fehlen, müssen die User von Flat Design neues Verhalten erlernen. Buttons haben im straighten Flat Design eben kein Verlauf mehr – die Handlungsaufforderung an den Nutzer sollte sich im Flat Design aus Position, Größe und Farbe des Interaktionselementes ergeben.

Dies stellt natürlich deutlich mehr Anforderungen an den Webdesigner und/oder Interfacedesigner. Am Flat Design trennt sich die Spreu vom Weizen, da für die minimale Gestaltung ein erhöhtes gestalterisches Können notwendig ist. Sonst wird Flat Design ganz schnell zum Ugly Design.

Zusammenfassend hier nochmal die wichtigsten Gestaltungsmerkmale von Flat Design:

  • Verzicht auf Texturen
  • flache Elemente ohne Schatten
  • Einfache, übersichtliche Elemente
  • Gestaltung durch Typographie
  • Userführung durch Farbe und Größe von Bedienelementen eines Interfaces
  • Fokus liegt auf Usability bzw. der einfachen Bedienbarkeit
  • Allgemeiner Minimalismus
Flat Design Beispiel iOS7

Flat Design beim iOS7.

Flat Design – die Entwicklung eines Webdesign Trends

Wie konnte Flat Design entstehen? In meiner Masterarbeit habe ich mich vor ein paar Jahren mit den Designströmungen in der Geschichte beschäftigt. Witzigerweise ist auch beim Flat Design bzw. beim skeuomorphistischen Design der rote Faden der Designströmungen zu erkennen.

Zu jeder Designströmung bzw. Gestaltung gibt es immer eine Gegenbewegung, die sich nach einiger Zeit aus einer bestimmten Designströmung heraus entwickelt. Nachdem eben nun beim Skeuomorphismus nun die Effekte und die technischen Möglichkeiten der Darstellung völlig ausgereizt wurden und bald jede Website gleich aussah, entwickelte sich der Wunsch nach einem anderen Reiz für’s Userauge.

Flat Design kann also als Gegenströmung zum Skeuomorphismus betrachtet werden. Das Besondere an dieser Designströmung ist, dass aus einer Bewegung (Skeuomorphismus) und einer Gegenbewegung (Flat Design) wieder eine neue Bewegung (Material Design?) entsteht. Flat Design erinnert mich von der Theorie aber auch von der Ästhetik an die HFG Ulm und die daraus resultierenden Produkte (Dieter Rams, etc.).

Das bedeutet, die komplette Abwendung von Verläufen und Schatten ist nur ein Webdesign Trend. Wenn es besser ist (zum Beispiel aus Usability Sicht) ein Verlauf zu benutzen (um beispielweise) einen Button zu kennzeichnen, dann sollte der Verlauf aufgrund der Usability benutzt werden.

Flat Design vs Skeuomorphismus

Am Anfang des Flat Designs wurden lustig alle Buttons und Bedienelemente flach gestaltet – eben Flat Design! Allerdings hat sich mit der Zeit herausgestellt, dass sich so eben die Buttons nicht mehr oder schwerer vom Rest des Interfaces abheben. Der Nutzer hat in der Vergangenheit gelernt, dass Buttons Verläufe haben und meist noch einen Schatten. Der Nutzer hat aus unzähligen Erfahrungen mit anderen Websites in der Vergangenheit gelernt, dass Links unterstrichen sind und dass bestimmte Elemente ein bestimmtes Interaktionsverhalten haben.

skeuomorphistic design

Ein typisches Beispiel für Skeuomorphismus im Webdesign.

Sicherlich ist die Abwendung vom Skeuomorphismus (zumindest zum Teil) richtig. Viele skeuomorphistische Ikonen sind jüngeren Benutzern heute nicht mehr bekannt. Zum Beispiel die Diskette als Speichersymbol. Kein 15Jähriger hatte jemals in seinem Leben eine echte Diskette gesehen. Unsere Teenager kennt diese Diskette wahrscheinlich wirklich nur noch als Symbol aus dem Word.

Allerdings ist „Flateritis“, die sich seit dem Design Trend Flat Design ausgebreitet hat mit Vorsicht zu genießen. Buttons und Bedienelemente sollten sich durch die Gestaltung von unwichtigeren Elementen abheben. Eine Bedeutungspriorität einzelner Interface Elemente sollte sich durch die Gestaltung dem User prägnant und eindeutig kommunizieren. Hier ist die Frage, wie dies mit nur flachen und minimalistischen Elementen kommuniziert werden soll, auf einer Website die mehr als 3 Interaktionsmöglichkeiten auf einer Webseite enthält.

Ein Vorteil an Flat Design ist natürlich, dass es schlechtes Design schneller enttarnt. Es gibt nicht mehr so viele Möglichkeiten, neue, der Funktion entgegen gerichtete Deko-Elemente im Design zu verstecken.

Flat Design Nachfolger?!

Als Nachfolger kann das „Nearly Flat Design“ oder auch das von Google geprägte Material Design gesehen werden. Diese Entwicklung (das Flat Design zu relativieren) ist eine gute Entwicklung. Im Gekreische um den Minimalismus und die Besinnung auf die Form wurde die (eigentlich im Vordergrund stehende) Funktion manchmal beim Flat Design Trend vergessen.

Ich persönlich halte nichts von der strikten Einhaltung von irgendwelchen Webdesign Trends. Man sollte sich jeden Design Trend kritisch anschauen und entscheiden, welche Gestaltungsmerkmale man eventuell verwenden kann um die eigene Gestaltung zu verbessern.

Witzig bei dem Skeuomorphismus bzw. dem Flat Design Trend, fand ich die Reaktion von Webdesigner Kollegen auf die Trends. War gestern noch jedes Element mit mindestens 5 Effekten verziert, wurde am nächsten Tag alles flach gestaltet. Die Verläufe und Schatten waren von heute auf morgen komplett vergessen. Ja sogar verpönt – wenn man dann mal einen dezenten Schatten nutzen wollte –iiiiih! Schatten – das geht ja gar nicht!

Diese kleine Geschichte soll verdeutlichen, dass der Mittelweg meist der nachhaltigste Gestaltungsweg ist.

Was ist eure Meinung zum Flat Design?

[Gesamt:7    Durchschnitt: 5/5]
0 Antworten

Hinterlasse einen Kommentar :)

Wollst du an der Diskussion teilnehmen?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.