Flat Design ist nun schon seit einer Weile das Mittel der Wahl und das hat gute Gründe. Es ist schnörkellos, modern und vielleicht am wichtigsten, es übermittelt Informationen schnell – und bei all dem sieht es auch noch sauber und frisch aus. Flat Design kann viel für Marken tun, jedoch sind Bilder im Flat Design nicht allzu leicht zu kreieren. Es erfordert Können und Mühe.

A semi-flat illustration
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 egal, wie lange es Flat Design nun schon gibt, es sieht nicht so aus, als würde es 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 Flat Design einen 2D-Stil, um Informationen schnell und auf direktem Wege zu vermitteln.

screenshot from “Paper Mario” video game showing 2D Mario and a bunch of Toads against a 3D background
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.
Educational app design in flat style
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 Flat Design seine Wurzeln in anderen Designtrends – ganz besonders der Schweizer Typografie, der Moderne und dem Bauhaus.

Die Ästhetik des Flat Designs 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

screenshot of the Windows 8 start screen
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 im Flat Design 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 Flat Design allgegenwärtig.

side by side comparison of skeuomorphic iPhone apps and their flat design counterparts
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 siehst wahrscheinlich ein paar unterschiedliche Varianten von Flat Design.

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.

Illustrated app advertisement
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

An infographic using semiflat 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:

Red app design tutorial featuring flat illustration
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

blue monster character
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

In wenigen Schritten zum perfekten Flat Design

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

A flat design meditation 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 Flat Design erzielen, ohne langweilig zu sein.

Farbe, Kontext und Kontrast sind deine Freunde

black background with image of a woman in geometric shapes
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.

Web design in flat style
Farbe, Kontext und Kontrast leiten deinen Betrachter durch das Design. Von Fenixo.

Belebe dein Flat Design mit Animation

A 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 Flat Design Elemente 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.

text “Real Party Kids” in pastel party favor-themed font
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 Flat Design zu verwenden. Logo-Design von minimalexa.

Eine gute Regel bei der Wahl einer Schriftart lautet, dass sie sich nach dem Flat Design richten sollte – heißt, es nicht so kompliziert zu machen und auf dekorative Elemente wie Serifen zu verzichten. Auch wenn manche neuartigen Schriftarten mit Flat Design funktionieren, können andere – wie dichte Schriftarten und alles, was viele kleine Bilder enthält – schwer in einem Flat Design gut 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 Flat 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!