Die schlichte Eleganz im Netz – Flat Design

Oh ja, die digitale Welt ist eine Scheibe – eine Mattscheibe. Ob Websites, Programme, Apps oder Konsolenspiele. die meisten technischen Highlights konsumieren wir auf einem Bildschirm. Und das, obwohl unser reales Leben nicht zwei- sondern dreidimensional ist. Vielleicht ist das der Grund dafür, dass seit dem Start des Internets die Designer und Programmierer einen Wettlauf um die opulenteste und vor allem um eine super-naturalistische Darstellung begonnen haben.

Eine unerschöpfliche Farbenvielfalt, Schlagschatten und sogar die Nachahmung realistischer Texturen wie Leder, Holz oder Glas sind heute auf etlichen Websites und in vielen Programmen zu sehen. Doch auf jeden Trend folgt ein Gegentrend. Und der heißt in diesem Fall Flat Design.

Flat Design – eine Dimension weniger

Der Begriff beschreibt in erster Linie eine Gegenbewegung zum so genannten Skeuomorphismus, also dem Versuch, Dinge so naturalistisch wie nur möglich zu imitieren. Jetzt soll wieder alles flach und zweidimensional werden. Klare Linien, schlicht-elegante Schriften und wenige, aber dafür satte Farben bestimmen den neuen Trend unter den Gestaltern. Google macht es uns seit langem vor, Microsoft hat es mit Windows 8 für sich entdeckt und Apple zieht mit seinem neuen iOS 7 nach.

Windows 8
Windows 8 ist schon im Flat Design gestaltet worden. Microsoft geht deht damit den anderen Betriebssystemen einen Schritt voraus. Screenshot: Windows 8 Desktop

Und in der Praxis?

Tatsache ist, dass Flat Design zu einem unaufhaltsamen Trend bei der Gestaltung von  Internetseiten und anderen Benutzeroberflächen geworden ist. Betrachtet man zum Beispiel die Solar-Wetter-App, so ist ihr Vorteil sicherlich nicht die genauere Vorhersage von Sonne Wind und Regen, sondern ihr schlichtes, übersichtliches Design. Die wichtigsten Informationen sind auf einen Blick erfassbar und die Navigation ist intuitiv. Fährt man mit dem Finger über das Display nach oben, dreht sich der Zeiger der Uhr und man kann die Vorhersage zur gewünschten Tageszeit ablesen. Geht der Finger nach unten, erscheint das Menü mit der Prognose für die kommenden drei Tage.

Flat Design vs. Skeuomorphismus
Zwei Wetter-Apps im Vergleich. Links die Solar App im klaren schlichten Design, rechts Apple mit Wolken- und Mondimitationen. Bild: checkdomain.de

Fassen wir also noch einmal zusammen, was uns unter dem Label Flat Design in naher Zukunft erwarten wird:

  • Keine Schattierungen, um Vorder- und Hintergrund zu trennen, sondern eine Bekenntnis zum flachen Bildschirm.
  • Keine Vortäuschung von Plastizität im Layout mit dreidimensionalen Buttons oder Ähnlichem – auch hier soll es nur Höhe und Breite geben.
  • Keine Texturen zur Nachahmung von Materialien.
  • Einfache, kräftige Farben zur Abgrenzung verschiedener Inhalte.
  • Schlichte Schriften mit klaren Konturen.
  • Einfache, aussagekräftige Illustrationen oder Bilder.
  • Strikte Trennung von Content und Navigation oder harmonische Verschmelzung der beiden.

Trotzdem schön

Wer nun befürchtet, Flat Design sei langweilig und orientiere sich zu streng an formalen Vorschriften, der wird sicherlich erstaunt sein, wenn er sich im Internet umschaut. Da geht es durchaus kreativ und überraschend zur Sache, auch oder gerade wenn im Flat Design gestaltet wird. Die Reduktion in der Gestaltung führt wieder zu neuen Lösungsansätzen, was zum Beispiel die Navigation auf einer Website angeht. Sie trat bisher meistens mit dem eigentlichen Content in Konkurrenz. Das Flat Design bietet hierzu viele Alternativen. Anbei ein paar Beispiele für gelungene flache Gestaltung.

Riesig

Bei sogenannten Supersized Websites steht meist eine klare Bildbotschaft im Mittelpunkt des Auftritts. Der Text fügt sich präsent genug, aber nicht störend an oder in die seitenfüllenden Fotos beziehungsweise Illustrationen. Die Navigation erhält ihren eigenen und unaufdringlichen Platz.

Supersized Websites
Supersized Websites bestechen meist mit durch großformatige und edle Bildmotive. Screenshot: http://www.84paris.com/

Einseitig

Ein anderer Lösungsansatz sind die sogenannten One-Pager, Websites, die komplett ohne Unterseiten auskommen, weil alle Informationen auf einer Ebene liegen. Diese Fläche kann entweder horizontal oder vertikal verschoben werden. Manchmal arbeiten solche Pages noch mit einer Navigation wie bei der deutschen Firma Finerc. Andere wiederum lassen sich durch einfaches Scrollen erkunden. Das mag zunächst ungewohnt sein, erschließt sich aber intuitiv wie beim Auftritt von LLI Design.

Vielschichtig

Ein weiterer Trend, der sich im Zuge des Flat Designs durchgesetzt hat ist das Parallax Scrolling. Dabei bewegen sich die Inhalte oder Bilder auf verschiedenen Ebenen. Dadurch entsteht sogar beim flachen Gestaltungs-Trend eine Räumlichkeit, die den Betrachter nicht nur beim ersten Mal verblüfft. Die Geschichte über die Gefahren des Frackings, bei der ein Wassertropfen auf seinem Weg einmal quer durch die Erde verfolgt wird, lebt zum Beispiel von dieser Technik und stellt den kritischen Inhalt besonders eindrucksvoll dar.

Verkaufsschlager

Dass Flat Design tatsächlich eine Zukunft und besondere Bedienungsvorteile hat, beweist die Tatsache, dass auch verschiedene Webshops auf diese Gestaltungstechnik setzen. Ohne viel Schnörkel und mit dem Fokus auf die Ware entstehen hier Seiten, auf denen man gerne stöbert und dann vielleicht auch kauft. Und die meisten dieser Shops sind durch das Flat Design besonders gut für das Tablet geeignet.

My Own Bike
My own Bike verkauft individuelle Singlespeed Räder. Das Design der Seite entspricht dem Design der Ware: elegant und schlicht. Screenshot: www.myownbike.de

Responsive Design

Das liegt unter anderem auch daran, dass die klaren Strukturen des Flat Design auch der responsiven Gestaltung von Websites entgegen kommen. Gut strukturierte Inhalte lassen sich für die Darstellung auf Tablets und Smartphones leichter reduzieren und umsortieren. Vereinfachtes Scrolling und übersichtliche Navigationselemente unterstützen das Erkunden eines Webauftrittes auf dem Touchscreen. Wer sich zu diesem Thema noch einmal schlau machen will, kann dies gerne in unserem älteren Beitrag über Responsive Webdesign tun.

Hilfe für die ersten Schritte

Wenn Du Dich nun so inspiriert fühlst, dass Du Deine eigene Seite an das Flat Design anpassen möchtest, gibt es sogenannte UI-Kits (User-Interface-Kits), die Dir dabei helfen. Als freie Downloads oder für einen fairen Preis können hier gestalterische Vorlagen aus dem Netz geholt und für die eigenen Projekte als Vorlagen oder Anregungen verwendet werden. Wenn Du Flat Design UI Kit als Suchbegriff eingibst, erhältst Du eine große Auswahl an Angeboten.

Zum Beispiel findest Du bei Designmodo eine Menge kostenloser Designelemente, die einfach als HTML Code herunter geladen und verwendet werden dürfen. Die „Basic elements“ sind dabei kostenfrei, während Du für die Pro-Version ein paar Dollar berappen musst.

Einen guten Überblick über 25 unterschiedliche Tools, Scripten und Frameworks, die für das schlichte Flat Design zu gebrauchen sind, bietet der Blog von kulturbanause.de. Mit den passenden Links wird man direkt auf die nützlichen Seiten weiter geleitet.

______________________________________________________________

checkdomain.de – der Spezialist für’s Domain registrieren

– u.a. .de-Domain – .com-Domain – .bayern-Domain – .berlin-Domain – neue Domainendungen –

VN:F [1.9.22_1171]
Rating: 4.0/5 (1 vote cast)
Die schlichte Eleganz im Netz – Flat Design, 4.0 out of 5 based on 1 rating

2 Kommentare zu “Die schlichte Eleganz im Netz – Flat Design

  1. Ich hätte mir gewünscht, dass hier auch eine kritischer Sicht auf Flat Design ausgeführt wird. Im Hinblick auf die Usability war bzw. ist Flat Design eine Katastrophe. Wahrscheinlich war das auch der Grund, warum Flat Design von dem Material Design abgelöst wurde. Mal einkritischerer Ansatz findet man in meinem Blog:
    https://kopfundstift.de/flat-design-webdesign-trends-unter-der-lupe/
    Viele Grüße!

  2. Schöne Übersicht und Einführung in das Thema.
    Bin gespannt wie lange der Trend Flatdesign anhält. Glaube aber, dass er aufgrund des Hyper-Trends zum Mobile-Shopping eine große Zukunft hat.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.