Flat Design ist ein zweidimensionaler Designstil aus dem Web-, App- und Interface-Design, der auf Details und Verzierungen verzichtet und als Gegenantwort zum Skeuomorphismus gilt. Er ist nun schon seit einer Weile das Mittel der Wahl und das hat gute Gründe. Flat Design ist schnörkellos, modern und vielleicht am wichtigsten, es übermittelt Informationen schnell – und bei all dem sieht es auch noch sauber und frisch aus. Der Trend kann viel für Marken tun, jedoch sind Bilder in diesem Stil nicht allzu leicht zu kreieren. Es erfordert Können und Mühe.

Wirf auch einen Blick auf unsere Grafikdesign-Trends 2019!
semi flat design illustration
Flat Design von felipe_charria

Der Trend hat eine lange Historie und es steckt jede Menge Design Thinking dahinter, um deinem Flat Design Substanz zu geben. An dieser Stelle kommt dieser Guide ins Spiel, um dir zu helfen, die Psychologie zu verstehen, die Flat Design zum Aufstieg verholfen hat, und wie du ihn am besten für deine zukünftigen Projekte nutzt. Hier sind ein paar Tipps, die du kennen solltest, denn es sieht nicht so aus, als würde dieser angesagt Trend in naher Zukunft verschwinden.

Was ist Flat Design?

Flat Design ist das, wonach es klingt: ein Designstil, der zweidimensional und stolz darauf ist. Es gibt keine Schattierung, kein hinzugefügtes Blendlicht und keine Schlaglichter, um das Bild dreidimensional aussehen zu lassen. Stattdessen zelebriert es einen 2D-Stil, um Informationen schnell und auf direktem Wege zu vermitteln.

screenshot “Paper Mario” video game mit 2D Mario auf einem 3D hintergrund
Schau dir ein paar Screenshots aus „Paper Mario“ an, um Flat Design im direkten Vergleich zu 3D-Design zu sehen. Via Nintendo.

Wirkungsvolles Flat Design ist von Natur aus unaufdringlich und das bedeutet, dass es häufig „unsichtbare“ Designelemente enthält; Entscheidungen deinerseits, die der Nutzer nicht bemerken wird. Nutzer fühlen und interagieren mit diesen Elementen, aber „sehen“ sie nicht wirklich – selbst wenn sie Teil des visuellen Designs sind. Schauen wir uns ein paar Beispiele an:

  • Ein Einkaufswagen-Symbol nutzen, um dem Nutzer zu vermitteln, wohin er klicken muss, um seinen Kauf abzuschließen. Ja, das Symbol ist sichtbar, aber es gibt keinen Call-To-Action, der sagt „Hier klicken“.
  • Informationen auf einer Seite mithilfe verschiedener Hintergrundfarben unterteilen. Hebe jeden Abschnitt gesondert hervor, indem du ihn über seine eigene Farbe legst.
  • Bestimmte Farbkombinationen nutzen, um dem Betrachter zu sagen, wie bestimmte Bilder und Informationen zu bewerten sind. Wenn etwas dringend ist, lasse es mit leuchtendem, roten Text hervorstechen.
app design im flat design stil
Von astuaris

So funktioniert Flat Design im Webdesign: Jedes Webdesign ist so entworfen, dass es den Nutzer durch die Seite oder App führt. Flat Design geht dabei einen ganz anderen Weg als sein Vorgänger, das skeuomorphische Design. Während skeuomorphisches Design visuelle und auditive Hinweise nutzt, um dem Nutzer zu sagen, wie etwas funktioniert, indem es mit einem analogen Gegenstand verglichen wird, der dieselbe Aufgabe erfüllt, nimmt Flat Design den Nutzer an die Hand und führt ihn durch die App oder Seite und macht es so zu einem immersiven und intuitiven Erlebnis.

Die Geschichte des Flat Designs

Flat Design wurde als Antwort auf skeuomorphisches Design entworfen, aber das ist noch nicht die ganze Geschichte. Wie die meisten Designbewegungen hat es seine Wurzeln in anderen Designtrends – ganz besonders der Schweizer Typografie, der Moderne und dem Bauhaus.

Die Ästhetik wurde zum großen Teil von der Schweizer Typografie, auch bekannt als Internationaler typografischer Stil, inspiriert. Schweizer Typografie ist kräftig, auffällig und enthält keinerlei Designelemente, die nicht absolut notwendig sind. Ein paar Designelemente, die Flat Design direkt der Schweizer Typografie entnommen hat, sind:

  • Hoher Kontrast
  • Minimalismus
  • Verwendung von Farbe und Kontrast, um Tiefe zu erzeugen
  • Effiziente Raumnutzung
  • Verwendung von Symbolen statt akkurater Darstellungen, um Ideen zu vermitteln
drawing of a Bauhaus-style building
Bauhaus-Stil ist nicht verschnörkelt und nicht detailliert. Er ist zweckmäßig, genau wie Flat Design. Via Bauhaus Dessau.
modernist image comprised of multiple colored shapes
Die Moderne nimmt die Regeln der Kunst und schmeißt alles weg, das nicht zur Vorstellung des Künstlers passt. Via Osnat Fine Art.

Flat Design kam auf, als Skeuomorphismus nicht mehr notwendig war. Skeuomorphismus ist der Designstil, der realistische Bilder analoger Gegenstände nutzt, um Nutzern zu zeigen, wie Programme, die diesen analogen Gegenständen entsprechen, funktionieren. Skeuomprhismus kann auch auditive und taktile Hinweise enthalten, um dieses Ziel zu erreichen. Zwei Beispiele dafür sind der Auslöserton einer Kamera-App und das Hervorheben von Text auf einem Bildschirm, indem du den Finger auf ihm entlang ziehst, als würdest du einen Textmarker auf Papier benutzen.

A skeuomorphic app icon
Ein skeuomorphisches Design von DORARPOL™
A flat icon design
Ein Flat Design von BryanMaxim

Skeuomorphisches Design erleichtert es Menschen, die in der analogen Welt aufgewachsen sind, sich in der digitalen Welt zurechtzufinden. Wenn du eine Datei auf deinem Computer löschen willst, ziehst du sie einfach auf ein Papierkorb-Symbol – das ist skeuomorphisches Design in Aktion. Wenn du jemanden anrufen willst, tippst du auf das Symbol auf deinem Telefon, das wie ein altmodischer Telefonhörer aussieht. Aber ab der 2010er Jahre hatten die meisten von uns Computer bereits seit mehr als 20 Jahren verwendet. Manche von uns kennen keine Welt ohne allgegenwärtige Computer und Internetzugang und egal, in welche dieser Kategorien du fällst, du brauchst wahrscheinlich kein skeuomorphisches Design mehr, um dir zu erklären, wie man Apps benutzt. An dieser Stelle kommt Flat Design ins Spiel!

Flat Design im digitalen Zeitalter

Windows 8 start bildschirm im flat design
Der flache Look von Windows 8 wurde entworfen, um das Betriebssystem problemlos auf Tablets zu übertragen. Via Microsoft.

Obwohl die oben erwähnten Designbewegungen das Fundament legten, brauchte es das Internet und Wettbewerb, um Flat Design im Mainstream ankommen zu lassen.

In der Vergangenheit war Apples grundlegende Ästhetik skeuomorphisch und dies brachte Microsoft dazu, in eine andere Richtung zu gehen, angefangen mit den Benutzeroberflächen für den Windows Media Player und den Zune Anfang der 2000er Jahre. Als 2012 Windows 8 mit einer Benutzeroberfläche komplett in flacher Ästhetik erschien, hatte sich Microsoft als führende Kraft in diesem Trend etabliert.

Es war nur eine Frage der Zeit, bis andere Marken folgten und ihre alten, skeuomorphischen Designs aktualisierten, wie beispielsweise Instagrams polarisierendes Rebranding. Schließlich sprang selbst Apple 2013 mit iOS 7 auf den Flat Design-Zug auf und Mitte der 2010er Jahre war die Designrichtung allgegenwärtig.

vergleich skeuomorphische iPhone apps und ihr flat design gegenstück
Skeuomorphisches Design beantwortet die Frage „Was ist das und wie benutze ich es?“. Via Shopify

Heutzutage siehst du Flat Design an so vielen Stellen, dass du es wahrscheinlich gar nicht mehr wahrnimmst – was auch Sinn der ganzen Sache ist. Der Trend beschränkt sich mittlerweile nicht mehr nur auf Interface Design, sondern umfasst auch Illustration, Werbung, Logo-Design und mehr. Flat Design ist wesentlich mit Minimalismus verbunden, wodurch es nützlich für eine Reihe von Grafikdesigns und Brandings wird. Schau dir die Designs an, die dir gefallen und du erkennst wahrscheinlich ganz unterschiedliche Varianten.

Flat Design entwickelt sich zu Semi-Flat Design

Semi-Flat Design, auch bekannt als Flat Design 2.0, ist Flat Design mit ein paar realistischen Merkmalen wie Schatten. Es ist ein fröhliches Medium zwischen Flat und dreidimensionalem Design – eine Alternative, für die du dich entscheidest, wenn du den Look von Flat Design magst, dich aber nicht von allen ästhetischen Details trennen willst, die dein Bild hervorstechen lassen.

illustrierte app werbung im semi flat design
Semi-Flat Design enthält leichte Schattierung und Highlights, um einen zarten 3D-Look zu erzeugen. Von iGreg.

Semi-Flat Design umgeht die Nachteile von Flat Design, wie beispielsweise die Reduktion an Informationen und das Risiko, dass Nutzer nicht wissen, wo sie klicken oder scrollen sollen, weil du die Hinweise für sie nicht offensichtlich genug machen konntest.

Aus einer weniger zweckmäßigen Perspektive betrachtet verleiht Semi-Flat Design deinem Bild optische Anziehungskraft. Traditionelles Flat Design ist effizient, aber Semi-Flat Design ermöglicht es Designern, einen ähnlichen Effekt zu erzeugen, ohne die Feinheiten und besonderen Nuancen zu opfern, die Designs ein stilistisches Flair geben oder es dir ermöglichen, Trends wie Farbübergänge zu verwenden.

Wann du Flat Design verwendest

infografik im semi flat design
Diese Infografik erklärt ein Produkt mit eindeutigen Beispielen mithilfe von Semi-Flat Design. Von LittleFox.

Nutze Flat Design immer dann, wenn du Botschaften effizient kommunizieren musst. Botschaften wie „Hier tippen“, „In diese Richtung wischen“ und „So funktioniert das Produkt“ sind alles Botschaften, die Flat Design gut vermittelt. Hier sind ein paar übliche Fälle:

flat design illustrationen in app
Erklär-Seiten und App Tutorials eignen sich sehr gut für Flat Design. Von 9zArt.
  • Infografiken, die das Ziel haben, ein kompliziertes Thema in leicht verdaulichen Beispielen zusammenzufassen
  • Bedienungsanleitungen und Erklär-Seiten auf Webseiten, die den Nutzer durch Schritt-für-Schritt-Anleitungen führen
  • Werbung, bei der der Betrachter das Material nicht aussucht und definitiv nicht weiter darüber nachdenken will, um es zu verstehen
  • Logo-Design und Branding, bei dem das Geschäftsmodell möglicherweise unbekannt ist und das direkt seinen Vibe kommunizieren muss
  • App-Symbole und andere Designs, die zu klein sind, um besonders detailliert zu sein
  • Bedienoberflächen für Spiele-Apps, bei denen Nutzer nach lockerer Ablenkung suchen und nicht nach einer übermäßig komplexen Simulation
  • Für Bedienoberflächen, bei denen Nutzer sofort wissen müssen, was als Nächstes zu tun ist. Wenn du eine vollgepackte, mehrseitige Website mit vielen Funktionen hast, ist Flat Design vielleicht nicht das Richtige für dich. Aber wenn du das „Uber des [hier Namen der Branche, die du umkrempeln willst, einfügen]“ werden willst, ist Flat Design das Mittel der Wahl

Während dies die üblichen Verdächtigen sind, wenn es um Flat Design geht, hat der Stil einen Charakter für sich und nichts kann dich davon abhalten, von ihm aus rein ästhetischen Gründen zu profitieren!

Wann du Flat Design nicht verwendest

blaues maskottchen verzichtet auf flat design
Denk mal darüber nach, wie viel von dieser Figur verloren ginge, wenn sie im Flat Design erstellt wäre. Hier steckt die Tiefe in den Details. Figuren-Design von Yak!

Verwende Flat Design nicht, wenn dein Bild Realismus vermittelt oder du dich auf Details verlassen musst, um die ganze Geschichte zu erzählen. Hier sind ein paar Beispiele:

  • Buchcover neigen dazu, realistischere Bilder zu nutzen, da sie fiktive Welten und Charaktere verkaufen. Dicke Wälzer für Unternehmer oder zur Selbsthilfe können sich allerdings gefahrlos auf Flat Design verlassen, da diese in einer „How to“-Form geschrieben sind.
  • Farbige T-Shirts und Kleidung, bei denen Käufer etwas Detailliertes wollen, das ihren Stil zeigt
  • Bei Maskottchen- und Figuren-Design werden Details oftmals benötigt, um der Figur Persönlichkeit zu verleihen
  • Produktverpackungen verwenden in der Regel aufwendigere und auffälligere Designs, um im Regal aufzufallen
  • Bilder für soziale Netzwerke und Webseiten im öffentlichen Dienst – hier willst du Menschlichkeit und Diversität hervorheben

Tipps, wie du Flat Design anwendest

Du willst also Flat Design nutzen. Hier sind ein paar Schritte, wenn du sicherstellen willst, dass du es richtig machst:

Verwechsle flach nicht mit langweilig

 flat design meditations app
Selbst mit wenigen Elementen kann ein minimalistisches Design immer noch wunderschön sein. Von Typelab D.

Flat Design ist von Natur aus minimalistisch. Aber nur weil ein Design nicht detailliert ist, heißt das nicht zwingend, dass es langweilig ist. In der Regel sind minimalistische Designs übersichtlich und strahlen eine saubere, moderne Atmosphäre aus. Statt dich zum Einschlafen zu bringen, kommen sie direkt auf den Punkt. Ob sie langweilig sind oder nicht, hängt letzten Endes vom Designer ab.

Damit solch ein Design funktioniert, braucht es Weißraum, um den Blick des Betrachters auf die wichtigsten Elemente zu lenken. Dadurch kannst du Bedeutung und eine ästhetische Wirkung in deinem Design erzielen, ohne langweilig zu sein.

Farbe, Kontext und Kontrast sind deine Freunde

schwarzer hintergrund mit frau in kontrastreichen farben rot und weiß
Jede Farbe in diesem Bild ist sorgfältig ausgewählt, denn ohne Schattierung, Farbe und Kontrast musst du dir mehr Mühe geben, um Tiefe zu erzeugen. Banner-Design von iving.

Sich für einen flachen Look zu entscheiden bedeutet, dass du einige der Schlüsselelemente verlierst, die normalerweise ein Design ausmachen, wie beispielsweise Schattierung um einen Button herum, um zu zeigen, dass dieser anklickbar ist, oder realistische Bilder, die beim Betrachter Empathie hervorrufen können. Mit diesen begrenzteren Möglichkeiten musst du bei den vorhanden Werkzeugen wie Farbe, Kontrast, Kontext und Größe kreativ werden.

Das bedeutet, einen satteren Farbton zu verwenden, um bestimmten Text oder Buttons zu betonen und dem Nutzer Hinweise zum Kontext zu geben, damit er versteht, wie bestimmte Elemente zu verwenden sind, indem du beispielsweise Pfeile links und rechts der Seite platzierst, um den Nutzern zu sagen, dass sie nach links und rechts wischen sollen, um mehr Inhalte zu sehen, oder Links horizontal in Form einer Symbolleiste anzuordnen. Gut durchdachte Entscheidungen wie diese sagen dem Betrachter, wie er dein Design in Abwesenheit skeuomorphischer Designelemente verwenden soll.

webdesign im flat design stil
Farbe, Kontext und Kontrast leiten deinen Betrachter durch das Design. Von Fenixo.

Belebe dein Flat Design mit Animation

flat design animation
Von Maryia Dziadziulia

Animation und Flat Design sind natürliche Freunde. Das liegt daran, dass detaillierte Zeichnungen viel mehr Arbeit erfordern, um die Bewegung überzeugend zu machen (beispielsweise die Figur in verschiedenen Posen zu zeichnen), wohingegen Flat Design mit vereinfachten Animationen davonkommt.

Obwohl du diese Technik zum Erzählen einer Geschichte nutzen kannst oder um deinem Logo ein bisschen Pep zu verleihen, können flache Designelemente auch ein Weg sein, für das zu entschädigen, was du verlierst, wenn du Schattierung und Textur weglässt. Mache die Designelemente, die du betonen willst, beweglich, um Nutzern zu zeigen, worauf sie ihre Aufmerksamkeit lenken sollen.

Wähle eine Flat Design-freundliche Schrift

Da du weniger zur Verfügung hast, womit du visuell arbeiten kannst, zählt jede Designentscheidung umso mehr und Typografie ist eine Entscheidung, die du nicht unbeachtet lassen solltest.

“Real Party Kids” logo in pastellfarben und flat design
Teste deine Schrift in einem flachen Stil, um zu sehen, ob sie funktioniert. Spiele mit den Farben herum und ändere die Größe, um zu sehen, ob es einen Weg gibt, sie in deinem Design zu verwenden. Logo-Design von minimalexa.

Eine gute Regel bei der Wahl einer Schriftart lautet, dass sie sich nach dem Design richten sollte – heißt, es nicht so kompliziert zu machen und auf dekorative Elemente wie Serifen zu verzichten. Auch wenn manche neuartige Schriftarten mit Flat Design funktionieren, können andere – wie dichte Schriftarten und alles, was viele kleine Bilder enthält – schwer darzustellen sein. Zu den serifenlosen Schriften, die gut bei einem Flat Design aussehen, gehören Telegrafico und Junction.

Flat Design gibt den Ton an

Heutzutage schauen sich die meisten Leute dein Design auf einem flachen Bildschirm an. Statt also so zu tun, als wäre das Bild etwas, das es nicht ist, huldige der Flachheit. Flat Design mag noch immer als „Trend“ betrachtet werden, aber die Tatsache, dass es nun mittlerweile seit fast einem Jahrzehnt existiert, zeigt einfach nur, wie vielseitig und wertvoll es ist.

Wenn du Angst hast, dass dieser Stil dein Design so aussehen lassen wird wie alle anderen, entscheide dich nicht für etwas Generisches, um zu sparen. Arbeite mit einem Designer, dessen Portfolio voll mit einzigartigen Flat Designs ist, die genau sagen, für wen sie sind und was ihr Besitzer macht. Mit dem richtigen Designer wird dein Design sich vom Bildschirm abheben.

Du willst ein Flat Design für deine Marke?
Finde noch heute einen Designer, der es für dich entwirft!