Väreillä on omat luonnolliset painonsa. Keltainen on luonnostaan “kevyempi” väri, kun taas sinistä ja punaista pidetään luonnostaan “raskaampina”.
Tummemmat värit koetaan yleisesti ottaen raskaammiksi. Mitä enemmän värissä on sävyjä (eli mitä enemmän väriin on lisätty mustaa), sitä raskaammaksi se koetaan. Mitä enemmän värissä on sävyä (eli mitä enemmän väriin on lisätty valkoista), sitä vaaleammalta se vaikuttaa. Alla olevat värit kuuluvat samaan sävyyn (vihreä ja violetti), mutta niillä on eri sävyjä ja sävyjä.
Mitä täyteläisempi väri on, sitä raskaammalta se näyttää.
Mitä tämä nyt tarkoittaa ja miten se vaikuttaa muotoiluusi? Yksinkertaisesti sanottuna…
Kiva tapausesimerkki kaikesta edellä mainitusta teoriasta on esitelty alla. Kaikki tekstuurit, muodot ja värit eivät pysty kilpailemaan keskellä olevan täysin kylläisen punaisen Play-painikkeen kanssa (säteittäinen tasapaino auttaa myös). Myös sumea tausta auttaa vetämään huomion kohti näyttöä. Huomaa, että ilmapallon varjostetut värit eivät vie huomiota pois painikkeesta. Vaaleammilla väreillä, turkoosilla ja keltaisella, varustetut alimmat painikkeet eivät kilpaile keskenään ja ovat selvästi toissijaisia. Hyvin tehty, Airdrop UI:n suunnittelijat!
Harkitse seuraavaksi alla olevaa suunnittelua. 3 riviä tekstiä verrattuna yhteen riviin, joka sisältää hintalapun. Mihin elementtiin katseesi kiinnittyy eniten? Bingo! Erittäin tumma sävy peittää selvästi vaalean tyypin ja myös tasapainottaa hienosti 3 riviä vs. 1 rivi käyttämällä väriä. Huomaa, että myös tämän mallin vasemman ja oikean puolen välillä on hieno assymetrinen tasapaino, mutta se on toista postausta varten 🙂
Kovaa painokilpailua tässä seuraavassa mallissa! Voimakkaasti kyllästetty kuumanpunainen tausta kilpailee hieman keskellä olevan tumman elementin kanssa, joka erottuu keskitetyn sijaintinsa ja raskaan painonsa ansiosta (sävyjen suhteen). Taustalla tapahtuu paljon (ja kaiken lisäksi sivustolla on liikettä), mutta kaikesta taustan tekstuurista ja toistuvasta kuvioinnista huolimatta silmällä on silti selkeä fokus. Hyvää työtä.
Katso alla olevaa sommitelmaa. Voitko vain todeta, että punakeltaisella pariskunnalla on paljon voimakkaampi visuaalinen vetovoima silmääsi kuin vasemmalla olevalla pariskunnalla, ja jopa grillistä tulee toissijainen polttopiste punaisen sävyn takia? Vihreät eivät pysty kilpailemaan näiden voimakkaiden värien kanssa. Itse asiassa punaisen paidan ja grillin ja punaisen kuvakkeen välillä on hieman visuaalista kilpailua. Suunnittelija voisi harkita tätä ja mahdollisesti puuttua siihen vaalentamalla paitaa ja kyllästämällä kuvaketta hieman (se olisi joka tapauksessa minun ehdotukseni 🙂 Tietenkin elävällä sivustolla kuvakkeessa on animaatio, joka kannustaa kävijää kiinnittämään enemmän huomiota kuvakkeeseen: http://yadrenakopot.ru/
Siinä siis pikaoppaasi siitä, miten värien painotus vaikuttaa UI-suunnitteluun. Toivottavasti otat väripainot huomioon seuraavassa suunnittelussasi vain yhtenä monista työkaluista suunnittelijasi työkalupakissa.