Advertisement
  1. Web Design
  2. Color Theory
Webdesign

Zašto biste trebali izbjegavati kombinacije vibrantnih boja

by
Length:ShortLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

U ovom kratkom članku naučiti ćete kako vibracije boja utječu na čitljivost sučelja u web dizajnu.

Smiono ili prekričavo?

Među dizajnerima sučelja postoji sklonost imitiranja kričavih shema boja, koje često možemo primijetiti na dizajnu za tisak. Dok se jednim dijelom pojavljuje prilikom ideoloških trendova, ovaj poriv također proizlazi iz novonastalog reda tipografija dostupnih modernom dizajneru, što rezultira sučeljem izgleda poput tiska i velikim slovima. Bitno je primijetiti razlike između svakog medija, jer su vibrantne boje nekako više dozvoljene za tisak, i manje za web.

Vibrantne boje na Frooti's web stranici

U tisku, korištenje sheme smionih boja često znači razliku između biti ignoriran na polici magazina, i dobro se prodavati. S druge strane, u korisničkom sučelju smatramo da nešto drugo ima prednost pred privlačenjem pažnje korisnika na silu, a to je, konkretno, čitljivost teksta. 

Što je vibracija?

Jedan od primarnih fenomena koji proizlazi iz shema jako zasićenih boja je prividno "vibrantna" boja, pojava u kojoj rubovi dviju susjednih boja izgledaju kao da se stapaju, zamagljuju i sjaje, uz iluziju kretanja.

Dva vanjska primjera imaju tekst vibrantnih boja, dok je tekst na srednjem primjeru jednake svjetline.

Josef Albers, priznati teoretičar boja, upozorio je protiv korištenja vibrantnih boja u njegovom klasiku, Interactions of Color (Interakcija boja):

"Ovaj inicijalno uzbudljiv efekt je također agresivan i često jednako neugodan za oči. Rijetko je korišten osim za vrišteći efekt u reklamiranju, i kao rezultat je neugodan, nimalo lijep, i izbjegavan."

Za dvije slabije vidljive boje koje su smještene jedna do druge, izuzetno je važno da budu jednake svjetline te da imaju sličnu svjetlinu sjaja. Međutim, da vidljivo vibriraju, boje će općenito biti visoko zasićene i komplementarne jedna drugoj, pomaknute otprilike 180° na krugu boja.

Plava (HSB 210, 99, 100) na crvenoj 

Na primjeru iznad, crvena i plava nijansa mogu se naći na suprotnim stranama kruga boja (iako ne direktno nasuprot) i obje imaju svjetlinu sjaja od 100.

Spotify EDM
Spotify EDM

Spotify je postao sinonim smionih shema boja, korištenih sa odličnim efektima da privuče pažnju. Ponekad te kombinacije mogu biti odbojne, čak i ako nisu toliko vibrantne u punom smislu; kao što je, na primjeru iznad, gumb u odnosu na ljubičastu pozadinu. Oči korisnika će prepoznati što je to, ali neki bi se mogli mučiti kako bi odredili vanjske rubove oblika.

Čitljivost

Tekst sučelja je značajno ograničen kada je smješten u vibrantnu boju jednake jačine svjetlosti. Posebno sam odabrao ove vibrantne boje:

Kada nastupi vibracija boja, element koji će najviše biti pogođen efektom izobličenog sjaja je rub između dvije boje. Upravo iz tog razloga je vibracija posebno opasna kada se radi o fontovima korisničkog sučelja, malim ikonama i ostalim elementima s detaljima koji nisu dovoljno veliki da kompenziraju mutne vibrantne rubove.

Ovdje je isti set swatcheva, ovaj puta prikazan na način kako ga vide daltonisti:

Osim često iritirajuće vibrantnih i mutnih boja za one koji ih normalno vide, ako pokažete boje jednake svjetlosti daltonistima, moguće je da ih uopće neće vidjeti. Pošto postoji mnogo stupnjeva daltonizma, kada se radi o dostupnosti, najbolje je igrati sigurno.

Ovdje, na primjer, ikona za otpad na Apple Watch-u daltonistima nije vidljiva .

Normalna vidljivost boje (lijevo) naspram slijepoće boja kod daltonizma (desno)

Zaključak

Vibrantne boje mogu biti korištene za dobar efekt, ali što se tiče korisnosti, predstavljaju pravu opasnost u korisničkim sučeljima, te mogu biti nespretne ukoliko nisu unaprijed odabrane namjerno i sa određenim smislom. Imajte to na umu prilikom dizajniranja!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.