Modul 1 von 4
In Bearbeitung

Über das Flat Design

Flach, reduziert und mit vielen Negativräumen – so lässt sich der Designstil in dieser Masterclass zusammen fassen. Denn jetzt geht es um das Flat Design. Um zu verstehen, wie es funktioniert, hilft es, die Anfänge dieses Designstils zu kennen.

Die Wurzeln des Flat Designs

Das Flat Design ist dabei gar nicht so neu und aktuell, wie man zuerst denkt. Viel mehr ist es schon über 40 Jahren alt und hat in den 1980ern begonnen, als Computer einen immer größeren Stellenwert in unserem Leben eingenommen haben.

Pixel für Pixel waren die ersten Designelemente für Onlineanwendungen
gestaltet, wie bei diesem Classic Mac OS von 1984.

Denn diese ganz reduzierten, manchmal nur auf eine Outline oder Fläche zusammengefassten Zeichen sind entwickelt worden, um die Benutzung für die digitalen Oberflächen leichter zu machen. Und rein technisch waren die Möglichkeiten der Darstellung und damit auch die Möglichkeiten für die Designer sehr beschränkt.

Und wir alle wissen, dass es genau diese Grenzen sind, die neue Ideen und Innovationen hervorbringen.

Dem Flat Design sieht man seine Wurzeln bis heute an – es ist reduziert, auf den Punkt und lässt alles weg, was nicht zwingend nötig ist.

Der Start in das moderne Flat Designs

Das Flat Design, so wie wir es heute sehen und kennen, erlebt sein Comeback als Microsoft 2011 mit Windows 8 sein Metro Design vorstellt. Benutzeroberflächen sahen auf einmal ganz anders aus und das wiederum hatte ein ganz ungewohntes Nutzerverhalten zur Folge. (Nicht immer zur Freude der Anwender. Denn da sich die Beliebtheit dieser neuen Benutzeroberfläche arg in Grenzen hielt, ist kein Geheimnis.)

Der direkte Vergleich zwischen Windows 7 und Windows 8 zeigt, wie neu und innovativ das Flat Design war. Es wurden nicht nur einzelne Icons oder kleine Gestaltungselemente verändert. Die komplette Logik der Darstellung hatte sich verändert. Die Anwendungen wurden jetzt direkt über den Desktop ausgewählt, statt wie bisher im Menü verschachtelt zu werden. Die Icons sind stark vereinfacht und reduziert, statt mit Schatten, Verläufen und Effekten so realistisch wie möglich gezeigt zu werden. Das alles machte das Arbeiten mit dem Rechner schneller, einfacher und benötigte Ladezeit sank deutlich.

Flat Design wurde zum Trend und etablierte sich innerhalb weniger Jahre in allen kreativen Anwendungsbereichen.

  • Von Websites über Apps bis hin zu Software-Interfaces wurden die Onlineanwendungen immer “flacher”.
  • Es folgten Illustrationen, Logos und Anzeigen im neuen Look, die passend zu den Onlineanwendungen gestaltet wurden.
  • Mit Magazinen, Werbemitteln und Co. erreichte das Flat Design dann auch den Printbereich.
Kennzahlen im Flat Design für das Hamburger Forschungsinstitut DESY © Gudrun Wegener

Flat Design 2.0

Ein ganz entscheidender Faktor für den Erfolg des Flat Designs ist, dass er es dem Nutzer so leicht macht, sich in den Anwendungen zurechtzufinden. Da alles weggelassen wird, was unnötig ist und ablenkt, bleibt nur zurück, was der Nutzerführung dient.

Doch wie in allen Bereichen gibt es auch im Flat Design einen schmalen Grat zwischen dem “optimalen Design” und einer zu starken Vereinfachung. Die Nielsen Norman Group hat zu diesem Thema 2015 eine Studie erstellt und herausgefunden, dass es bei übermäßigem Flat Design zu Problemen für die Anwender kommt. Denn wenn alle Element gleich reduziert sind, woher weiß man dann, wie man diese benutzen soll? Typische Hürden waren zum Beispiel diese Fragen:

  • Ist es ein Button oder nur eine Grafik?
  • Was kann man anklicken?
  • Wie funktioniert die Hierarchie auf der Website?
  • Welche Elemente sind übergeordnet?
  • Wieso funktionieren erlernte Funktionen nicht mehr (z.B. Wort in Blau mit Unterstreichung = Link)?

Als Folge werden die Gestaltungsrichtlinien für das Flat Design heute weniger streng und hart umgesetzt. Es gibt quasi ein Flat Design 2.0, dass manchmal auch Almost Flat Design oder Semi Flat Design genannt wird.

Das heutige Flat Design 2.0 erkennt man unter anderem an:

  • Minimalen Schatten, die für ein klein wenig mehr Tiefe sorgen (wohldosiert)
  • Harte, kleine Schlagschatten (dann ohne Verläufe)
  • Leichte Texturen für mehr Räumlichkeit
  • Wichtige Elemente werden mit einer leichten Hervorhebungen räumlich betont, um es so den Nutzer leichter zu machen die wesentlichen Elemente zu erkennen

Beispiele aus aller Welt

Bei Designportalen wie behance kannst du gezielt tolle Inspirationen zum Flat Design suchen. // Screenshot März 2022