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.
Inhaltsverzeichnis:
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.
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.
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.
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.
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 –
