Farben haben ihre eigenen natürlichen Gewichte. Gelb ist von Natur aus eine “leichtere” Farbe, während Blau und Rot von Natur aus als “schwerer” gelten.
Dunklere Farben werden im Allgemeinen als schwerer empfunden. Je mehr Schattierung eine Farbe hat (d.h. je mehr Schwarz einer Farbe beigemischt ist), desto schwerer erscheint sie. Je mehr Tönung eine Farbe hat (d. h. je mehr Weiß zu einer Farbe hinzugefügt wird), desto heller erscheint sie. Die folgenden Farben gehören zum gleichen Farbton (Grün bzw. Violett), haben aber unterschiedliche Tönungen und Schattierungen.
Je gesättigter eine Farbe ist, desto schwerer erscheint sie.
Nun, was bedeutet das und wie wirkt es sich auf Ihre Entwürfe aus? Einfach ausgedrückt…
Eine schöne Fallstudie für all die obige Theorie wird unten gezeigt. All die Texturen, Formen und Farben können nicht mit der voll gesättigten roten Play-Taste in der Mitte konkurrieren (die radiale Ausgewogenheit hilft ebenfalls). Auch der unscharfe Hintergrund trägt dazu bei, den Fokus auf den Bildschirm zu lenken. Beachten Sie, dass die schattierten Farben des Ballons die Aufmerksamkeit nicht von der Schaltfläche ablenken. Die unteren Schaltflächen in helleren Farben, Türkis und Gelb, konkurrieren nicht und sind eindeutig zweitrangig. Gut gemacht, Airdrop UI-Designer!
Betrachten Sie als nächstes das folgende Design. 3 Zeilen Text im Vergleich zu einer einzigen Zeile mit einem Preisschild. Welches Element zieht Ihr Auge am meisten an? Bingo! Der ultradunkle Farbton überstrahlt eindeutig die helle Schrift und sorgt außerdem für ein schönes Gleichgewicht zwischen den 3 Zeilen und der 1 Zeile durch die Verwendung von Farbe. Beachten Sie auch, dass es eine schöne assymetrische Balance zwischen der linken und der rechten Seite dieses Designs gibt, aber das ist ein Thema für einen anderen Beitrag 🙂
Das nächste Design hat es in sich! Der stark gesättigte pinkfarbene Hintergrund konkurriert ein wenig mit dem dunklen Element in der Mitte, das durch seine zentrierte Position und sein hohes Gewicht (in Bezug auf den Farbton) hervorsticht. Es gibt eine Menge los im Hintergrund (und die Website hat Bewegung auf all das), aber trotz all der Textur und wiederholte Muster des Hintergrunds, das Auge hat immer noch einen klaren Fokus. Gute Arbeit.
Werfen Sie einen Blick auf die folgende Komposition. Können Sie erkennen, dass das Paar in Rot und Gelb eine viel stärkere Anziehungskraft auf Ihr Auge ausübt als das Paar auf der linken Seite, und sogar der Grill wird durch den roten Farbton zu einem sekundären Brennpunkt. Die Grüntöne können mit diesen kräftigen Farben nicht mithalten. Es besteht sogar ein gewisser visueller Wettbewerb zwischen dem roten Hemd und dem Grill und dem roten Symbol. Das ist etwas, das der Designer vielleicht in Betracht ziehen und möglicherweise angehen sollte, indem er das Hemd aufhellt und das Symbol etwas satter macht (das wäre jedenfalls mein Vorschlag 🙂 Natürlich gibt es auf der Live-Site eine Animation zum Symbol, die den Besucher dazu anregt, dem Symbol mehr Aufmerksamkeit zu schenken: http://yadrenakopot.ru/
So, das ist Ihr kurzer Leitfaden, wie sich die Farbgewichtung auf das UI-Design auswirkt. Ich hoffe, dass Sie bei Ihrem nächsten Entwurf die Farbgewichtung als eines der vielen Werkzeuge in Ihrem Designer-Toolkit in Betracht ziehen werden.