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.
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.
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.
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
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.
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
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.
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.
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
—
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:
- 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
—
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 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
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.
Belebe dein Flat Design mit Animation
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.
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.
