Farver har deres egne naturlige vægte. Gul er en naturligt “lettere” farve, mens blå og rød betragtes som naturligt “tungere”.
Dunkle farver opfattes generelt som tungere. Jo mere skygge en farve har (hvilket betyder, at jo mere sort der er tilsat i en farve), jo tungere virker den. Jo mere nuance en farve har (hvilket betyder, jo mere hvidt der er tilsat til en farve), jo lysere virker den. Farverne nedenfor tilhører den samme farvetone (henholdsvis grøn og lilla), men har forskellige nuancer og nuancer.
Desto mere mættet en farve er, jo tungere fremstår den.
Nu, hvad betyder dette, og hvordan påvirker det dine designs? Simpelthen sagt …
Et fint casestudie for al den ovenstående teori er vist nedenfor. Alle teksturer, former og farver kan ikke konkurrere med den fuldt mættede røde Play-knap i midten (den radiale balance hjælper også). Desuden er den slørede baggrund med til at trække fokus mod skærmen. Læg mærke til, at ballonens skraverede farver ikke fjerner opmærksomheden fra knappen. De nederste knapper i lysere farver, turkis og gul, konkurrerer ikke med hinanden og er klart sekundære. Godt gået, Airdrop UI-designere!
Opmærksomt design nedenfor næste. 3 linjer tekst i forhold til en enkelt linje med et prisskilt. Hvilket element er dit øje mest tiltrukket af? Bingo! Den ultra mørke nuance overdøver klart den lyse type og afbalancerer også fint de 3 linjer vs. den 1 linje ved hjælp af farve. Læg mærke til, at der også er en fin assymetrisk balance mellem venstre og højre side af dette design, men det er til et andet indlæg 🙂
Det er en sværvægtskonkurrence i dette næste design! Den stærkt mættede lyserøde baggrund konkurrerer en smule med det mørke element i midten, som skiller sig ud takket være sin centrerede placering og sin tunge vægt (med hensyn til nuancer). Der sker meget i baggrunden (og hjemmesiden har bevægelse oven i alt det), men på trods af al den tekstur og det gentagne mønster i baggrunden har øjet stadig et klart fokus. Nice work.
Kig på kompositionen nedenfor. Kan du bare se, at parret i rødt og gult har et meget stærkere visuelt træk på dit øje end parret til venstre, og selv grillen bliver et sekundært fokuspunkt på grund af den røde nuance? De grønne farver kan ikke konkurrere med disse stærke farver. Faktisk er der lidt af en visuel konkurrence mellem den røde skjorte og grill og det røde ikon. Det er noget, som designeren måske vil overveje og eventuelt løse ved at lysne skjorten og mætte ikonet en smule (det ville i hvert fald være mit forslag 🙂 På det levende websted er der naturligvis en animation til ikonet, der opfordrer den besøgende til at være mere opmærksom på ikonet: http://yadrenakopot.ru/
Så, det er din hurtige guide til, hvordan farvevægt påvirker UI-design. Jeg håber, at du tager farvevægte i betragtning i dit næste design som blot et af de mange værktøjer i din designer-værktøjskasse.