Designjargon erklärt: 6 Farbschemata
Sie können Farben beliebig kombinieren… aber auch der Typ auf der Straße, den alle anstarren, weil sein Outfit wie ein Weihnachtsbaum aussieht. Unser Punkt ist, dass einige Farbkombinationen besser sind als andere, und zu wissen, welche Werke Ihre künstlerische Lizenz nicht beeinträchtigen, sondern verbessern.
Wie wir im kostenlosen eBook beschrieben haben Webdesign für das menschliche Auge Die richtige Farbauswahl lenkt die Aufmerksamkeit auf den Hauptinhalt auf dem Bildschirm und gleicht gleichzeitig die Größe und die räumlichen Beziehungen der Elemente aus.
Nachfolgend haben wir einige der gängigsten und erfolgreichsten Farbschemata aufgelistet, um sicherzustellen, dass Ihre Website optimal gekleidet ist.
01. Monochromatisch
Das grundlegendste Farbschema ist dennoch effektiv.
Ein monochromatisches Schema verwendet nur eine dominante Farbe oder verschiedene Schattierungen derselben Farbe, die sich gut ergänzen. Monochromatische Schemata sehen optisch ansprechend aus und verstärken die emotionalen Reaktionen der betreffenden Farbe. Es kann jedoch schwierig sein, bestimmte Elemente voneinander zu unterscheiden.
Monochromatische Farbschemata sind in ziemlich häufig minimalistisches Design da sie natürlich den Inhalt betonen und selbst die einfachsten Schriften fett und dramatisch erscheinen lassen.
Tatsächlich fügen sich minimale und monochromatische Designs gut ineinander ein: Beide betonen ein oder zwei einzelne Elemente, beide suggerieren von Natur aus ein Thema der Eleganz und beide schaffen eine einfache, weniger ablenkende Oberfläche.
Aufwachen verwendet ein blaues monochromatisches Schema mit weißen Schnörkeln. Ihr dominanter blauer Hintergrund - mit einem mittleren Farbton, der für die Eigenschaften von Hell- und Dunkelblau repräsentativ ist - unterstreicht die Beziehung der Farbe zu Freundlichkeit und Professionalität, eine perfekte Wahl für ein Unternehmen, das Geschäftskommunikation und Zusammenarbeit unterstützt.
Das Hinzufügen einer anderen Konkurrenzfarbe würde diese Nachricht nur verwässern, sodass ein monochromatisches Schema den einen zentralen Eindruck hervorhebt, den sie machen möchten.
Beachten Sie die verschiedenen Blautöne in der obigen Navigationsleiste und in der Schaltfläche 'Video abspielen', um diese Elemente zu trennen, ohne vom Farbthema abzuweichen.
02. Analog
Analoge Farbschemata basieren auf Farben, die im Farbschema nebeneinander liegen. Dadurch entsteht ein attraktiveres Design, das die Augen schont.
Analoge Themen bieten mehr Vielfalt als monochromatische Themen, was die Unterscheidung von Elementen erleichtert, obwohl sie nicht so viel Aufmerksamkeit erregen wie Websites, die stark auf Komplementärfarben angewiesen sind.
Stattdessen fühlen sich Websites mit analogen Farbschemata beruhigender und harmonischer an, und es ist keine Überraschung, dass diese Farbkombination häufig in der Natur vorkommt.
Bei der Verwendung eines analogen Farbschemas für das Webdesign wählen Designer häufig eine Farbe als die dominanteste. Die emotionalen Verbindungen dieser Farbe werden die stärksten sein und die anderen überschatten. Eine zweite Farbe ist genau das: sekundär. Es wird verwendet, um bestimmte Elemente zu unterscheiden, oder für Schriftarten. Wenn eine dritte Farbe verwendet wird, dient sie häufig nur zur Akzentuierung.
Im obigen Beispiel ist die dominierende Farbe eindeutig ein leicht dunkler Gelbton, der einen anregenden und freundlichen Ton abgibt. Die Sekundärfarbe, ein Rot-Orange-Hybrid, setzt dieses Thema fort, obwohl es deutlich genug ist, damit Benutzer den Text klar lesen können.
Beachten Sie, dass bei einem Wechsel von Rot und Gelb die Website einen weitaus aggressiveren und anregenderen Ton annehmen würde, da das Rot die emotionale Verbindung dominieren würde.
03. Ergänzend
Ein komplementäres Farbschema nutzt entgegengesetzte Farben und erzeugt eine dynamische und emotional anregende Seite. Der Vorteil dieses Schemas besteht darin, dass sich die Elemente deutlich voneinander unterscheiden und ein sofort nachvollziehbares Layout erstellen. Seine intensive Natur kann jedoch gegen Sie wirken, wenn Sie eine entspanntere Atmosphäre anstreben.
Genau wie bei analogen Farbschemata dominiert eine Farbe, während eine andere sekundär ist, wobei die dominante Farbe den größten Teil des Tons bestimmt. Vermeiden Sie bei der Verwendung von Ergänzungsmitteln entsättigte Farben, da diese die Wirksamkeit schwächen.
Gut spielt stark im Kontrast für ihre Website. Ein rot-orangefarbener Hintergrund dominiert und setzt einen verspielten und energiegeladenen Ton, während die blaugrüne Sekundärfarbe die anklickbaren Navigationsoptionen, den Markennamen und die grafischen Schnörkel markiert.
Wie in erklärt Webdesign für das menschliche Auge Das Auge tanzt von Element zu Element auf dem Bildschirm und lässt sich nie lange an einem Ort nieder.
Dieser Effekt wird durch die bewegten Bilder verstärkt, die den Bildschirm von unten nach oben nach oben schieben und so noch mehr Augenweide erzeugen. Beachten Sie, wie der Rand die Farbe wechselt, wenn das Bild durch ihn hindurchgeht.
04. Triade
Die Triade ist das sicherste Farbschema und implementiert drei perfekt ausbalancierte Farben, die durch ein gleichseitiges Dreieck am Rad verbunden sind.
Das Triadenschema ist zwar vielfältiger als die ein- oder zweifarbigen Themen, aber immer noch das grundlegendste der Farbschemata mit drei oder mehr Farben. Triadic-Programme gehen kein Risiko ein, um ein visuell sicheres Erscheinungsbild der Website zu erzielen, bieten jedoch keine herausragende Belohnung außer Sicherheit und einer gewissen Vielfalt.
Viele Designer halten dies für das beste Farbschema, obwohl es wirklich vom Projekt abhängt. Das Triadenschema ist eine ausgezeichnete Wahl für Websites, die ein breites Spektrum von Nutzern ansprechen: Seine Sicherheit macht es zu einem 'Publikumsmagneten', aber mit genügend Vielfalt und Kreativität, um zu verhindern, dass es langweilig erscheint.
Das Fehlen direkter Gegensätze macht es jedoch schwieriger, die Aufmerksamkeit auf ein einzelnes Element gegenüber anderen zu lenken (wie ein Aufruf zum Handeln), und ebenso bedeutet die Stabilität, dass es schwierig ist, es „nervös“ zu machen, ein Stil, der sich für Orte in der Mode eignet , Musik usw.
Als ein Ort, der hilft, Menschen vor Arztbesuchen zu beruhigen, ist die Sicherheit und Stabilität eines Triadenschemas perfekt für DocReady . Die Verwendung von Pastellfarben fördert auch dieses Thema der Sicherheit.
Die Wahl zwischen Rot, Gelb und Türkis ist im Triadenschema üblich, obwohl auf dieser Seite das Türkis dominiert und eine ruhigere Stimmung fördert als das anregendere Rot oder Gelb.
Beachten Sie die Verwendung von Rot für die Schaltfläche 'Über uns', die die Klickbarkeit im Vergleich zu den weißen Radierungen um sie herum signalisiert.
05. Split-komplementär
Das Split-Komplementär-Farbschema hat die Aufmerksamkeit des grundlegenden Komplementärschemas, jedoch mit der zusätzlichen Vielfalt einer zusätzlichen Farbe.
Dies schafft eine fundiertere Site, als wenn Sie eine intensive Ergänzung verwenden würden, während Sie dennoch eine kreativere Verwendung von Farben ermöglichen. Auch die Flexibilität der dritten Farbe eröffnet viele neue Gestaltungsmöglichkeiten.
Wenn Sie heutzutage im Internet surfen, sehen Sie einen Großteil des Split-Complementary-Themas. Am häufigsten wird eine Site mit dominanten Schwarz- und Weißtönen verwendet, wobei ein Spritzer einer dritten Farbe sparsam verwendet wird, um ein einzelnes Element hervorzuheben (normalerweise ein aufmerksamkeitsstarkes Rot oder Grün).
Dies funktioniert gut, ist aber eher simpel. Für einen stilisierteren Look können drei Primärfarben sowohl visuell als auch emotional mehr Tiefe verleihen, sind jedoch schwieriger anzuwenden.
Auf den ersten Blick, Shopify-Handelsbericht 2014 erscheint möglicherweise nicht bunt - was ein Zeichen für die geschickte Anwendung von Farbe ist. Der Text und die Grafiken sind wirklich dunkelblau, aber dank der ergänzenden gelblichen Creme im Hintergrund erscheinen sie fast schwarz.
(Der gelbe Hintergrund lässt das Dunkelblau noch dunkler erscheinen - und da es bereits ziemlich dunkel ist, hat es in unserer Wahrnehmung keinen anderen Ort als näher an Schwarz.)
Um eine ansonsten dualistische Szene aufzubrechen, fungiert das Grün im Haupttitel als visuelles Herzstück, das die beiden Komplementärfarben miteinander verbindet und ein einheitliches Bild schafft.
Dies zeigt den Unterschied zwischen Split-Complementary und Basic Complementary - ein zusätzliches Element, um einen Teil des „Stichs“ herauszunehmen und den gesamten Bildschirm zu stabilisieren.
06. Rechteckige Tetrade (zusammengesetzte Ergänzung)
Als eines der komplizierteren Farbschemata lohnt sich das rechteckige tetradische Schema, wenn es richtig gemacht wird.
Es besteht aus zwei sich ergänzenden Farbpaaren, die die anregende Darstellung der Gegensätze ermöglichen und gleichzeitig die Vielfalt der vier Hauptfarben genießen. Das Design wirkt geerdet und stabil, aber in bestimmten Bereichen ist es verlockender als in anderen. Aufgrund der Komplexität kann es auch schwierig sein, dieses Schema gut anzuwenden.
Bei der Auswahl der Farben ist besondere Vorsicht geboten. Versuchen Sie in der Regel, die Verwendung von warmen Farben (rot, orange und gelb) und kühlen Farben (blau und lila) auszugleichen.
Die Homepage für Formlets hat einen wahren Regenbogen von Farben - zwei Schattierungen pro Stück für Rot, Gelb, Grün, Blau und Schwarz sowie eine hohe Dosis Weiß - obwohl es durch die richtige Anwendung ziemlich einfach erscheint.
Während hier auf Expertenebene viel Farbe verwendet wird, werden wir zunächst nur auf die Farben der Gesichter auf der rechten Seite hinweisen: Rot, Gelb, Grün, Blau und Schwarz. Diese Farbauswahl ist nicht zufällig, sondern spielt sowohl die rot-grünen als auch die gelb-blauen natürlichen Ergänzungen aus.
Die Verteilung selbst erfolgt gekonnt - es gibt jeweils nur zwei der roten und schwarzen Gesichter, da diese beiden Farben stärker sind als die anderen und die Szene dominieren würden, wenn es mehr gäbe.
Fazit
Farbschemata reichen von einfach bis komplex. Sie können also frei wählen, welches Gebäude für Sie am bequemsten ist oder zu Ihrer Site passt. Wenn Sie mit flachem Design experimentieren, können ein- oder zweifarbige Schemata sehr gut funktionieren, z. B. monochromatisch, analog oder komplementär.
Wenn Sie jedoch viele Elemente haben, die Sie unterscheiden möchten, versuchen Sie es mit vier, fünf oder mehr Farben: Auf diese Weise können Sie jedem einzelnen Element eine einzelne Farbe zuordnen und ein Muster erstellen, das einen großen Einfluss auf die Lernbarkeit des Benutzers hat.
In unserem kostenlosen 85-seitigen E-Book erfahren Sie mehr darüber, wie Sie die Farbtheorie (und andere Disziplinen) beherrschen, um beim Benutzer den stärksten ersten Eindruck zu hinterlassen Web-UI-Design für das menschliche Auge . Beispiele werden von 33 Unternehmen analysiert, darunter Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom und Bose.
Wörter : Jerry Cao
Jerry Cao ist Content-Stratege bei UXPin - die Wireframing- und Prototyping-App - wo er In-App- und Online-Inhalte für die Wireframing- und Prototyping-Plattform entwickelt.
So was? Lese das!
- Designjargon erklärt
- Wie wähle ich a Farbschema für Ihr Logo-Design
- Kostenlose Grafikdesign-Software steht Ihnen jetzt zur Verfügung!
