Färger har sina egna naturliga vikter. Gult är en naturligt “lättare” färg, medan blått och rött anses vara naturligt “tyngre”.
Mörkare färger i allmänhet uppfattas som tyngre. Ju mer skugga en färg har (vilket innebär att ju mer svart som läggs till i en färg), desto tyngre framstår den som tyngre. Ju mer nyans en färg har (vilket innebär att ju mer vitt som läggs till i en färg), desto ljusare framstår den. Färgerna nedan tillhör samma nyans (grön respektive lila), men har olika nyanser och toningar.
Desto mer mättad en färg är, desto tyngre verkar den.
Nu, vad betyder detta och hur påverkar det dina konstruktioner? Enkelt uttryckt…
En fin fallstudie för all denna teori ovan visas nedan. Alla texturer, former och färger kan inte konkurrera med den fullt mättade röda Play-knappen i mitten (den radiella balansen hjälper också till). Dessutom hjälper den suddiga bakgrunden till att dra fokus mot skärmen. Lägg märke till att ballongens skuggade färger inte tar bort uppmärksamheten från knappen. De nedre knapparna i ljusare färger, turkos och gul, konkurrerar inte och är tydligt sekundära. Bra jobbat, Airdrop UI designers!
Konsultera designen nedan härnäst. Tre rader text jämfört med en enda rad som innehåller en prislapp. Vilket element drar ditt öga mest till sig? Bingo! Den ultramörka nyansen överröstar tydligt den ljusa typen och balanserar också snyggt de 3 raderna jämfört med 1 rad med hjälp av färg. Lägg märke till att det finns en fin assymetrisk balans mellan vänster och höger sida i denna design också, men det är för ett annat inlägg 🙂
Det är en tungviktstävling i denna nästa design! Den starkt mättade varmrosa bakgrunden konkurrerar lite med det mörka elementet i mitten, som sticker ut tack vare sin centrerade position och sin tunga vikt (i fråga om nyanser). Det är mycket som händer i bakgrunden (och webbplatsen har rörelse ovanpå allt detta), men trots all textur och alla upprepade mönster i bakgrunden har ögat fortfarande ett tydligt fokus. Bra jobbat.
Klipp på kompositionen nedan. Kan du se att paret i rött och gult har en mycket starkare visuell dragningskraft på ditt öga än paret till vänster, och till och med grillen blir en sekundär fokuspunkt på grund av den röda nyansen? De gröna färgerna kan inte konkurrera med dessa starka färger. Faktum är att det finns lite av en visuell konkurrens mellan den röda skjortan och grillen och den röda ikonen. Det är något som designern kanske vill överväga och eventuellt åtgärda genom att lätta upp skjortan och mätta ikonen lite (det skulle i alla fall vara mitt förslag 🙂 På den levande webbplatsen finns det förstås en animation till ikonen som uppmanar besökaren att ägna mer uppmärksamhet åt ikonen: http://yadrenakopot.ru/
Så, det är din snabbguide till hur färgvikt påverkar UI-design. Jag hoppas att du tar hänsyn till färgvikter i din nästa design som bara ett av de många verktygen i din designers verktygslåda.