Farben

Farben und ihre Assoziation

Blau:

Die Farbe Blau ist im digitalen Bereich am beliebtesten.

Viele bekannte Apps verwenden verschiedene Blautöne.

Teilweise ist es sogar möglich, einen Farbton einer Marke zuzuordnen, ohne das Logo sehen zu können.
Beispiele für solche Apps sind Facebook, Skype, Twitter und viele weitere.

Da die Farbe Blau so beliebt ist, löst sie selten negative Emotionen aus und ist somit gut für Designs geeignet.

Die Farbe Blau sollte man am besten für IT Banking Finanzen, Soziales oder Heath Programme verwenden. Außerdem ist sie gut für Hintergründe oder Hintergrund-Teile geeignet.

Für „Call so Action-Buttons“, ist die Farbe nicht gut geeignet, zudem sollte, um sich von der Masse an blauen „Social Media Apps“ hervorzuheben, ein nicht zu häufiger Blauton gewählt werden.

Grün:

Die Farbe Grün vermittelt Gesundheit, Natur und Energie

Beispiele für grüne Logos: Xbox, Spotify, Starbucks

Grün kann sowie Blau im IT und Finanzbereich eingesetzt werden, am besten wirkt Grün im Bereich Fitness, Nahrung, Gesundheit sowie Ökologie.
Die Farbe Grün weckt positive Emotionen, wenn etwas richtig ist, wird es Grün dargestellt und ist somit sehr gut für „Call to Action Buttons“ geeignet.

Rot:

Die Farbe Rot ist eine Warnfarbe, die sofort Aufmerksamkeit auf sich zieht.

Rot wird oft verwendet, um Sales erkennbar zu machen.

Beispiele: Netflix, KFC, Youtube, Coca Cola

Rot kann sowohl positive als auch negative Emotionen auslösen.
Man sollte Rot für Sport, Essen, Leistungen oder in der Autoindustrie verwenden.

Rot wird eher negativ wahrgenommen, etwa um einen Error, eine Warnung oder fallende Zahlen im Banking Bereich darzustellen.

Gelb:
Die Farbe Gelb ist eine Warnfarbe, kann aber positive Emotionen wecken, da sie sehr warm ist.

Beispiele für gelbe Logos: Snapchat, Ikea, McDonalds

Gelb kann für Lebensmittel, kreative Tätigkeiten oder Sales verwendet werden.
Helles Gelb wird als positiv empfunden starkes dunkles Gelb als Warnfarbe.

Orange:

Orange wird mit Aktivität, Lebhaftigkeit, Jugend, Kreativität und Optimismus verbunden, ähnliche wie bei der Farbe Gelb. Allerdings kann Orange auch als „billig" empfunden werden, bzw. dass das Produkt eine schlechte Qualität hat, weshalb man es vorsichtig einsetzen sollte. Ebenfalls wird Orange, wenn auch selten, als eine Warnfarbe eingesetzt. Trotzdem kann man es als Akzentfarbe für „Call-to-Action" buttons verwenden.

Orange ist bei Kinderspielzeug, Lebensmittel, Sales oder auch bei Telekommunikation. Bei Kinderspielzeug wird der Jugend und Kreativität Aspekt von Orange zu nutzen gemacht, bei Lebensmitteln soll es angeblich den Appetit anregen und bei Sales und Telekommunikation soll die Farbe die Aufmerksamkeit der Kunden anziehen.

Beispiele für die genannten Gebrauchszwecke: Nickelodeon, Lieferando, orange (franz. Telekommunikationsunternehmen)

Pink:

Pink bzw. Rosa ist eine Farbe, die stereotypisch mit Femininität und Mutterschaft assoziiert wird. Deshalb werden viele Produkte und Services, die sich an Frauen und Mädchen richten in dieser Farbe gestaltet, z.B. Kosmetik- und Fashion Artikel oder Frauengesundheitsprodukte.

Pink wird außerdem mit Unschuld, Jugend/ Kindlichkeit, Romantik und Zärtlichkeit assoziiert, weshalb es auch gerne für Non-Profit-Organisationen verwendet wird.

Pink hat auch einige negative Eigenschaften. Zum Beispiel wirkt es naiv, kindisch und kitschig.

Wie Pink verwendet wird, hängt zum Teil von der Helligkeitsstufe und den verschiedenen Nuancen ab. Kräftigere Pink-Töne werden gerne von Technikunternehmen verwendet, um Aufmerksamkeit und einen hohen Wiedererkennungswert zu generieren. Beispiele hierfür wären das bekannte Magenta von der Telekom oder das kräftige Pink von LG.

Sanftere Pink-Töne dagegen findet man häufig bei Produkten, die sich auf Mutterschaft und jungen Mädchen spezialisiert haben. Bekannte Beispiele dafür wären Barbie oder Femi Mama von tetesept.

Bei digitalen Produkten eignen sich Pastell-Töne gut als Hintergrund, stärkere Töne mehr als Akzentfarbe.

Lila:

Lila wird am seltensten gesehen, sowohl in digitalen Produkten als auch in der Natur, wobei es sich beim ersten in den letzten Jahren geändert hat.

Da Lila früher aufwendig herzustellen war, wird es heutzutage immer noch mit Luxus, Power, Geheimhaltung und Reichtum verbunden. Neuere Assoziationen sind Professionalität, Vertrauen, hohe Qualität und Modernität. Aufgrund dieser Qualitäten wird Lila gerne sowohl in der Technik-Branche, bei Luxus-Artikeln, bei Banken und Finanzen, als auch bei Lebensmitteln eingesetzt.

Negative Eigenschaften von Lila sind Arroganz, Melancholie und Distanzierung.

Bei digitalen Produkten eignet sich Lila gut in Kombination mit anderen Farben, z.B. Blau. Allerdings sollte man Lila nicht ausschließlich verwenden, da es überwältigend wirken kann.

Beispiele für die genannten Eigenschaften: Milka, Yahoo, Valiant (Schweizer Bank)

Schwarz/ Grau:

Schwarz und Grau sind seriöse, formale und emotional neutrale Farben.

Grau wird mit Minimalismus und Professionalität verbunden. Bei Schwarz kommen noch Eleganz und Luxus dazu. Beide Farben können aber auch depressiv wirken, wenn sie in Exzess verwendet werden.

Grau wird häufig für Wire-Frames und anderen UI-Elementen verwendet, z.B. Textfelder und inaktive Elemente. Deshalb sollte man Grau nicht für wichtige Elemente verwenden. Schwarz wird ebenfalls für UI-Elemente wie Icons oder Text verwendet. Beim Designen von Displays sollte man darauf achten, dass man auf „pure black" verzichtet. Stattdessen sollte man dunkle Grau-Töne verwenden.

Weiß:

Weiß ist die Farbe des Minimalismus und wird mit Reinheit und Sterilität assoziiert. Die Sterilität kann allerdings auch negativ ausfallen und zu unpersönlich wirken.

Weiß wird gerne für saubere und „luftige" Designs verwendet, z.B. "white-space" in einem Interface-Design. Außerdem es wird oft als Farbe für Hintergründe, Text-Boxen und Drop-Down Listen eingesetzt.

Farbpalleten

Eine Farbpalette ist ein Set an ausgewählten Farben, die gut zusammen arbeiten und letztendlich die Stimmung für das finale Design bestimmt. Sie spielt bei der Entstehung einer Marke eine wichtige Rolle, weshalb es essentiell ist, dass die Farbpalette richtig bestimmt wird. So bleibt alles konsistent, es setzt eine Hierachie zwischen den Farben, was zum Verständnis von Aktion hilft und folglich auch der Funktionalität. Eine Farbpalette sollte neutrale und Akzent Farben enthalten.

Monochromatisch:

Eine Monochromatische Farbpalette benutzt unterschiedliche Farbtöne einer Farbe für das ganze Set. Die Vorteile sind, dass fast das ganze Spektrum verwendet werden kann, inklusive Schwarz und Weiß. Außerdem kann die Kollision von unpassenden Farben relativ einfach vermieden werden. Der Nachteil ist jedoch, dass es keine starken Kontraste gibt, wodurch das Design langweilig ausfallen könnte.

Analog:

Bei einer analogen Palette werden Farben ausgewählten, die auf dem Farbkreis nebeneinander sind. Bei dieser Palette ist der Vorteil, dass man viele verschiedene Farbtöne von unterschiedlichen Farben hat, diese aber dennoch gut zusammen passen. Hier ist aber auch der Nachteil, wie bei der Monochromatischen Palette, dass der Kontrast zwischen den Farben zu niedrig ausfallen könnte.

Komplementär:

Die Komplementär Palette benutzt Farben, die auf dem Farbkreis gegenüber voneinander liegen. Hier kann ein hoher Farbkontrast erzielt werden, allerdings sollte darauf geachtet werden, dass die Farben nicht zu stark miteinander kollidieren.

Triadisch:

Bei der Triadischen Palette ergeben die Farben ein gleichschenkliges Dreieck auf dem Farbkreis. Der Vorteil bei dieser Palette ist, dass das Endergebnis farbenfroher ist als andere Farbpaletten. Hier ist es hilfreich das „goldene Verhältnis" einzusetzen, um eine zu starke Kollidierung der Farben zu vermeiden

Teilkomplementär:

Bei einem Teilkomplementären Farbkreis wird eine Farbe gewählt, je dunkler diese Farbe ist, desto dramatischer ist der Effekt.

Dann werden die beiden Farben neben dem Komplementärfarbton der Grundfarbe ausgewählt.
Werden helle und dunkle Farben verwendet, entsteht ein Kontrast.

Dieser trägt dazu bei, das visuelle Interesse zu erhöhen und das Gesamtdesign dynamischer zu gestalten.

Rechteckiges Farbschema:

Bei einem rechteckigen Farbschema werden vier Farben verwendet, die in Form eines Rechtecks um das Farbrad herum angeordnet sind.

Bei so vielen verschiedenen Farbtönen ist es gut, eine Grundfarbe zu wählen und andere als Akzente zu verwenden.
Es ist auch gut, warme und kalte Farbtöne auszubalancieren, um das beste Ergebnis zu bekommen.

Tetraedrisches Farbschema:

Das quadratische Farbschema wird auch tetraedrisches Farbschema genannt und funktioniert wie die rechteckige Farbpalette nur in Form eines Quadrats.

Der Hauptunterschied besteht darin, dass immer zwei Farbräume zwischen den Ecken, also den gewählten Farben ausgelassen werden.

Grautöne

Bei der Wahl der Farbpalette sollte eine Mischung aus Primär- und Grautönen erstellt werden. Wenn Grautöne einen Hauch von der Primärfarbe in sich haben, passen sie viel besser in das Design.
Wählen Sie Ihre Primärfarbe und verringern Sie ihre Helligkeit und Sättigung auf etwa 30. Dadurch erhalten Sie einen dunklen Grauton, der gut mit dem primären Farbton gemischt ist.

Indem Helligkeit und Sättigung verändert werden, wird ein Guter dunkler Ton, mittlerer und heller Farbton erzielt.

Farbkombination No-Go`s

Einige Farbkombinationen sollten vermieden werden, da sie anstrengend für die Augen sind, dadurch eine schlechte Lesbarkeit haben, was die das Produkt weniger zugänglich macht und somit die allgemeine Qualität des Produktes verschlechtert.

Ausgeglichene Farbpaletten

Eine gute Palette muss balanciert sein.

Man sollte nicht jede Farbe gleich viel verwenden, da das sehr chaotisch wirken kann.

Auch hier gibt es einen Goldenen Schnitt: 60/30/10.
Die Grundfarbe eignet sich am besten für Hintergründe und Elemente mit niedriger Priorität. Sie nimmt etwa 60 % des Platzes im Design ein.

Der unterstützende Farbton eignet sich für Objekte mit höherer Hierarchie. Dieser Farbton wird für 30 % verwendet.

Die Akzentfarbe wird für „Call to Action“ Elemente verwendet, daher funktioniert eine Abdeckung von 10 % am besten, da sie die wichtigsten Elemente hervorhebt.

Sättigung

Der Kontrast ist grundlegend für die Lesbarkeit. In Fällen, in denen der Kontrast auf einem bereits hellen Display zu hoch ist, kann dies jedoch schwer erkennbar werden. Gesättigte, sehr kontrastreiche Farben sollten nur gezielt verwendet werden. Sie sind nicht die beste Wahl für ein Nachrichtenportal, einen E-Store oder eine Banking-App.

Eine Überschreitung von 90 % Farbsättigung sollte vermieden werden.

Reines Schwarz

Die Verwendung von reinem Schwarz (#000000) ist, obwohl es den bestmöglichen Kontrast bietet, nicht die optimale Wahl für digitales Design.

Ein so hohes Kontrastverhältnis kann sich negativ auf die Lesbarkeit der Benutzeroberfläche auswirken. Menschen nehmen reines Schwarz als etwas Unnatürliches wahr.

Um den Kontrast im sicheren Bereich zu halten, ist es am besten, ein dunkles Grau anstelle von reinem Schwarz zu verwenden.

Zugänglichkeit

Die Zugänglichkeit eines digitalen Produktes bezeichnet das Prinzip, dass das Produkt für alle zugänglich sein soll, z.B auch für ältere Menschen, Menschen die Farbenblind sind oder andere Sehbehinderungen haben. Erzielt wird das, indem man die Farbkomponente wie Helligkeit und Sättigung so einstellt, dass ein guter Kontrast entsteht. Als Referenzpunkt kann man die WCAG 2.0 verwenden (Web Content Accessibility Guidelines). Die Guidelines sind in drei Ebenen der Konformität eingeteilt: A (niedrig, Verhältnis 2.33:1), AA (durchschnittlich, Verhältnis 5.33:1), AAA (hoch, Verhältnis 7.58:1). Für dekorative oder andere nicht essenzielle Elemente ist der Kontrast nicht sehr wichtig. Für wichtigere Elemente sollte ein Kontrastverhältnis von mindestens 4.5:1 vorhanden sein.