Die Flat 2.0 Evolution – Flat Design einen Schritt weiter gedacht

Unkategorisiert

Flat 2.0 – Flat Design einen Schritt weiter gedacht

Mit dem Windows Phone 7 wurde Flat Design 2010 (neu-)geboren und etablierte sich auf kleinen wie großen Bildschirmen schnell zum Webdesign Trend schlechthin. Noch heute dominiert das minimalistisch anmutende Gestaltungskonzept mit grellen Farben, Ghost Buttons und überwiegend serifenlosen Flat Fonts das Netz. Wenn nicht das Gesamtkonzept so sind wenigstens einige wenige flat Elemente unter Designern gern verwendetes Motiv.

Seit seinem Debüt 2010 hat Flat Design sich weiterentwickelt. Einst als Gegenentwurf zum Skeuomorphismus gedacht, der die Einfachheit geradezu auf die Spitze treibt, bedeutet der nächste Schritt für Flat Design nunmehr einen Schritt zurück. Oder anders gesagt: Flat 2.0 (auch als Almost Flat oder Semi Flat bekannt) ist erwachsen genug aus der anfänglichen Radikalität und Rebellion zu lernen und einzugestehen, dass subtile Tiefe eine noch bessere Lösung sein kann.

flat vs flat 2 0

Gegenüberstellung Flat Design und Flat 2.0 bei Dapper Gentlemen (Screenshot).

Flat, flatter, almost flat

Almost Flat ist im Grunde nichts Neues oder Innovatives. Vielmehr ist es als Entwicklung zu verstehen, die sich aus Unzulänglichkeiten im Design ergab. Almost Flat Design stellt eine Reaktion auf den “extremen Minimalismus” dar, der einerseits auf Usability Ebene zu vielen Problemen führte und andererseits Gefahr lief, allmählich langweilig zu werden.

Der Kerngedanke im Flat

Weg vom Überfrachteten, Kitschigen hin zum Aufgeräumten, zu Klarheit und Fokus. Diese Entdeckung der Schlichtheit findet sich nicht nur im Flat bzw. Minimalistischen Webdesign. Verzicht ist hip geworden: Konsumverweigerung, Entrümpelung, Befreiung durch das Weniger ist Mehr dominieren unsere Gesellschaft zu großen Teilen. Den Trend der Einfachheit sieht man nicht nur auf den Bildschirmen, sondern ebenso auf Laufstegen, in den Schaufenstern von Einrichtungsläden oder in Form von Projektmanagementsystemen – siehe Scrum: „Simplicity – the art of maximizing the amount of work not done – is essential.“ als eines der Prinzipien im Agil Manifesto.

minimalismus aera

Die (Wieder-)Entdeckung der Schlichtheit. Nicht nur Phänomen im Webdesign.

Nachteile der Flachheit

Das Risiko, dass Webdesign an Spaß verliert und langweilig oder austauschbar wirkt, nimmt durch diese Art von Minimalismus und Verzicht stark zu. Denn die Beliebtheit des Gestaltungsstils und seiner Handvoll Fonts und filigranen Flat Icons, die besonders gern verwendet werden, nehmen Webseiten den Raum für Individualität. Es ist wie bei selbstgebauten Betten aus Europaletten, die zu Anfang noch Kreativität, Purismus und Individualität symbolisierten, heute jedoch in gefühlt jedem dritten Schlafzimmer einer Großstadt zur mainstreamigen und wenig inspirierenden Einheitseinrichtung geworden sind.

Die absolute Flachheit verliert aber nicht nur an Reiz, sie führt zugleich auch dazu, dass wir nicht mehr wahrnehmen, mit welchen Elementen wir “interagieren” können. Es ist, als stünde man vor einem Regal, dessen Schubladen, Schranktüren und Dekor-Elemente wohlsortiert und optisch ansprechend erscheinen. Aber es ist schwer, die Kanten auszumachen und unklar, welche Elemente sich öffnen lassen.

Die Art der “Usability-Falle” äußert sich im Flat Webdesign mit der Problematik für User, klickbare Elemente zu erkennen: Vor der flat revolution waren User daran gewöhnt, bestimmte visuelle Signale – wie etwa blaue unterstrichene Links oder 3D-Buttons – als anklickbar wahrzunehmen. Mit der flachen Ära fallen Verläufe, Texturen, deutliche Kanten, Schlagschatten und derlei visuelle Effekte, die Klickbarkeit andeuten und die natürliche Illusion von Tiefe schafften, einfach weg. Am Ende ist es jedoch so: Sobald Besucher sich nicht einfach und intuitiv durch eine Seite oder Oberfläche navigieren können, versagt das Design. Leider lässt sich die Prioritätensetzung – alles für den Minimalismus ungeachtet der Userunfreundlichkeit – im Flat häufig beobachten.

Das Problem der unkenntlichen Klickbarkeit am Beispiel von Seclgroup

Auf der Seclgroup Website bringt das Flat Design das Viel an Informationen in Szene, ohne dass es überladen wirkt und die Seite insgesamt gut strukturiert daherkommt. Allerdings herrscht Verwirrung darüber, welche Elemente anklickbar sind: Während einige Einheiten als klickbare Elemente herausstechen, wird dies an vielerlei anderen Stellen nur deutlich, wenn man mit der Maus über das entsprechende Element hovert. Gerade mit Blick auf Touch Screens ist das ein großes Problem.

Die nicht vorhandene Dreidimensionalität, das Fehlen der z-Achse im Flat trüben die Website-Erfahrungen, weil es mehr Mühe erfordert die visuelle Hierarchie zu durchschauen und die Zusammenhänge zwischen Objekten auf der Seite zu verstehen. Mehr und mehr reagieren Designer in den vergangenen Jahren auf diese Mangelerscheinungen – die Evolution zum Falt 2.0 nimmt ihren Lauf.

Semi Flat aka die Entdeckung subtiler Tiefe

Semi Flat Design nimmt den Pfad in Richtung Realismus wieder auf. Der Stil ist nach wie vor flach, aber Designer bringen nun doch etwas mehr Textur, Highlights, Schatten und ein wenig Dreidimensionalität ins Spiel. Intelligent umgesetzt kann Flat 2.0 so mehr Leben in eine Seite bringen und den User zufriedenstellen, ohne dabei die Vorteile des Minimalismus-Gedankens (etwa Klarheit, Leichtigkeit, schnelle Ladezeiten) zu verlieren. Man könnte es auch beschreiben als den smarten Kompromiss zwischen Funktionalität, Ästhetik und Usability. Beispiel für Flat 2.0 ist im Übrigen Material Design.

Merkmale im Flat 2.0

Subtile Aufforderung
dezente Schatten, Highlights und Verläufe
Schnittstellen halten weiter an den Flat Design Prinzipien grelle Farben, keine Schlagschatten und Verwendung von Farben als zur Handlung ermutigendes Element fest
Buttons werden in der Textur leicht angehoben
Tiefe wird genutzt, um Schnittstellen verständlich zu machen
höchst userfreundlicher Stil, der optisch anspricht

Gelungenes Flat 2.0 am Beispiel von Lander

Lander illustriert die innovative Umsetzung einer Flat 2.0 Variation mit den markanten grafischen Elementen besonders deutlich. Während insgesamt ein blockartiges Konzept erkennbar ist, wird die Aufmerksamkeit auf die Details am Grund der Seite gelenkt. Diese heben sich durch Schattierungen, herausgenommene Grellheit und “Radierungen” von der blauen Ebene ab.