Kleuren hebben hun eigen natuurlijke gewichten. Geel is van nature een “lichtere” kleur, terwijl blauw en rood van nature als “zwaarder” worden beschouwd.
Donkerdere kleuren worden in het algemeen als zwaarder ervaren. Hoe meer tint een kleur heeft (dat wil zeggen, hoe meer zwart aan een kleur is toegevoegd), hoe zwaarder hij lijkt. Hoe meer tint een kleur heeft (d.w.z. hoe meer wit er aan een kleur is toegevoegd), hoe lichter hij overkomt. De onderstaande kleuren behoren tot dezelfde tint (respectievelijk groen en paars), maar hebben verschillende tinten en schakeringen.
Hoe verzadigder een kleur is, hoe zwaarder hij lijkt.
Nu, wat betekent dit en hoe heeft dit invloed op uw ontwerpen? Simpel gezegd…
Een mooie casestudy voor al die bovenstaande theorie ziet u hieronder. Alle texturen, vormen en kleuren kunnen niet concurreren met de volledig verzadigde rode Play-knop in het midden (de radiale balans helpt ook). Ook de onscherpe achtergrond helpt om de aandacht naar het scherm te trekken. Merk op dat de schaduwkleuren van de ballon de aandacht niet afleiden van de knop. De onderste knoppen in lichtere kleuren, turkoois en geel, concurreren niet en zijn duidelijk secundair. Goed gedaan, Airdrop UI ontwerpers!
Kijk nu eens naar het onderstaande ontwerp. 3 regels tekst versus een enkele regel met een prijskaartje. Naar welk element wordt uw oog het meest getrokken? Bingo! De ultradonkere tint overheerst duidelijk het lichte type en zorgt ook voor een mooi evenwicht tussen de 3 regels en de 1 regel door het gebruik van kleur. Merk op dat er ook een mooie assymetrische balans is tussen de linker- en rechterkant van dit ontwerp, maar dat is voor een andere post 🙂
Het is een zwaargewicht competitie in dit volgende ontwerp! De zwaar verzadigde warmroze achtergrond concurreert een beetje met het donkere element in het midden, dat opvalt door zijn gecentreerde positie en zware gewicht (qua tint). Er is veel aan de hand op de achtergrond (en de website heeft ook nog eens beweging), maar ondanks alle textuur en het herhaalde patroon van de achtergrond, heeft het oog toch een duidelijke focus. Mooi werk.
Kijk eens naar de compositie hieronder. Kun je gewoon zien dat het paar in het rood en geel een veel sterkere visuele aantrekkingskracht op je oog heeft dan het paar links, en dat zelfs de grill een secundair aandachtspunt wordt door de rode tint? Het groen kan niet concurreren met deze sterke kleuren. In feite is er een beetje een visuele concurrentie tussen het rode shirt en de grill en het rode pictogram. Dat is iets wat de ontwerper zou kunnen overwegen en eventueel aanpakken door het shirt lichter te maken en het pictogram wat meer te verzadigen (dat zou mijn suggestie zijn, in ieder geval 🙂 Natuurlijk is er op de live site een animatie bij het pictogram die de bezoeker aanspoort om meer aandacht aan het pictogram te besteden: http://yadrenakopot.ru/
Dus, dat is je beknopte handleiding voor hoe kleurgewicht UI-design beïnvloedt. Ik hoop dat u bij uw volgende ontwerp rekening houdt met het kleurgewicht als een van de vele hulpmiddelen in uw ontwerpgereedschapskist.