Eine umfassende Einführung in Farbe im Design

() translation by (you can also view the original English article)

Dieser Artikel soll Ihnen eine umfassende Einführung in die tiefsten Design-Kaninchenlöcher geben: Farbe. Es führt Sie in die wichtigsten Fachbegriffe und Konzepte ein, um Ihnen den Einstieg zu erleichtern und Ihnen dabei zu helfen, bessere Entscheidungen über die Anwendung von Farbe in Ihren Designs zu treffen.

Themen

Wie bei diesen Leitfäden üblich, werden wir viele Dinge behandeln, darunter:

Farbe?
Farbton
Tönung, Schattierung und Ton
Wert
Sättigung / Chroma
Farbkreis
Passende Farben
Monochromatisch
Arten von Farbe
Passende Farben
Betonung
Farbkonsistenz
Farbbedeutungen
Farbrelativität

Farbe?

Ohne Licht keine Farbe, oder? Nun, eigentlich gibt es ohne „Dunkelheit“ auch keine Farbe. Hä? Ich weiß, es klingt zunächst seltsam, aber ohne Dunkelheit verschwinden auch Farben. Müssen wir solche Dinge wissen, wenn wir Farben für unser Webdesign auswählen – Farbton, Sättigung und Wert? Wahrscheinlich nicht! Könnte die Farbtheorie Sie hin und wieder umhauen und Sie zu einem effektiveren Webdesigner und damit zu einem besseren „Kommunikator“ machen? Absolut! In Bezug auf Farben haben wir alle eine Menge Meinungen und Emotionen, aber oft fehlt den Menschen eine klare Vorstellung davon, was sie tatsächlich tun. Mit einer theoretischen Grundlage, auf der Sie aufbauen können, sind Sie als Designer viel effektiver. Die Kunstschule ist kein Ort, an dem die meisten Menschen eine bedeutende Zeit ihres Lebens verbringen, aber Sie müssen nicht Jahre damit verbringen, die Farben Ihren Bedürfnissen anzupassen. Lassen Sie uns Sie also auf den neuesten Stand bringen.

Bei der Auswahl von Farben gibt es viele Überlegungen, die Sie nicht sofort erwarten würden. Eine kleine Warnung, es kann ein Kaninchenbau sein, aus dem Sie nie entkommen können. Um dies auszugleichen, schlage ich vor, dass Sie sich in erster Linie darauf konzentrieren, es für Ihre Benutzer interessant zu machen und gleichzeitig vernünftige und effektive Entscheidungen zu treffen, die Ihr Design unterstützen. Dies scheint ein überschaubares Ziel für Farbneulinge zu sein. Mir ist klar, dass das super aufgedunsen klingt, aber Subjektivität kann man nicht abschütteln, wenn man über Farben spricht. Sagen wir einfach, wir sind uns einig, dass die Auswahl von Farben, die Bedeutung haben und Interesse wecken, ein guter Anfang ist.

Farbe kann eine sehr starke „Waffe“ in Ihrem künstlerischen oder kreativen Arsenal sein – wenn sie natürlich angemessen eingesetzt wird. Bei unseren Designs im Web geht es bei Farbe oft um die emotionale und visuelle Wirkung. Bei richtiger Verwendung können Farben den Betrachter auf das Wesentliche hinweisen und Akzente setzen, wenn Sie es nicht übertreiben. Ich denke, es ist fair zu sagen, dass dies wahrscheinlich das Wichtigste ist, wenn Farbe in Webprojekten verwendet wird. Eine zweite Sorge ist, dass Sie eine bestimmte Stimmung herstellen können, eine emotionale Wirkung, die Branding-Ideen noch weiter vorantreibt. Dieses ganze Thema ist riesig – tatsächlich gigantisch. Wir konzentrieren uns auf die wichtigsten Aspekte und Begriffe, um Ihnen den Einstieg zu erleichtern.

Farbton

Ein Farbton ist eine beliebige Farbe im Farbkreis.

Wenn Leute über Farben sprechen, sprechen sie oft von Farbtönen – das sind die grundlegenden, „reinen“ Farben, jede Farbe, die innerhalb des sichtbaren Lichtspektrums liegt. Das gesunde menschliche Auge kann 2,3 Millionen Farbtöne sehen; Tonnen von Variationen von Rot, Blau, Grün und so weiter.

Für unsere Arbeit mit Farben im Design stellen sie Ausgangspunkte dar, wie rohe oder die primitivsten Versionen. In unseren Designs ist es ratsam, diese hinter sich zu lassen, um nicht amateurhaft oder kindisch zu wirken. Ist Ihnen jemals aufgefallen, dass Cartoons für Kinder diese Farben gerne für ihre Charaktere verwenden? Keine große Überraschung, denke ich. Sie können dies natürlich nutzen, wenn Sie sich für eine bestimmte Ästhetik entscheiden, aber meistens ist kindisch nicht das, was im Web so gut funktioniert.

Envoy Passport nutzt diesen cartoonartigen, verspielten Stil hier zu seinem Vorteil. Man sieht, dass die Farben sehr flach und schlicht sind. Aber sie verwenden diesen Stil hier, um einen Eindruck oder eine Idee zu vermitteln, die ohne die Nachahmung von Kunstwerken für Kinder schwerer darzustellen gewesen wäre.

Tönung, Schattierung und Ton

Farbtöne haben keine Tönung oder Schattierung – was bedeutet, dass sie keine Zusätze von Weiß oder Schwarz haben. Deshalb sprechen wir von Tönungen und Schattierungen bestimmter Farbtöne. Bei der Tönung handelt es sich um den Weißanteil einer Farbe. Wenn Sie eine Farbe mit Weiß mischen, tönen Sie sie. Mehr Weiß führt zu einer erhöhten Helligkeit des Farbtons. Das Hinzufügen von Weiß zum reinen Farbton verringert seine Sättigung, wodurch der Farbton weniger intensiv wird.

Bei Schatten hingegen handelt es sich um den Schwarzanteil einer Farbe. Wenn Sie eine Farbe mit Schwarz mischen, schattieren Sie sie. Dies führt zu einer satten, oft dunkleren, intensiveren Farbe aufgrund der überwältigenden Natur der schwarzen Pigmente. Viele Schwarztöne verändern die Eigenschaften eines Farbtons schon durch kleine Mengen. Daher sollten sie sparsam verwendet werden.

Wie Sie im Spektrum unten sehen können, finden Sie in der Mitte den reinen Farbton. Links fügen wir durch Abtönen immer mehr Weiß hinzu und rechts schattieren wir das Rot mit Schwarz.

Tint-Hue-Shade Spectrum — Farbton-Farbton-Schattenspektrum

Wir sprechen davon, Töne zu erzeugen, wenn wir einen Farbton mit Grau mischen, was bedeutet, dass Sie gleichzeitig effektvoll tönen und schattieren. Töne können heller oder dunkler als der ursprüngliche Farbton sein – je nach hinzugefügtem Weiß- und Schwarzanteil. Sie erscheinen auch weniger gesättigt und intensiv als der ursprüngliche Farbton. Töne können subtile und komplexe Qualitäten in einem Farbton offenbaren und sind nähere Darstellungen der Art und Weise, wie wir die „reale“ Welt sehen.

From MOMA — Standbild aus der MoMA-Serie Art Terms in Action

Wert

Wert ist die Helligkeit oder Dunkelheit eines Farbtons. Werte sind sehr, sehr entscheidend für professionelle Ergebnisse. In gewisser Weise ist es viel wichtiger, sie richtig zu machen, als einen Farbton zu wählen. Wenn wir sagen, dass eine Farbe heller oder dunkler ist, sprechen wir über den Wert eines Farbtons. Dies sagt uns, wie nah es an seiner hellsten oder dunkelsten Version ist. Eine Werteskala ist wie eine Grauskala für einen bestimmten Farbton.

Die Abschnitte auf der Skala werden Stufen genannt. Jeder kann deutlich dadurch unterschieden werden, dass er deutlich heller oder dunkler ist als der andere. Wenn Sie diese Werte anwenden, erzielen Sie einen besseren Tonkontrast, indem Sie realistische Lichter und Schattierungen verwenden.

Viele der großartigen Gemälde, die wir gemeinsam in der Kunstgeschichte bewundern, wurden von Künstlern geschaffen, die durch die richtige Verwendung von Wertskalen Meister im subtilen Tonkontrast waren. Sie erreichten Variationen der Tiefe durch allmähliche Wertänderungen einer begrenzten Anzahl von Farbtönen.

Dies funktioniert nicht nur bei Graustufen, sondern auch bei monochromen Farben (mit einem Farbton). Betrachten Sie es als die Lichter und Schattierungen eines Farbtons.

Aufräumen – Küste Siziliens, Andreas Achenbach

Sie können sehen, wie effektiv diese Skala ist, indem Sie das Gemälde entsättigen. Die Werte ändern sich nicht, wenn Sie die Farbe ausgrauen. Die hellsten Lichter und die dunkelsten Dunkelheiten definieren immer noch einen effektiven Bereich, um ein Bild zu erzeugen, das seine künstlerischen Qualitäten nicht verliert.

Oder denken Sie an ikonische Schwarz-Weiß-Fotografien der letzten fünfzig Jahre oder so. Sie haben oft eine breite Palette von Stufen auf der Grauskala und erzeugen einen stärkeren, interessanteren Kontrast – von sehr dunklen Schwarztönen bis zu sehr hellen Weißtönen. Amateure enden oft mit flachen Schwarzweißbildern, weil sie sich der Notwendigkeit nicht bewusst sind, sie mit breiteren Graustufen lebendiger zu gestalten.

Auszug aus Guerrillero Heroico von Alberto Korda

Interessanterweise hat jede Farbe ihren eigenen Wertebereich. Einige haben eine größere Reichweite als andere. Rot hat beispielsweise im Vergleich zu einem blauen Farbton eine begrenztere Reichweite. Rot liegt im unteren Graustufenbereich, der Wert ist sehr dunkel. Gelb hingegen liegt im oberen Bereich. Grün, Violett und Blau haben die größte Bandbreite, die in wenigen Schritten von dunkel zu hell geht.

Warum kümmern wir uns? Werte sind eine effektive Möglichkeit, eine zweidimensionale Darstellung auf einer beliebigen Leinwand zu rendern und sie mithilfe der relativen Schattierungen eines Farbtons dreidimensional erscheinen zu lassen. Das ist es, was die Menschen als lebendiger oder beschwingt bezeichnen – im Gegensatz zu flachen Farben, die diesen Effekt nicht erzielen. Aus diesem Grund verwenden Sie im Allgemeinen mehr entsättigte Töne, reine Farbtöne sind wenig hilfreich und sehen unreif aus. Ein guter Tipp ist, mit nur einem Farbton zu beginnen und eine Werteskala für Ihre Website zu entwickeln. Sie können Werte verwenden, um bestimmte Bereiche und andere Bereiche hervorzuheben, die sanft in den Hintergrund treten – und das alles bei gleichbleibendem Farbton. Einfach und edel.

Sättigung / Chroma

Sättigung, auch Chroma genannt, ist ein weiteres Konzept, das wir nicht übersehen sollten. Dies ist die „Buntheit“ oder Reinheit eines Farbtons. Diese funky Begriffe lassen sich wirklich auf die Intensität oder Brillanz einer wahrgenommenen Farbe übertragen. Das Chroma definiert, wie rein der Farbton ist. Wenn Sie Farben zum Malen kaufen, sind Chromas die Farben, die Sie direkt aus der Tube nehmen. Im Gegensatz dazu werden entsättigte Farben verwaschen oder ausgegraut und werden oft als Schattenfarben in unterschiedlichen Abstufungen verwendet. Eine vollständig entsättigte Farbe erscheint grau.

Wir entsättigen Farbtöne, indem wir eine Komplementärfarbe hinzufügen. Alles, was von der gegenüberliegenden Seite des Farbkreises hinzugefügt wird, entsättigt den Farbton effektiv. Wo beide Farben aufeinandertreffen, haben Sie Ihren neutralen Farbpunkt, braun oder grau. Es ist wichtig zu verstehen, dass wir dafür kein Grau hinzufügen. Tatsächlich erzeugen Sie ein Grau, aber nicht durch Hinzufügen von Schwarz oder Weiß. Diese Grautöne werden von Malern verwendet, um gesättigte Farben aufzubrechen.

Warum ist das eine gute Idee? Die Antwort ist eigentlich ganz praktisch: Man möchte den Betrachter nicht überall mit intensiven Farbsättigungen bombardieren – ganz im Gegenteil. Hochgesättigte Farben können unglaublich falsch und billig aussehen. Zu viel davon lässt Ihren Augen wenig Ruhe und nichts, worauf Sie sich wirklich konzentrieren können, mehr visuelles Rauschen.

Bildschirmfoto

Wenn eine Seite wie UXDESIGNER.TOP, die irgendwie der UX gewidmet ist, auf diese Weise Fehler macht, ist es meiner Meinung nach doppelt traurig zu sehen. Sieht nicht so gut aus, oder? Es gibt alle möglichen Probleme, aber vor allem das Farbchaos macht es nicht einfach, eine Hierarchie aufzubauen, um den Betrachter zu leiten. Schlechte UX!

Nehmen Sie zum Beispiel Blau und Orange. Nebeneinander verhalten sie sich sehr intensiv. Mischt man sie, erhält man einen Grauton, der ihre stärker gesättigten Varianten sehr gut trennen kann. Diese neue Farbe positioniert sich zwischen diesen stark gesättigten Versionen und schafft ein optisch ansprechenderes Erlebnis, indem realistischere Farben angewendet werden. So flauschig das klingt, es hat mehr Lebendigkeit, mehr Leben. Dadurch entsteht eine technisch ausgereiftere Barriere zwischen den Farben. Wenn man von Meistern der Malerei spricht, war dies eines der Dinge, die sie fest im Griff hatten.

Beim Design ist es eine gute Idee, sich nur auf eine oder zwei Farben zu konzentrieren und dann Variationen davon zu erstellen. Dies gibt Ihnen viele Optionen innerhalb der gleichen Farbe. Sie variieren Ihre Farbe, bleiben aber innerhalb der gleichen Farbnuance(n). Dies hilft dann, die Aufmerksamkeit Ihres Betrachters zu verankern, wenn nur wenige Teile selektiv stark gesättigt sind. Im Bild oben wird Ihr Blick auf den Sen gelenkt. Es springt wirklich heraus.

Farbkreis

Wir erhalten ein Farbrad, indem wir das Lichtspektrum nehmen und dann beide Enden zu einem Kreis verbinden. Dies ist ein klassisch verwendetes und hilfreiches Werkzeug, um uns die Beziehungen zwischen den Farben zu zeigen. Wie? Für den Anfang kann Ihnen das Farbrad sagen, wie Sie den größtmöglichen Kontrast für eine bestimmte Auswahl erzielen.

Der symmetrische Farbkreis ist weniger eine wissenschaftliche Sache, sondern eine Darstellung der Funktionsweise unseres Gehirns. Es weist darauf hin, wie wir emotional reagieren könnten, in Bezug darauf, welche Reaktionen Farben hervorrufen. Wissenschaftlich gesehen gibt es im Farbspektrum keine gegensätzlichen Farben – das ist eine Idee in unserem Gehirn oder in den Konzepten, die wir zusammenstellen, um Farben zu organisieren und zu unterscheiden. Es ist auf jeden Fall hilfreich bei der Farbauswahl. Diese Wahrnehmungen werden nicht nur von unserer eigenen Biologie befeuert, sondern auch stark von Jahrhunderten der Kunstgeschichte beeinflusst und können zwischen verschiedenen Kulturen stark variieren.

In diesen Beispielen verwenden wir den traditionellen Farbkreis des „Künstlers“, der auf dem Rot-Gelb-Blau (RYB)-Farbmodell basiert. Dieser leitet sich davon ab, wie Maler ihre Farbmischungen erstellt haben – durch subtraktive Farbmischung. Es wird heutzutage hauptsächlich in der Kunst und im Design verwendet, noch vor der wissenschaftlichen Farbtheorie, die sich auf Cyan, Magenta und Gelb (CMY) als Primärfarben bezieht. CMY erreicht eine größere Teilmenge von Farben als das RYB-Farbmodell.

Primärfarben: Rot, Gelb, Blau

Rot, Gelb und Blau werden verwendet, um alle anderen Farben zu erzeugen, und verdienen daher den Namen primär. Sie können keine anderen Farben mischen, um sie zu erhalten.

Dies ist sicherlich ein guter Ausgangspunkt und alles, was Sie vorerst über Primärfarben wissen müssen. Abgesehen davon möchte ich auch erwähnen, dass dies in der Vergangenheit die Annahme vieler Farbtheoretiker war. In Wirklichkeit können Sie beispielsweise mit Farbe oder Tinte nur eine begrenzte Farbpalette mischen, die nicht der gesamten Farbpalette entspricht, die ein gesundes menschliches Auge wahrnehmen kann. Worüber wir hier sprechen, ist eine bestimmte vollständige Teilmenge von Farben, auch Gamut genannt. Ein Körnchen Salz ist hier also angebracht.

Sekundärfarben: Grün, Orange, Lila

Grün, Orange und Violett werden durch die Kombination von Primärfarben gemischt.

In Goethes Farbkreis oben bildet Grün die Basis. Es ist die Mischung der beiden Grundfarben Gelb und Blau. Orange ist eine Mischung aus Gelb und Rot, während Violett eine Mischung aus Rot und Blau ist.

Tertiärfarben

Wir können diese Idee weiterführen und Primär- mit Sekundärfarben mischen – wiederum indem wir Farben mischen, die auf dem Rad nebeneinander liegen.

Nach Abschluss dieser Deklination erhalten Sie Folgendes:

Chartreuse: gelb-grün
Bernstein: gelb-orange
Zinnoberrot: rot-orange
Magenta: Rot-Lila
Violett: blau-violett
Blaugrün: blaugrün

Beachten Sie, dass die Sekundärfarbe in dieser Notation der Primärfarbe folgt.

Analoge Farben

Analoge Farben liegen auf dem Farbkreis direkt nebeneinander.

Sie gehen eine einfache Beziehung ein und sind normalerweise sehr augenfreundlich, wodurch eine friedliche, angenehme Stimmung entsteht. Wie? Wahrscheinlich, weil diese Farbkombination oft in der Natur zu sehen ist.

Komplementärfarben

Auf dem Farbkreis stehen sich Komplementärfarben gegenüber. Komplementärfarben sind eine sehr beliebte Kombination, da sie den Augen „natürlich“ gefallen. Rot und Grün sind besonders beliebt.

Aber denken Sie daran, sie nicht gleich zu verwenden, sondern entscheiden Sie sich für eine dominante Farbe. Generell sollte die schwächere Farbe breiter und die stärkere zur Akzentuierung eingesetzt werden. Denken Sie an Farbkombinationen wie passende Serifen- und Sans-Serif-Schriften. Eine Balance ist hier wirklich wichtig. Auch Komplementärfarben können für jeden Farbton den stärksten Farbkontrast erzeugen.

Triadische Farben

Triadische Farben werden äquidistant auf dem Farbkreis platziert. Sie stellen eine etwas fortgeschrittene Kombination dar, und ich denke, dass es für Anfänger schwierig ist, diese zu verwenden – aber lass dich nicht davon abhalten. Je mehr Sie üben usw. usw.

Sie eignen sich oft gut für Cartoons und surreale Szenen und können eine gewisse Verspieltheit implizieren.

Arten von Farbe

Hier ist eine neuere Darstellung des RYB-Farbkreises:

Warme Farben

Warme Farben werden durch die rechte Seite des Farbkreises dargestellt. Sie neigen dazu, aufmerksamkeitsstarker, energischer und wirklich stark zu sein – zumindest in unserer üblichen Wahrnehmung. Vergessen Sie nicht, dass dies sehr menschliche Attribute sind, die nichts mit dem Phänomen Licht zu tun haben. Diese Farben können unsere Aufmerksamkeit sehr schnell erregen und gelten als sehr aktiv.

Sie können dafür sorgen, dass warme Farben effektiv funktionieren, aber hier ist ein Beispiel, das Vertrauen, Sicherheit und Zuversicht nicht schafft, indem es Sie mit einer Menge warmer Farben überflutet. Darüber hinaus leistet dieses Design einen schlechten Job, wenn es darum geht, den Schwerpunkt auf ihre Hauptaktion zu legen. Ihr E-Mail-Abonnieren-Button hat die gleiche Farbe wie der Hintergrund und verschwindet optisch. Es hätte viel subtiler und effektiver sein können, wenn nur die Schaltfläche eine warme Farbe verwendet hätte, um deutlicher hervorzuheben, wenn der Hintergrund nicht so viele aktive Farben verwendet.

Kalte Farben

Die linke Seite hingegen repräsentiert kühle Farben. Diese sind bequemer und stabiler. Sie neigen auch dazu, leicht in den Hintergrund einer Komposition zu verschwinden und nicht so sehr „herauszuspringen“. Sie gelten als eher passiver Natur.

Diese linke Seite des Farbkreises ist heutzutage bei beliebten Websites sehr beliebt. Werfen Sie einfach einen Blick auf die Facebooks und Twitters da draußen und Sie werden eine Fülle bekannter Projekte finden, die diese Farben in ihre Farbpaletten integrieren. Warum? Denn Webprojekte haben immer damit zu kämpfen, keinen physischen Standort zu haben, an dem leichter eine persönliche und vertrauensvolle Verbindung hergestellt werden kann. Websites, die sich an eine Unmenge von Menschen richten, müssen stabil, vertrauenswürdig, entspannend und ruhig erscheinen – sogar beruhigend. Dies sind alles Dinge, bei denen die kühleren Farbtypen Ihnen helfen können.

Neutrale Farben

Schwarz, Weiß, Grau und Braun gelten als neutral. In diesem Sinne unterstützen sie „Farben“. Bei richtiger Anwendung können diese neutralen Farben alles miteinander verbinden – wie im obigen Monet-Gemälde. Sie bieten eine Pause von der Intensität der helleren, intensiveren Farben, die das Auge leichter anziehen. In diesem Sinne sind neutrale Töne die Grundlage für Interesse und Abwechslung – wie Ihre Spaghetti mit Tomatensauce und Fleischbällchen. Die Spaghetti sind dabei das neutrale Bindemittel.

Die Neutraltöne treten in den Hintergrund zurück, wenn Sie gesättigtere Farben in die Mischung einbringen. In jeder großen Farbsprache spielen sie eine wichtige Rolle, denn sie helfen Ihnen, eine gekonnte Balance in Ihrer Arbeit zu schaffen. Stellen Sie sich vor, alles schreit farblich. Das wäre nicht sehr effektiv und wir würden wieder mit Farb-„Rauschen“ enden. Neutrale sind Ihre Geheimwaffe, um bei Bedarf einen scharfen Fokus zu erzeugen. Konkret bedeutet dies, dass Sie Ihre Komposition mit meist neutralen Tönen aufbauen und dann entscheiden, wo der Fokus liegt und wo das Auge angezogen werden soll. Hier kommen die gesättigten Töne ins Spiel.

Stellen Sie sich vor, wir hätten hier Tonnen von gesättigten Farben. Es wäre viel schwieriger für die Vorbesteller-Buttons herauszuragen. Da sie den Kern dieses Geschäfts bilden, müssen sie stark akzentuiert werden, um nicht verloren zu gehen. Die weißen und grauen Flächen treten in den Hintergrund und lassen die wenigen Farbakzente sofort hervortreten.

Passende Farben

Bevor wir weitermachen, noch ein Wort zum Zusammenbringen verschiedener Farben. Wie ich bereits erwähnt habe, kann dieser Prozess der Auswahl von Schriftarten sehr ähnlich sein. Versuchen Sie, sich für Ihr Design auf eine oder vielleicht zwei Hauptfarben festzulegen. Sie haben viele Variationen, mit denen Sie spielen können, indem Sie Wert, Ton, Helligkeit, Sättigung anpassen oder neutrale Farben verwenden usw. Wenn Sie nicht mit Tonnen von Farben durchdrehen, erzielen Sie ein viel kohärenteres Ergebnis – eines, das das Ganze verbindet sinnvoll und elegant zusammen.

Beginnen Sie mit einer Farbe, lassen Sie andere Farben davon abprallen und sehen Sie, wie weit Sie es bringen können. Noch besser, wenn Sie mit einer einfachen Graustufe beginnen und warten, bevor Sie Farbe in die Gleichung einbringen. Spielen Sie in Ihren frühen Ansätzen mit Licht und Dunkelheit. Um bestimmte Teile hervorzuheben, verwenden Sie die dominierenden Farben sparsam, während Sie die unterstützenden Farben den Hintergrund machen lassen.

Monochromatische Auswahl

Ich sollte auch kurz erwähnen, was Sie über die monochromatische Farbauswahl wissen müssen. Erinnern Sie sich an diesen Kerl von oben?

Dies ist eine monochromatische Farbskala mit einem roten Farbton. Unten ist ein großartiges Beispiel für die effektive Verwendung eines monochromen Ansatzes.

Betonung

Wenn Sie Ihre dominante Farbe sparsam einsetzen, können Sie wirkungsvolle Akzente setzen. Vermeiden Sie es, es zu stark aufzublasen und die Gelegenheit zu verschwenden, damit wichtige Designelemente hervorzuheben – speichern Sie es für die „Kirsche obendrauf“. Verwenden Sie es, um sich auf Elemente zu konzentrieren, die für die Kommunikation der wichtigsten Informationen wirklich entscheidend sind. Diese „primäre“ Farbe Ihrer Palette funktioniert normalerweise gut mit einer Grauskala, da sie leicht zurückgeht und die Hauptfarbe effektiv unterstützt.

RIF6 hebt nur die Schlüsselelemente für eine erfolgreiche Geschäftstransaktion hervor. In diesem Beispiel ist es schwer, die Schaltflächen zu übersehen, mit denen Sie diesen Artikel kaufen können. Einer schnellen Führung des Auges zu dem Interface-Item, das dem Benutzer die Hauptaktion erleichtert, steht nichts im Wege. Und das alles unter Verwendung der Hauptfarbe, mit der das Unternehmen als Marke identifiziert wird. Einfach und effektiv! Und kein Unsinn im Weg.

Farbkonsistenz

Sobald Sie eine mentale Farbkarte für Ihre Benutzer erstellt haben, ist es wichtig, sie nicht zu zerstören. Wenn Sie sich bewusst dafür entscheiden, es zu brechen, tun Sie es geschickt und mit Absicht. Es ist beispielsweise wichtig, Links die gleiche Farbe beizubehalten, wenn sie dasselbe tun, insbesondere wenn Sie Tonnen von Inhalten auf einer Seite haben. Darüber hinaus bietet das Beibehalten der Kopfzeilenfarben dem Benutzer etwas, um seine Reise zu verankern.

Es kann auch sehr effektiv sein, die Hintergrundfarben ähnlich zu halten. Dies ist nicht etwas, das viel Schaden anrichtet, wenn es ignoriert wird, aber es kann Dinge gut zusammenfügen, wenn es beobachtet wird. Das Wichtigste bei all dem ist, dass Sie Erwartungen an Ihre Benutzer setzen und es den Benutzern leicht machen möchten, zu folgen und zu verstehen, wohin die Reise geht.

Pattern ist ein neues Produkt von Etsy und es leistet hervorragende Arbeit bei der konsequenten Verwendung von Farben. Auch das Bild des Schreibtisches mit den Büchern und Co. erweitert seine Markenfarbe elegant und bleibt in diesem Bereich der unscharfen, warmen Farben. Die graue Wand im Hintergrund bietet eine perfekte Kulisse, um die Aufmerksamkeit auf den Hauptaufruf der Website zu lenken. Es spricht deutlich "ETSY", ohne dir direkt ins Gesicht zu schreien. Doppelter Daumen hoch!

Etsy leistet auch großartige Arbeit darin, auf ihrer Hauptseite mit den Farben konsistent zu sein, aber sie haben hier und da auch ein bisschen den Ball fallen lassen. Ich denke, es ist fair zu sagen, dass es Raum gibt, mehr Zusammenhalt zu schaffen, indem Farben auf den Hauptseiten konsistenter verwendet werden, insbesondere in Bezug auf Hintergründe. Überzeugen Sie sich selbst, Sie sind der Richter:

Farbbedeutungen

In verschiedenen Kulturen können Farben unterschiedliche Bedeutungen oder Assoziationen implizieren. Sie rufen unterschiedliche Gefühle hervor, die nicht zu unterschätzen sind, wenn wir an kulturzonenübergreifenden Projekten arbeiten. Um Missverständnisse zu vermeiden und eine effektive Kommunikation zu ermöglichen, müssen wir dies berücksichtigen.

Im Folgenden sind einige gängige Bedeutungen aufgeführt, denen Farben zugeschrieben werden. Sie mögen sie oberflächlich finden, aber es ist trotzdem gut, sich dieser Assoziationen bewusst zu sein und sie in Erinnerung zu behalten.

Blau

Blau steht wie keine andere Farbe für Vertrauen, Stabilität und Business. Es setzt auch Vertrauen und Professionalität voraus. Ehre und Zuverlässigkeit gehören ebenfalls dazu. Der(blaue) Himmel ist die Grenze!

Grün

Grün bedeutet Wachstum, Harmonie, Natur, Reichtum, Optimismus und Geld (natürlich).

rot

Liebe ist eine große Assoziation mit Rot, aber auch Macht, Erotik und Stärke paaren sich damit. Was es ein bisschen schwierig macht, damit zu arbeiten, ist, dass es auch Gefahr, Blut, Böses und einen Ausnahmezustand bedeuten kann. Mut ist auch gleichbedeutend. Seien Sie vorsichtig mit dem Kontext und der Bedeutung dieses Textes, da er sehr starke, potenziell negative Konnotationen hervorrufen kann.

Die Seite für den SpeedX Leopard verwendet Rot sehr geschickt. Es verstärkt die Farbe des Fahrrads selbst, aber nur sparsam, um den Aufruf zum Handeln hervorzuheben. Überall rot zu verputzen würde nicht annähernd so edel wirken.

Gelb

Gelb symbolisiert Hoffnung, Freude, Sonne, Aufregung, aber auch Warnungen. Da es so hell ist, kann es Sie laut „schreien“. Das brauchen wir als Nutzer meist nicht. Im Beispiel unten wäre weniger meiner Meinung nach mehr gewesen. Für ein Projekt, das „sicher“ und „familie“ im Namen hat, war Gelb möglicherweise nicht die beste Wahl.

Lila

Die gute alte Farbe des Königshauses. Nicht mein Ding, aber diese Farbe wird verwendet, um die Idee von Luxus, Magie und all dem Jazz zu vermitteln. Interessanterweise passt auch Punk dazu. Die Assoziation mit Königtum und Luxus rührt wahrscheinlich von der teuren Natur her, die Lila in der Vergangenheit hatte. Es war schwierig zu produzieren (eine Geschichte, die Tonnen von winzigen Schnecken und dergleichen beinhaltet) und daher konnten es sich nur die höchsten in der sozialen Nahrungskette leisten. Heutzutage ist das natürlich kein Thema mehr.

Komisch, dass Bootstrap, ein sehr beliebtes Open-Source-Projekt, Lila in einem ganz anderen Kontext sehr erfolgreich einsetzt. Vielleicht haben Open-Source-Projekte mehr Spielraum und halten sich an eine andere Physik. Genial!

Weiß

Dies ist ein weiterer kniffliger Punkt in der Liste. Weiß kann Reinheit, Sauberkeit, Weichheit, Raffinesse, Eleganz, Gottheit, Hochzeiten, Königtum und Positivität im Allgemeinen vermitteln. Auch in anderen Kulturen ist es eindeutig mit Tod und Tragödie zu identifizieren. Weiß und Schwarz können je nach Standort sehr unterschiedliche Bedeutungen haben. Achtung!

Schwarz

Zu guter Letzt das gute alte mysteriöse, sexy und raffinierte Schwarz. Warum so ernstes Schwarz? Es ist industriell, mechanisch und kann auch mit „The End“, Tod und Bösem in Verbindung gebracht werden. Darüber hinaus ist es auch rebellisch.

Ich persönlich denke, dass viele dieser Assoziationen ein bisschen erfunden sind. Aber es liegt an dir! Recherchieren Sie, wenn Sie an einem Projekt arbeiten, besonders wenn es Menschen außerhalb Ihrer kulturellen Komfortzone erreicht, aber viel Salz parat haben. Vor allem viel Spaß und lassen Sie Ihrer Kreativität freien Lauf! Streng nach dem Buch zu entwerfen ist sowieso todlangweilig – und eine sichere Möglichkeit, die Stimmung mit Sicherheit zu zerstören.

Farbrelativität

Lassen Sie mich nur kurz etwas erwähnen, bevor wir uns auf den Weg machen. Farbe wird stark von dem beeinflusst, was sie umgibt. Irgendwann haben wir über kühlere und wärmere Farben gesprochen, aber das ist etwas relativer. Farben können so in Relation zueinander erscheinen. Sie können je nach Umgebung wärmer oder kühler aussehen. Unser menschliches Auge ist da ein bisschen dumm. Sehen Sie, wie sich die Farben unten gegenseitig beeinflussen und wie der graue Rand der inneren Quadrate innerhalb jedes Spektrums unterschiedlich erscheint. Das nennt man Farbrelativität.

In einigen extremen Beispielen können Farben völlig anders aussehen und das menschliche Auge völlig täuschen. Schauen Sie sich diese klassische „Checker Shadow Illusion“ von Edward H. Adelson an:

Ob Sie es glauben oder nicht, die Quadrate "A" und "B" haben tatsächlich die gleiche Farbe. Brauchen Sie einen Beweis?

Verwenden Sie Ihren bevorzugten Farbwähler, um dies zu überprüfen, wenn Sie möchten. Denkanstöße für unterwegs.

Abschließende Gedanken

Farbe kann ein starker Stimmungswandler sein. Nutzen Sie dies zu Ihrem Vorteil oder zu Ihrem Untergang. Dies liegt wirklich an Ihnen, denn es ist eine mächtige Waffe. Nehmen Sie sich Zeit, um mehr zu erfahren, und lassen Sie sich nicht von der schieren Skala vor Ihnen frustrieren. Im Web sollten Sie auf jeden Fall Farbe einsetzen, um eine bestimmte Stimmung zu erzeugen und auch Elemente hervorzuheben, die besonders wichtig sind. Wie bei den Designprinzipien ist weniger mehr. Wird alles farblich hervorgehoben, ragt nichts heraus und man hat am Ende ein ungünstiges Signal-Rausch-Verhältnis.

Verlieren Sie sich jedoch nicht in all dieser Farbtheorie auf einmal! Sie haben ein Leben lang Zeit, um wahrscheinlich nur einen Bruchteil eines vollständigen Verständnisses zu erreichen. Machen Sie es sich bequem und genießen Sie die Fahrt! Sobald Sie Ihre Augen für dieses ganze Thema geöffnet haben, werden Sie die Welt durch eine andere Linse sehen.