Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Flat Design: 10 Tipps und Infos für bessere Grafiken

(Grafik: Shutterstock.com)

Flat-Design ist ein Trend, über den man in den letzten Jahren viel gehört hat. Gucken wir uns diesen Trend doch mal genauer an: Wir zeigen dir, was Flat Design genau ist, wo es her kommt und wie du saubere, lebendige und responsive Flat-Grafiken erstellst.

1. Was ist Flat Design?

Flat Design ist ein minimalistischer und moderner Style von User-Interface- und Grafik-Design, der ein Minimum an Elementen enthält und jegliche Art von komplexen Farben, Verläufen, Highlights und schattierten oder leuchtenden Effekten vermeidet. Flat Design ist das Gegenteil von Skeuomorphism-Design – und es ist nicht so einfach umzusetzen wie es aussieht.

Kurz gesagt hilft Flat Design, den Fokus auf den Content zu setzen, ohne den Benutzer mit visuellen Effekten zu verwirren.

2. Geschichte des Flat Designs

(Screenshot: windows.com)
Microsofts Metro-Design  in Windows 8. (Screenshot: windows.com)

Schon lange vor dem eigentlichen Durchbruch war Flat Design in den 80er-Jahren verbreitet, denn da war es noch nicht in der Form wie heute möglich, Verläufe und Schattierungen zu erstellen. Aber kurz darauf entstanden die ersten Skeuomorphism-Grafiken, die mehr nach dem „echten Leben“ aussehen sollten.

Flat-Design, wie wir es heute kennen, hatte seinen Durchbruch, nachdem Microsoft sein sogenanntes Metro-Design eingeführt hatte. Metro-Design ist eine UI-Design-Sprache, erfunden von Microsoft, die sich um einfaches, sauberes und modernes Design dreht.

2013 erreichte Flat Design den Höhepunkt an Popularität, als Material Design.

3. KIS: Keep it simple

(Grafik: Shutterstock.com)
(Grafik: Shutterstock.com)

Flat Design bekam seinen Namen aufgrund fehlender Dreidimensionalität und Effekten wie Schatten, Texturen, Highlights oder Verläufen. Flat Design ist eine zweidimensionale Darstellung der Objekt-Visualisierung. Komplexe Objekte werden vereinfacht und es werden meist nur die Umrisse oder die Silhouette dargestellt, die das Objekt erkennbar machen.

4. Make it perfect

Wenn du Flat-Grafiken erstellst, ist es wichtig, dass sie so akkurat und pixelgenau wie möglich sind – sowohl bei Raster- als auch bei Vektor-Grafiken.

Adobe Illustrator ist ein Tool, mit dem man pixelgenaue Grafiken erstellen kann. Es ermöglicht dir, perfekte Vektor-Grafiken zu erstellen, sie beliebig anzupassen, zu erweitern oder in der Größe zu ändern. All diese Funktionen machen es einfach, pixelgenau eine Grafik zu erstellen.

5. Farben und Trends

Eine weitere Besonderheit von Flat Design ist die Verwendung bestimmter Farben. Die meisten Farb-Paletten bestehen aus Basis-Farben – hell, kräftig, dynamisch und gesättigt sind einige Merkmale von Flat Farben. Der Farbverwendung sind allerdings keine Grenzen gesetzt, du kannst so viele Farbtöne verwenden wie du willst, je nach Anwendungsfall. Dennoch sollte man ein Auge für die richtige Farbmischung haben.

Es gibt einige Tools, die bei der Farbwahl unterstützen: Adobe Color CC, früher bekannt als Adobe Kuler, Coolors, FlatUIColors, das extra für Flat Design entwickelt wurde, und Googles Material-Design-Guide, wo du eine Sammlung von vielen Farben mit HEX-Code findest.

6. Langer Schatten

(Grafik: Shutterstock.com)
(Grafik: Shutterstock.com)

Wie weiter oben erwähnt, ist Flat Design schlicht und einfach – aus diesem Grund gibt es kaum Effekte. Aber ein Effekt wurde eins der bedeutsamsten Elemente. Die Rede ist vom langen Schatten.

Er hat einige typische Eigenschaften, die ihn besonders machen. Das sind unter anderem der 45-Grad-Winkel und seine Dimensionen – ein Schatten sollte zwei Mal so lang sein wie das Objekt. Zusammengefasst bringt ein langer Schatten mehr Tiefe ins Flat Design und gibt Objekten eine dreidimensionale Anmutung– trotz des flachen Stils.

7. Schriften

(Grafik: Jeremy Keith / Flickr Lizenz: CC BY 2.0)
(Grafik: Jeremy Keith / Flickr Lizenz: CC BY 2.0)

Typografie spielt eine wichtige Rolle im Flat Design. Oft sind Schriften die Hauptelemente und bekommen einiges mehr an Aufmerksamkeit als Flat Elemente. Meistens werden einfache Schriftarten im Flat Design verwendet. Wenn du Adobe-Produkte benutzt, kannst du viele freie Schriften unter Adobe Typekit finden. Ansonsten wirst du auch auf Websites wie Font Squirrel fündig – hier aber bitte auf die Lizenzen achten.

Meistens verwendet man im Flat Design Großbuchstaben und Kontrastfarben, um den Text lesbarer zu machen. Sei vorsichtig bei der Font-Wahl, immerhin soll die Typo das ganze Design unterstreichen, ohne dass es nach einem fremden Element aussieht. Das bedeutet aber nicht, dass du keine Serifen- oder Handwriting-Fonts verwenden darfst – achte einfach darauf, dass es minimalistisch ist und alles ausbalanciert bleibt.

8. Pro und contra Flat Design

Aufgrund der vielen Vorteile ist Flat Design in den letzten Jahren sehr beliebt geworden. Es gibt aber auch Nachteile, mit denen Designer während der Arbeit konfrontiert werden.

Pro

Trend: Flat Design wurde zum Trend und bekommt positive Aufmerksamkeit von Designern – die es nicht zu verlieren scheint. Auf der anderen Seite gibt es mehr und mehr Formen und Eigenschaften, die allmählich in eine noch kreativere Richtung gehen.

Einfachheit: Flat Design ist einfach und minimalistisch. Auf Websites wird der Fokus mehr auf den Content, statt auf optische Elemente gelegt. Und das funktioniert auch für das Mobile Design: Sauberes Design mit großen Flat-Buttons macht es einfach, auf mobilen Geräten zu agieren.

Lebendigkeit: Die Verwendung von vielen Farben ist ein weiterer Vorteil. Helle und starke Farben wirken attraktiv und sauber und die fehlenden Gradienten lassen das Design modern wirken. Mit solchen Farben lassen sich die verschiedensten Emotionen ausdrücken.

Contra

Es gibt noch viele weitere Flat-Design-Vorteile, aber kein Design ist perfekt und wir sollten es nicht idealisieren. Es gibt auch einige Nachteile, die erwähnt werden müssen.

Nicht responsive: Manchmal machen die fehlenden visuellen Effekte es schwer, eine praktische und benutzerfreundliche Oberfläche zu erstellen, was das ganze Design nicht responsive macht. Nicht jeder Benutzer fühlt sich mit Flat Design vertraut, weil durch die flache Ebene schwerer die klickbaren Elemente zu erkennen sind.

Typografie-Probleme: Wie schon erwähnt, passt nicht jede Schrift zum Flat Design, daher ist es enorm wichtig, die richtige Wahl zu treffen – immerhin unterstreicht sie das Ganze. Eine schlecht gewählte Schrift kann das ganze Design ruinieren.

Visuelle Ähnlichkeit: Aufgrund der limitierten Effekte, Farben und Schriften kann Flat Design sehr uneinladend wirken. Es ist schwer, die eigenen Icons oder Websites von anderen abzuheben, weil alle die gleichen vereinfachten Formen, Farben und ähnliche Fonts verwenden. Im Laufe der Zeit kann Flat Design also durchaus langweilig werden.

9. Flat Design in der Zukunft

(Grafik: evento.com)
(Grafik: graphicriver.net)

Flat Design ist noch nicht ausgereift und wird stetig weiter entwickelt, auch aufgrund der oben genannten Nachteile. Es tendiert dazu, neue Eigenschaften und visuelle Erweiterungen zu bekommen.

Wenn man sich die letzten Flat-Design-Trends anguckt, fällt auf, dass nur noch selten konsequent flat gearbeitet wird und wieder mehr Verläufe, Schatten, Highlights und andere visuelle Effekte eingebaut werden – aber so, dass das Ergebnis nicht überladen wirkt. Durch diese Eigenschaften wird Flat Design wieder stärker responsive und praktisch – und vielfältiger. Flat Design wird uns also noch eine Weile begleiten. Es wird interessanter und besser.

10. Und so fängst du an

Jetzt hast du Lust, eigene Grafiken zu erstellen oder deinen Prozess zu optimieren? Das wird aufregend und herausfordernd. Ich empfehle dir, mit einem kleinen Icon-Set zu beginnen und Schritt für Schritt kompliziertere Grafiken zu erstellen. Viel Spaß dabei!

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Rafael

Der LongShadow Trend im Flat Design war wohl das gruseligste was ich je gesehen habe!

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.