Die Bedeutung der Farbgestaltung

Der richtige Einsatz von Farben ist bei jedem visuellen Designprojekt von größter Wichtigkeit. Das zentrale Konzept beim Einsatz von Farbe ist es, das richtige Gleichgewicht zwischen Auswahl, Sättigung und Kontrast zu finden. In diesem Artikel werde ich zeigen, wie sich Farbschemata auf Web- und Handy-Apps anwenden lassen und wie primäre und sekundäre Farben kombiniert werden können, um gewünschte Werte und Effekte zu erzeugen.

Farbe im Digitalen

Fragst du dich, wie und warum Farbe deine Stimmung beeinflusst? Einige Farbbedeutungen sind tief in unseren Gehirnen verwurzelt. Farben sind immer und überall um uns herum sichtbar. Rot ist die Farbe des Feuers und wird mit Wärme assoziiert. Blau ist die Farbe des Himmels und des Meeres. Farbassoziationen unterscheiden sich jedoch von Person zu Person, sogar kulturell. Zum Beispiel assoziieren die meisten Amerikaner Grün mit Geld, da Dollarscheine grün sind. Forschungen zeigen, dass die Farbgebung die Stimmung und die Herzfrequenz beeinflussen und sogar Schlaflosigkeit verursachen kann. Viele Faktoren beeinflussen die Präferenzen von Menschen. Vom Geschlecht über das Alter bis hin zum kulturellen Hintergrund. Tests deuten darauf hin, dass ein Schwarzweißbild das Interesse für weniger als zwei Drittel einer Sekunde aufrechterhalten kann, während ein farbiges Bild für zwei Sekunden oder länger Interesse weckt.

Heutzutage können Menschen an zwei verschiedenen Orten leben und arbeiten. Aus der Sicht eines Designers ist es wichtig, vor Beginn eines neuen Projekts eine schnelle Recherche durchzuführen. Mein Rat ist, egal was du tust oder wohin du gehst, dass du den demographischen Faktor nicht unterschätzen solltest. Wenn du das tust, könntest du dich in Gefahr bringen. Wähle Farben mit Bedacht.

Primäres, sekundäres und tertiäres Farbrad

Die Menschen haben ein besseres Verhältnis zu Kunst und Künstlern, wenn sie Farbkombinationen verstehen und wissen, was Dinge natürlich schön aussehen lässt. 

Primärfarben können nicht durch Mischen anderer Farben erzeugt werden. Gelb, Rot und Blau sind die ursprünglichen Eltern aller zukünftigen Farbgenerationen. Sie stehen an der Spitze jeder Farbstruktur. Du kannst dich umschauen und annehmen, dass es Dutzende von Primärfarben gibt. Doch in Wirklichkeit sind es nur drei. Jede andere Farbe, die du in allem um uns herum siehst, ist aus einer Kombination dieser drei Farben entstanden.

Als ich ein Kind war, kauften meine Eltern immer einen Haufen Malutensilien für die kalten Tage, wenn wir zu Hause bleiben mussten. Die meisten meiner Zeichnungen von damals waren von Blumen, Bäumen, Gras. Die erste Farbe, die mir ausging, war also oft Grün. Dann fand ich eine Lösung. Ich konnte Grün mit anderen Farben mischen, und voila, stellte ich eine Sekundärfarbe her. Die Sekundärfarben sind Grün (Gelb und Blau), Orange (Gelb und Rot) und Violett (Rot und Blau). 

Wenn wir einen Schritt weiter gehen und eine Primärfarbe mit einer Sekundärfarbe mischen, erhalten wir eine Tertiärfarbe. Es gibt sechs Tertiärfarben: gelb-orange, rot-orange, rot-violett, blau-violett, blau-grün und gelb-grün. 

Farbgestaltung - Farbkreis

Farbschema

Nun haben wir ein Farbrad mit 12 Grundfarben. Sie können uns helfen, eine Farbkombination zu kreieren, die gut aussieht und hervorsticht. Wenn Farben zufällig gemischt werden, wirken sie in der Regel nicht sonderlich positiv. Die Wahl der richtigen Kombination ist das Ergebnis von angewandtem farbtheoretischen Wissen und einem Sinn für Ästhetik. Glücklicherweise gibt es einige ausfallsichere Farbschemata, die gebrauchsfertig sind und das Auge schonen:

1. Komplementär - die Farben stehen sich auf dem Farbkreis gegenüber. Sie bilden also einen scharfen Kontrast.

Farbgestaltung - Komplementärfarben

2. Split-Komplementär - wo zwei analoge Farben eine Primärfarbe ergänzen

Farbgestaltung -  Split-Komplementärfarben

3. Analog - Gruppen von drei Farben, die nebeneinander auf dem Farbkreis liegen, und eine Tertiärfarbe.

Farbgestaltung - Analogfarben

4. Triadisch - Farben, die gleichmäßig um den Farbkreis verteilt sind. Triadische Farbharmonien neigen dazu, recht lebhaft zu sein, auch wenn du helle oder ungesättigte Versionen deiner Farbtöne verwendest.

Farbgestaltung - Triadische Farben

5. Quadrat/Rechteck - ähnlich zur triadischen Form. Hier gibt es nur eine weitere Farbe, so dass sie alle gleichmäßig um den Farbkreis herum angeordnet sind.

6. Monochrom - basiert nur auf einer Grundfarbe und enthält verschiedene Schattierungen und Farbtöne derselben Farbe

Farbgestaltung - Monochromfarben

Warme und kalte Farben

Es ist eine bekannte Tatsache, dass Farben in zwei Hauptkategorien unterteilt werden können: warm und kalt. Wenn du die Idee der warmen und kalten Farben verstehst, wird dir das bei der Farbmischung wesentlich helfen und deinen Kunstwerken ein ausgewogeneres Aussehen verleihen.

Farbgestaltung - Warme und kühle Farben 1

Warme Farben sind rot, gelb und orange. Sie erinnern uns an Dinge wie die Sonne oder das Feuer.

Kalte Farben sind Blau, Grün und Violett und sogar Violett. Sie rufen ein entspannendes Gefühl hervor, weil sie uns an Dinge wie Wasser oder Gras, verschneite Berge erinnern.

Eine interessante Tatsache ist, dass es in jeder Farbfamilie warme und kalte Versionen gibt. Farben wirken freundlich, wenn sie genügend Gelb oder Gelb-Rot enthalten, und kalt, wenn sie eine merkliche Menge Blau enthalten.

Farbgestaltung - Warme und kühle Farben 2

Schattierungen, Tönung und Ton

Eine Tönung ist eine Mischung aus einer Farbe mit Weiß, wodurch die Dunkelheit reduziert wird. Das Abtönen einer Farbe entsättigt auch den Farbton, wodurch er weniger intensiv wird. Weiß kann mit jeder der zwölf Farben des Farbkreises gemischt werden. Du kannst aber auch jede der zwölf Farben mischen, um einen anderen Farbton zu erhalten und Tönungen dieses Farbtons zu erzeugen, indem du abgemessene Mengen Weiß hinzufügst.

Der Ton wird entweder durch Mischen einer Farbe mit Grau oder durch Tönen und Schattieren erzeugt. Ein Ton entsteht, wenn man sowohl Weiß als auch Schwarz (Grau) hinzufügt, um ihn zu malen und abzutönen oder ihn zu entsättigen.

Die Schattierung ist eine Mischung aus Schwarz, wodurch die Dunkelheit verstärkt wird. Die Schattierungen können von einem kaum schattierten reinen Farbton bis hin zu einer tiefschwarzen Farbe reichen, die in der Farbfamilie des ursprünglichen Farbtons liegt.

Farbgestaltung - Farbe, Farbton, Töne, Schatten

Die Farbpalette in Web und Mobile Apps

Die Farbpalette ist die Kombination der Farben, die du für deine Arbeit wählst. Wenn du einmal die Farben ausgewählt hast, die du verwenden wirst, solltest du sie am besten auf deiner ganzen Seite verwenden. Farbpaletten werden verwendet, um sicherzustellen, dass deine Mal-, Illustrations- und Designfarben aufeinander abgestimmt sind. Sie müssen zum selben Set gehören. Farbe erhöht den Wiedererkennungswert deiner Marke um 80%. Das bedeutet, dass die Wahl der Farbpalette deines Webdesigns essentiell ist, um deine Webseite nicht nur unterhaltsam, sondern auch ansprechend für dein Publikum zu gestalten.

Mein Rat für Web- und Handydesigner ist, mit einem monochromen Schema zu beginnen und dann nach und nach mehr Farben zu verwenden. Als zweites solltest du dir eine Grundfarbe aussuchen (welche ich als dominante Farbe bezeichne). Sobald du sie hast, ist es an der Zeit, ein Farbschema auszuwählen, um eine Palette zu erstellen. Denke daran, dass die Wahl eines Farbschemas davon abhängt, wie du mit Besuchern und Endkunden in Kontakt treten möchtest. Vergiss die Hintergrundfarbe deiner Arbeit nicht und unterschätze sie nicht. Farben auszusuchen und zu mischen kann eine knifflige Angelegenheit sein.

Wenn du ein paar Minuten Zeit hast, suche dir ein Bild, das dir gefällt, und erstelle daraus eine Farbpalette. Ich garantiere dir, dass du von dem Ergebnis überrascht sein wirst. 

Farbgestaltung - Verwendung von Farbpaletten

Die Kraft der Farbgestaltung

Wenn wir eine neue Website oder mobile Applikation entwerfen, müssen wir uns die Frage stellen, welche Farbpalette am besten geeignet ist. Es gibt eine unendliche Anzahl von möglichen Farbkombinationen. Aber es einfach zu halten, wird helfen, das UX zu verbessern. Es wäre einfacher zu verstehen, was die Hauptthemen sind und welche Aktionen gemacht werden können. Wie zu erwarten ist, verwenden die Designer die Markenfarbenidentität für die Grundfarbe und fügen dann Kontrastfarbe, eine andere Art von Schattierungen, Tönung, etc. hinzu.

Farbe erregt Aufmerksamkeit, gruppiert verwandte Elemente, vermittelt Bedeutung und wertet generell die Ästhetik deiner Seite auf. Es ist wichtig zu wissen, wie man die richtige Farbe verwendet. Der Einsatz von Psychologie in Kombination mit Farbe führt oft zu mehr Erfolg bei deinen Konkurrenten. 

  • blau: Traurigkeit, Ruhe, Loyalität. (Primär) 
  • gelb: Glück, Konzentration, Hoffnung. (Primär) 
  • rot: Leidenschaft, Wut, Gefahr, Liebe (Primär) 
  • grün: Überfluss, Natur, Frische. (Sekundär) 
  • lila: Adel, Luxus, Reichtum, Kultiviertheit (Sekundär) 
  • weiß: Reinheit, Sauberkeit, Unschuld. 
  • schwarz: Mysterium, Eleganz, Tod, Böses, Macht, Trauer

Farbgestaltung - Das Gefühl hinter Farbe

Bevor du wählst, welche Farben du verwenden willst, solltest du dich vergewissern, dass du dein Publikum und deine Kultur verstehst und was Farben repräsentieren. Ein paar Beispiele, um das Ganze ein bisschen klarer zu machen:

  • Die Liebe hat in verschiedenen Kulturen verschiedene Farben: rot im Westen und für Japaner, grün für Hindus, gelb für Indianer und blau für Afrikaner. In der westlichen und japanischen Kultur symbolisiert Rot den Zorn, während im Hinduismus der Zorn durch Schwarz dargestellt wird. 
  • In Großbritannien wird Gelb mit Glück und Frühling in Verbindung gebracht; in China - mit Pornographie

Ganz schöne Unterschiede, was?

Farbschema Beispiele in Apples Icons

Nun möchte ich mit dir einige der Farbschemata teilen, die Apple in seinen Icons verwendet:

  • Benachrichtigungen und Nachrichten- benutze ein komplementäres Farbschema für besseren Kontrast
  • Mein Telefon finden - analoges Schema
  • Game Center - gemischt  
  • Fotos - Farbrad in anderer Form

Farbgestaltung - Beispiel Apples Farbpalette

Web und Mobile Apps

Als UI/UX-Designer lese ich viel über Design und will auf dem Laufenden bleiben. Deshalb möchte ich mit dir teilen, was dribbble.com macht - es gefällt mir sehr gut. Wenn du eine Illustration, Animation, Web- oder Handy-Applikation hochlädst, erstellt Dribbble automatisch eine Farbpalette. Du kannst nach unten scrollen und sehen, welche Art von Farbschema es verwendet.

Farbgestaltung - Dribbble Color Palette Creator

Marken mit tollen Farbschemata sind nicht zufällig auf darauf gestoßen.

Markenfarben sollten hervorstechen oder zumindest auf den ersten Blick erkennbar sein. Die meisten Marken haben mehr als eine Farbe. Während das Logo blau sein kann, kann die Website auch gelb oder grün enthalten. Diese Kombination wird als Markenpalette bezeichnet und ist wichtig, damit diese Farben harmonisch zusammenspielen. Markenfarben erscheinen in oder auf:

  • Logo
  • Website
  • Werbung
  • Soziale Medien
  • Produkten
  • Veranstaltungen

Abschließende Worte

Die Farbgestaltung spielt bei der Planung und Ausführung jedes UI/UX-Designs eine wirklich wichtige Rolle. Das menschliche Auge erkennt Farben und Formen viel früher als alles, was komplexer ist, wie zum Beispiel Buchstaben. Designer verwenden festgelegte Farbschemata für alles, was mit der Marke zu tun hat - Logos, Websites, Broschüren. Obwohl die Auswahl der Farben von zentraler Bedeutung für einen guten ‘ersten Eindruck’ ist, zeigt sich ihre wahre Stärke, wenn sie mit hochwertigen Inhalten gepaart wird. Inhalt und Farbe helfen den Leuten nicht nur dabei, Daten schnell zu verdauen - sie können auch Stimmungen und Handlungen verändern und Entscheidungen beeinflussen.

Autor

Mariya Videva | UX Strategie Experte | UI/UX Designer

Mariya ist eine erfahrene Expertin für Benutzeroberflächen (UI) und Benutzererfahrung (UX) mit einer starken Tendenz zur Verbesserung der Kundenerfahrung (CX). Nach einer erfolgreichen Brainstorming-Sitzung implementiert sie die Benutzererfahrungen, die danach von Millionen von Benutzern verwendet werden.
Es gibt kein Problem, das groß genug ist, um keine Lösung für manchmal anspruchsvolle Benutzerflüsse in Angriff zu nehmen. Die User Experience-Strategie steht im Mittelpunkt ihrer Handlungen und lässt sie im Voraus und über die Implementierung hinaus denken.