Flat Design

Klar, schnörkellos und reduziert aufs Wesentliche: Flat Design hat in den vergangenen Jahren einen Siegeszug sondergleichen hingelegt. Hand in Hand mit responsivem Design eroberte das neue Gestaltungsparadigma die digitale Welt. Beim Flat Design handelt es sich um ein grafisch minimalistisches Interface Design für mobile Applikationen und Internetpräsenzen. Im Gegensatz zum Skeuomorphismus, bei dem realistische Abbildungen wie Terminkalender, Uhr oder Kompass mit realitätsnah wirkenden Texturen, Schlagschatten und Verzierungen oder dreidimensionalen Elemente versehen werden, verzichtet das Flat Design bewusst auf solche Elemente.

mehr

Digital-Analog-Versöhnung

Jürgen Siebert freut sich über die Rückkehr des Flat Design – und ist gespannt auf die weiteren Trends des Jahres …

mehr

Instagram Logo, Logo Design, Logo, Instagram

Instagram Logo – neues Icon und App Design im Experten-Check

Austauschbar, modern, generisch, harmonisch oder einfach erwachsen: Was sagt die Community? PAGE hat nachgefragt …

mehr

Design Trends 2016, Design Trends

Infografik: Design Trends 2016

Haben Sie sich auch schon Fragen gestellt wie »Quo vadis Webdesign?«, »Werden wir immer minimalistischer?« oder »Kann Werbung noch emotionaler werden?« …

mehr

Google erneuert sein Betriebssystem: Android Lollipop kommt

Zahlreiche neue Funktionen, ein überarbeitetes Menü, eine neue Laufzeitumgebung und 5.000 neue APIs bringt das Android Update. Auffälligste Neuerung ist allerdings Googles neues »Material Design»

mehr

Anzeige

Logo Design für Städte und Länder

»Lassen sich die Methoden, mit denen wir Corporate Designs für Unternehmen entwickeln, auch auf andere Bereiche anwenden?«, fragt Prof. Jürgen Huber in seiner heutigen Kolumne für PAGE.

mehr

Flat Design – alles nur Mode

Jeden Monat setzt sich Professor Jürgen Huber exklusiv für PAGE mit einem aktuellen Corporate Design Thema auseinander. Heute: Logo-Design – räumlich oder flächig?

mehr

Webdesign-Trends

In unserem PAGE eDossier »Webdesign-Trends« zeigen wir Ihnen, welche neuen Rezepte funktionieren.

mehr

Neues Logo für Google

Google bekommt ein neues Logo im Flat Design.

mehr

Anzeige

Der Webdesign-Trend ist geprägt vom Verzicht auf Texturen, nutzt Typografie als Gestaltungsmittel, zeigt eine stark ausgeprägte Hierarchie in Größen und Farben und verzichtet auf jegliche Plastizität. Die User Experience des Flat Designs betont die wertvollen interaktiven Aspekte des Produkts oder der Dienstleistung und legt den Schwerpunkt auf Benutzerfreundlichkeit und Effizienz. Kreative sind davon überzeugt, dass die Betonung bestimmter Bestandteile dem Nutzer hilft, Inhalte visuell zu organisieren.

Als Protagonist verwendete Microsoft 2010 Flat Design für Windows Phone 7. Mit dem Erscheinen des Betriebssystems Windows 8, dessen User Interface komplett im sogenannten Metro-Design gestaltet ist, nahmen besonders Webdesigner das Flat Design in größerer Breite wahr. Mit dem iOS 7 setzte auch Apple für sein neues Betriebssystem erstmals viele Elemente des Flat Designs ein. Die Designer verzichteten auf die bisher für die Marke bekannte Plastizität und Schattierung, die Farben wurden primärfarbiger und die Icons weniger fotorealistisch.



Flachgeklopft

Klar, schnörkellos und reduziert aufs Wesentliche: Seit 2013 ist der Siegeszug des Flat Designs nicht mehr aufzuhalten. Hand in Hand mit responsivem Design erobert das neue Gestaltungsparadigma die mobile Welt. Steven B. Cook erklärt, warum er Flat Design schätzt, und erläutert die technischen Hintergründe im Zeichen von Retina und Co


Erstveröffentlichung dieses Beitrags: WEAVE 05.2013 | Autor: Steven B. Cook


INHALT

1. Flat Design zeigt den Usern, was wichtig ist
2. »I feel for U(sers)«
3. Außen pfui, innen GUI
4. Achtung, Amateurdesigner!
5. Inspiration und Vorlagen
6. Vektorgrafiken sind der Rohstoff des Flat Designs

Wer hätte geglaubt, dass Windows 8 einen neuen Trend einläuten würde. Am Anfang dachte ich: »Endlich hat Microsoft mal Geschmack bewiesen.« Und dann: »Vielleicht ist es auch nur die einzige Möglichkeit, sich vom Konkurrenten Apple abzuheben?« Ich persönlich bin überzeugter Anhänger des »Weniger ist mehr«. Ich sage mit Absicht nicht: »Ich bin Minimalist.« Ich habe ja auch noch nie einen Designer sagen hören: »Ich liebe das Durcheinander, es vermittelt eine so klare Botschaft.«

Flat Design zeigt den Usern, was wichtig ist

Man könnte Flat Design als eine der größten Bewegungen der Designwelt bezeichnen. Doch halt: Obwohl es frisch und unverbraucht aussieht, gab es reduziertes – oder darf ich sagen: minimalistisches Design? – schon immer. Derzeit ist es nur zurück, weil die richtige Zeit dafür gekommen ist: Nutzer erwarten heute klare, gut gestaltete Interfaces von digitalen Produkten und Dienstleistungen. Sie wol len schnellstmöglich finden, was sie suchen. Genau auf dieses Bedürfnis antwortet Flat Design.

Die Einfachheit des Flat Designs erinnert mich an die Designfaustregel »Ausdrucksvoll, lesbar, verständlich«. Als Designer fragt man sich immer: Wie viel Ausdruck beabsichtige ich? Was will ich interessanter gestalten? Welche Informationen soll der Betrach ter wirklich lesen? Alles, was Sie tun müssen, ist, Ihr Konzept auf diese Aspekte hin abzuklopfen und dann einen guten Mittelweg zu finden. Allerdings sind digitale Produkte oder Services ziemlich komplex. Es bedarf eines lan gen und gründlichen Blicks auf alle verfügbaren Informationen. Erst danach ordnen Sie diese nach Wichtigkeit und reduzieren anschließend die Zahl und die Form der Elemente bis auf die wichtigsten Komponenten.

»Flat Design legt eine Modernität und Frische an den tag, die längst überfällig war. Und die Nutzer erwarten und akzeptieren es, sie wollen nicht länger in schlechte Interaktion und unübersichtliche Layouts gezwungen werden«

Außerdem ist es heutzutage wichtiger denn je, die User anzuleiten, damit sie erkennen, was wichtig ist. Dies sind – auf einen kurzen Nenner gebracht – die Prinzipien des Flat Designs, die ich wun derbar finde: Struktur, visuelle Hierarchie, Einfachheit der Elemen te und Farben sowie mühelose Lesbarkeit. Denn rückblickend haben wir die im Grunde simplen Designelemente wie Tiefe und Schatten überstrapaziert. So folgt nun die Gegenreaktion in Form einer erzwungenen Vereinfachung.

Die Reduktion auf einige simple Prinzipien wie Wissen, Sehen, Lernen, Klicken ist eine Erleichterung. Eine klare visuelle Hierarchie führt das Auge durchs Layout. Die User Experience des Flat Designs betont die wertvollen interaktiven Aspekte des Produkts oder der Dienstleistung und legt den Schwerpunkt auf Benutzerfreundlichkeit und Effizienz. Viele Kreative sagen, dass die Betonung bestimmter Bestandteile dem Nutzer hilft, Inhalte visuell zu organisieren, und der User erwartet dies auch.
Top

»I feel for U(sers)«

Flat Design macht es genau andersherum als Designtrends der Vergangenheit: Es befreit den Nutzer von einer erzwungenen und manchmal recht verwirrenden Interaktion. Sogar die Game-Welt setzt inzwischen auf diesen Trend. Waren die klassischen Spiele noch hyperrealistisch, so blicken wir nun auf sauber aussehende Games – mit Weißraum, unkomplizierten Formen und einer auf Grundfarben basierenden Farbpalette.


Neben klaren User Interfaces birgt Flat Design auch im Zusammenhang mit contentgetriebenen Diensten einige Vorteile. Wir wissen schon, dass Geschichten einer Website Leben einhauchen, weil sie für den User mehr Relevanz haben als alles andere. Flat Design bietet die Möglichkeit, die Story durch eine clevere Optik voranzutreiben. Sie müssen die Seite nur mit sinnvollen und nützlichen Inhalten füllen, dadurch ergibt sich bereits die generelle Vorstellung über den Aufbau sowie, weit wichtiger, die Führung des Nutzers. Denn dem User geht es eher um eine solide inhaltliche Struktur als um »gutes Design«. Flat Design führt Nutzer, weil das ganze unnötige Zeug einfach weggelassen wird. Stattdessen vermittelt seine pure Ästhetik den Eindruck wirklich gereiften Designs, dessen Urheber einfach bessere Interfaces produzieren.

»Flat Design übernimmt nicht nur die Arbeit des Designers, sondern auch die des Content-Strategen, des Konzepters und des Entwicklers, denn es konzentriert sich auf die Struktur und Organisation der Inhalte«

Und doch gibt es ein paar Dinge, bei denen Flat Design schlichtweg versagt: Wenn wir mal einen Schritt aus der Designer-Ecke heraustreten, wird schnell klar, dass 99 Prozent aller User Vertrautheit brauchen und damit auch die gewohnten Skeuomorphismen. Neulich im Urlaub bekam ich im Hotel eine Keycard. Wie immer, wenn Sie das erste Mal zum Zimmer kommen, fummeln Sie solange herum, bis Sie endlich herausbekommen haben, wie die Karte funktioniert. Muss man sie durchziehen oder reinstecken? Wie herum? Es scheint da keine Konsistenz zu geben. Auf dem Weg nach Hause übernachteten wir in einem anderen Hotel, wo der Portier uns einen altmo dischen Schlüssel in die Hand drückte, mit einem überdimensionierten barocken Anhänger. Ich wusste sofort, was zu tun ist – wie wir alle.

Im realen Leben fluchen wir vielleicht ein wenig, aber probieren so lange, bis die Tür sich öffnet. Wenn jedoch der User in der digitalen Welt für einen Moment verwirrt ist, kann das sehr schnell das Ende für Ihr Produkt oder Ihre Dienstleistung bedeuten. Sicher glauben Sie jetzt, Nutzertests und Prototyping würden diese Probleme lösen. Aber Sie können Komplexität und Usability nicht ernsthaft hinter Einfachheit verbergen. User benötigen Hinweise, um herauszufinden, was sie tun können. So kann die Nutzbarkeit durchaus darunter leiden, wenn Designer zu stark vereinfachen und minimalisieren. Skeuomorphes Design kann dem entgegenwirken.
Top

Außen pfui, innen GUI

Ein anderer wichtiger Vorteil ist die emotionalisierende Kraft der skeuomorphen Welt, die dem User eine klare Richtung vorgibt und ihn durch opulente und einnehmende User Experience tief in die Anwendung hineinziehen kann. Oft resultiert daraus ein erhöhtes User-Engagement, und die Loyalität zum Produkt steigt.

Wenn wir schon über Gefühle sprechen – ich behaupte, dass alle Designer Herz und Seele in ihre Arbeit legen. Darum haben wir diesen Beruf gewählt. Wir wissen, dass Details, die andere Leute sehen oder auch nicht sehen, digitale Produkte und Dienstleistungen und damit letztendlich das Leben besser machen. Wenn skeuomorphes Design gut gemacht ist, dann transportiert es eine so starke Liebe zum Detail, dass es sich in der Einbildungskraft des Nutzers einfach niederschlagen muss. Das ist auf jeden Fall ein großer Vorteil gegenüber dem Flat Design.

Vektorgrafiken sind der Rohstoff des Flat Designs. Mit dem Aufkommen des eher geometrisch anmutenden Flat Designs schlägt die große Stunde der skalierbaren Vektorgrafiken und damit der SVG-Dateien. Allerdings lassen sich – anders als bei den fürs skeuomorphe Design so wichtigen Pixelgrafiken – mit Vektorgrafiken keine Fotos darstellen. Sie kommen in der Regel nur dann zum Einsatz, wenn sich der Bildinhalt so weit reduzieren lässt, dass er zur Vektorgrafik taugt, wie beispielsweise für Icons oder User-Interface-Elemente. Das Ergebnis lässt sich dann – ganz im Sinne des Responsive Designs, das möglichst alle Geräte inklusive der hochauflösenden Retina-Displays verlustfrei bedienen will – beliebig vergrößern und verkleinern. Vektorgrafiken sind aus geometrischen Grundelementen zusammengesetzt – Linien, Kurven, Kreise oder Polygone – und benötigen nur wenige mathematische Beschreibungen: bei einem Kreis zum Beispiel die Lage des Mittelpunktes und den Radius, aber auch die Linienstärke, die Konturfarbe oder diverse Füllmuster und Verläufe. Eine ähnliche Entwicklung ist in der Typografie zu beobachten: Hier lösen im Interesse des Responsive Designs zunehmend mathematisch beschriebene Vektorschriften die aus Pixeln zusammengesetzten Bitmap-Schriften ab. Am Ende stehen dann auch hier SVG-Dateien. SVG-Dateien brauchen nur wenig Speicherplatz, weil nicht einzelne Pixel gespeichert werden müssen, sondern lediglich die Pfade respektive die mathematische Beschreibung der darzustellenden Form. Dies wiederum kommt der Mobile-First-Devise des Responsive Designs zugute – da der Speicher mobiler Geräte begrenzt ist.
Top

Menschen staunen über Technik. Bekanntlich ist diese so weit gekommen, dass sie reale Gegenstände repliziert oder Handlungen unseres wirklichen Lebens nachahmt. Machen wir eine Zeitreise nach 1973 – Xerox Parc, Palo Alto: Bis zu diesem Wendepunkt in der Technikgeschichte beherrschten fiese schwarze Bildschirme mit langweiliger grüner oder orangener Typo die PC-Welt. Und dann, auf einmal, Skeuomorphismus sei Dank, war alles anders: Das grafische User Interface (GUI) gab jedem von uns einen virtuellen Schreibtisch, an dem wir heute noch sitzen.
Top

Achtung, Amateurdesigner!

Trotz dieser offensichtlichen Vorzüge hat Flat Design skeuomorphem Design vieles voraus. Sein Bekenntnis zur Einfachheit verbannt schlechte Designs, die von überstrapazierten visuellen Elementen herrühren. Das Ende dieses Trends können eigentlich nur Amateurdesigner einläuten, die sich nicht die Zeit nehmen, die Prinzipien des Flat Designs zu beherzigen. Mangelhaft umgesetzt wird Flat Design wie andere Designs auch in Tests schlecht wegkommen, und es könnte sich zeigen, dass es doch nicht so effektiv ist, wie angenommen.

Könnte also auch das Flat Design ein Opfer der Zeit werden wie in den 2000er Jahren die Webdesign-Trends mit ihrem Hochglanz-Look, ihren blinkenden Elementen, Farbverläufen, Schatten und Reflektionen? Ich denke nicht. Wir dürfen nur nicht vergessen, für wen wir gestalten. Sie sollten also sicherstellen, dass die User Ihr Produkt oder Ihren Service jederzeit nutzen können – und zwar überall. Wir wissen, dass Flat Design mit seinen Vektorgrafiken dem Responsive Design zugute kommt – einer Schlüsselkomponente des user-zentrierten Ansatzes.

Neue Trends kommen schneller, als man denkt. Designer werden eine Balance finden zwischen der Gestaltung emotionaler Vertrautheit und klarer Nutzerführung ohne unnötige Elemente, die lediglich von dem ablenken, was für den User wirklich wichtig ist. So bekommt jeder, was er braucht.
Top


Inspiration und Vorlagen für coole Flat Designs finden Sie hier:

Codrops: Auf Codrops gibt es hilfreiche und informative Tutorials und viele Beispiele zum Thema Flat Design.

DesignmodoDiese Plattform ist nicht auf einen Stil beschränkt, und die Artikel und Inspirationen erstrecken sich auf viele Themen.

FltDsgnMan muss wohl nicht erklären, worauf diese Site den Fokus setzt. Hier warten viele Inspirationen.

Speckboy Design MagazineDie Design-Website von Paul Andrew aus Inverness in Schottland bietet eine wundervolle Auswahl an User-Interface-Template und Icons sowie interessante Blogposts rund um die Themen User Interfaces und User Experience.

Top


Kunden & Agenturen (Erstveröffentlichung dieses Beitrags: WEAVE 05.2013)
Flat GuitarsFlat Design by: David Navarro, Amsterdam
Zurb Foundation. Flat Design by: Zurb Foundation, San Francisco
paper. Flat Design by: FiftyThree Inc., New York
Taasky. Flat Design by: Scrape apps, Prag 
greenpeace international. Flat Design by: Agentur hello monday, New York
bagigia. Flat Design by: Basilico Interactive, Brescia
Panera Bread. Flat Design by: Cramer-Krasselt, Chicago
Redbull Music Academy Radio
.
Flat Design by: Edenspiekermann, Berlin

Schweizer Illustrierte. Flat Design by: Edenspiekermann, Berlin