Flat Design

Flat Design

Copyright © Shutterstock / Tetiana Savaryn

Was ist Flat Design?

Flat Design ist nicht, wie man glauben könnte, eine Erfindung des Internetzeitalters. Flat Design ist seit den 1950er Jahren bekannt und mit der Entwicklung des International Typographic Style, oder Swiss Style, entstanden. Mit der EinfĂŒhrung der auf Geometrie und Typografie ausgerichteten Metro-Designsprache von Microsoft beim Windows Phone 2010 und im Jahr 2012 bei Windows 8 hat das minimalistische Design an PopularitĂ€t bei Webdesignern gewonnen.

In der Vergangenheit legten Webdesigner besonderen Wert darauf, Websites mit auffĂ€lligen Illustrationen, Animationen und dreidimensionalen Effekten sowie glĂ€nzenden visuellen Elementen (Stichwort Web 2.0) zu gestalten. Darauf folgte eine Verschiebung der Designschwerpunkte hin zum skeuomorphen Design, das versuchte, mit realistischen Texturen, Drop-Shadows und realen Objekteigenschaften das reale Leben auf dem Bildschirm abzubilden. Beispiele fĂŒr skeuomorphes Design sind die realitĂ€tsnahen Darstellungen bei Apples iOS BenutzeroberflĂ€chen. Schließlich fĂŒhrte das Übermaß an kĂŒnstlichen Abbildungen realer Objekte zum Flat Design, dem flachen Design, das all den kĂŒnstlichen Designtechniken eine stark vereinfachte digitale Ästhetik entgegensetzt.

Screenshot von googlewatchblog.de

Copyright © Google

Merkmale

Das flache Design ist durch das Fehlen von dreidimensionalen Effekten und glĂ€nzenden visuellen Elementen gekennzeichnet. Flat findet gewissermaßen nur in zwei Ebenen statt. Die dritte, rĂ€umliche Ebene fehlt. Flat Design zielt im Wesentlichen darauf ab, Webseiten zu straffen, den Fokus auf Inhalte zu richten, intuitivere Interaktionen anzubieten und eine schnellere und funktionellere Benutzererfahrung zu bieten. Flat Design ist ein minimalistischer Designansatz, der die Benutzerfreundlichkeit betont. Es bietet saubere, offene RĂ€ume, scharfe Kanten, helle Farben und zweidimensionale Illustrationen. Zudem ist es fĂŒr Designer einfach, die simplen kastenartigen Elemente und gitterbasierten Layouts des Flat Design fĂŒr Responsive Design zu verwenden.

Usability-Probleme bei Webseiten im F-D

Der minimalistische Designstil einer Flat Design Website fĂŒhrt oft zu einer Verschlechterung der Usability. Eines der grĂ¶ĂŸten Probleme des Design ist, dass es fĂŒr Benutzer schwierig ist, anklickbare Elemente zu erkennen. Werden beim Webdesign dreidimensionale Effekte verwendet, ergibt sich daraus eine natĂŒrlich wirkende Illusion von Tiefe. Texturen, FarbverlĂ€ufe, erhöhte Kanten und Schlagschatten lassen Objekte so aussehen, als wĂ€ren sie dreidimensional und könnten gedrĂŒckt werden. Benutzer kennen dies aus der realen Welt und erkennen interaktive Elemente daher schnell. Elemente, die entweder angeklickt werden können wie SchaltflĂ€chen und Symbole oder ausgefĂŒllt werden können wie zum Beispiel Formularfelder werden problemlos als solche erkannt.

Beim Design fehlen die signifikanten visuellen Merkmale gĂ€nzlich. Dies bedeutet, dass Besucher einer Webseite im Flat Design mehr Aufwand benötigen, um Beziehungen zwischen Objekten zu erkennen und die visuelle Hierarchie der Website zu verstehen. Auf der Seite der Designer ergibt sich das Problem, dass fĂŒr die Realisierung einer visuelle Signifikanz der Elemente einer Webseite nur Farben, Formen, NĂ€he und Kontextelementen zur VerfĂŒgung stehen.

Von einer anderen Seite aus betrachtet, kann weniger Information auch als die Abwesenheit von Ablenkungen angesehen werden. Das erleichtert es Besuchern, sich nur auf die wichtigen Inhalte einer Webseite zu konzentrieren. Wenn der Minimalismus jedoch ĂŒberwiegt, kann das primĂ€re Ziel einer Seite Informationen zu den Usern zu transportieren, leicht unter die RĂ€der geraten.

Flat 2.0 - Design in drei Dimensionen

 Schnell haben immer mehr Designer, die beim Flat Design fast unvermeidlichen MĂ€ngel im Bezug auf die Usability erkannt. In der Folge ist eine neue, ausgereiftere Version entstanden, die als Flat 2.0 oder Almost Flat bezeichnet wird. Der Designstil des Flat 2.0 ist immer noch flach, aber er fĂŒgt den EntwĂŒrfen in Form von subtilen Schatten, Glanzlichtern und Ebenen eine gewisse DreidimensionalitĂ€t hinzu. In dem bei Flat 2.0 den Objekten ein wenig Realismus (Skeuomorphismus), etwas Tiefe und ein paar mehr Details hinzufĂŒgt werden, können mit Flat 2.0 die oben genannten Usability-Probleme behoben werden. Die Vorteile des Minimalismus wie Klarheit, einfache Strukturen, eine ĂŒbersichtliche Gliederung und kĂŒrzer Ladezeiten einer Webseite bleiben jedoch erhalten.

Googles Material Design als Beispiel fĂŒr Flat 2.0

Googles neue, mit Android L im Jahr 2014 vorgestellte Designsprache Material Design ist wahrscheinlich das bemerkenswerteste Beispiel fĂŒr den Flat 2.0 Designstil. WĂ€hrend Material Design die Hauptmerkmale des flachen Designs beibehĂ€lt, liegt ein Schwerpunkt der Designsprache auf der Optimierung der Benutzerfreundlichkeit. Bei Material Design hat Google daher eine virtuelle Z-Achse hinzugefĂŒgt, um DreidimensionalitĂ€t zu schaffen. Zudem arbeitet Material Design mit Licht, Schatten, Animationen und animierten ÜbergĂ€ngen, die den Besucher einer Webseite oder den Nutzern einer App die Visualisierung von ZusammenhĂ€ngen erleichtern.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte