() translation by (you can also view the original English article)
Još uvijek se živo sjećam jednog od mojih najranijih satova likovnog odgoja kada mi je kao malome, željnome dijetetu pokazan niz jarkih boja. Sjećam se ushita kada sam prvi put vidio kako se primarne boje mješanjem pretvarju u sekundarne boje i kako sam razmišljao, ako dvije boje mogu napraviti prekrasnu novu boju, sve boje zajedno bi trebale dati nešto još bolje! Bilo je potpuno razočaravajuće shvatiti da bez obzira kako ih mješao, ako upotrijebim sve boje koje su mi na raspolaganju neizbježno ću na kraju dobiti boju koja bi se jedino bogla nazvati "BLJAK".
Godinama kasnije, kao web dizajner u nastajanju, ponovno sam doživio sličan proces. Kako sam učio, upao sam u nezaobilaznu zamku korištenja previše boja ili njihovog kombiniranja na krivi način, samo kako bih dobio nešto pomalo "BLJAK".
Počeo sam učiti kako kreirati sheme boja za web i naučio mnogo zanimljivih informacija o teoriji boja. Čitao sam o nijansama, tonovima, zajenjenosti, zasićenosti i jasnoći, kao i o analognim shemama, monokromatskim shemama, triadnim shemama, komplementarnim shemama i shemi složenih boja.
No bez praktičnog okvira u koji sam mogao uklopiti te informacije, otkrio sam da u početku me to nije dovelo puno bliže kreiranju kvalitetno obojenog web dizajna. Zapravo, tek nakon što sam počeo kreirati jednobojne sheme, kroz pokušaje i pogreške, sve teorije boja koje sam čitao počele su imati smisla.
U tom procesu sam naučio neke "smjernice sigurnosti " za sheme boja web stranica za koje bih volio da sam ih znao u početku. Kada započinjete, potpuna teorija boja nije ono što odmah trebate. Često trebate započeti sa nečim malo manje teoretskim i više "korak po korak".
U ovom tutorijalu, sa vama ću podijeliti šest sigurnih, "ne možete pogriješiti" smjernica koje možete slijediti kako biste dobili osnovno shvaćanje o radu sa bojama u web dizajnu Ovo nisu pravila, jer ćete u svojoj karijeri kreirati mnogo shema boja koje će ići u potpuno različitom pravcu. To je više početna točka, sigurnosni vodič za preživljavanje vaših prvih iskoraka u svijet web dizajna bez da ikada naletite na "BLJAK".
1. Shema boja je platno, a ne slika
Jedan od najosnovnijih principa web dizajna je to da bez obzira koliko ste vremena portošili na kreiranje izvrsnog dizajna, njegova je krajnja uloga biti druga violina pravoj zvijezdi predstave, sadržaju. Vaša shema boja nikada ne bi trebala dizajn učiniti "glasnijim" od sadržaja koji on prezentira. Vaš dizajn bi trebao biti u pozadini, pomažući da se sadržaj stranice istakne u prvi plan.
Vrlo česti proces u web dizajnu je da se sam dizajn kreira u relativnoj izolaciji, često u programima kao što su Photoshop ili Sketch. Ako nemate primjerak sadržaja, lako se dogodi da napravite dizajn koji sam po sebi izgleda odlično i da se klijentu sviđa maketa, no koji u praksi previše odvlači pažnju posjetitelja. Zapravo, proces web dizajna je tako čvrsto povezan sa sadržajem da mnogi visokokvalitetni web dizajni izgledaju skoro prazni bez sadržaja.
Odlična je ideja započeti sa uzorkom vrste sadržaja za koji očekujete da će se pojavljivati na stranici, bilo u dizajnerskom programu ili odmah u kodu, i zatim dizajnirati oko njega. To je posebno slučaj ako su uključene fotografije ili slike, kako bi se vaš dizajn skladno uklapao s njima. Zamislite da je sadržaj web stranice jedinstvena osoba za koju morate sašiti odijelo koje joj savršeno pristaje.
2. Započnite sa jednostavnom osnovom u sivim tonovima
Postoji beskonačan broj kombinacija boja koje možete izabrati za vašu glavnu pozadinu i bazu teksta. Ipak, moja je preporuka da započnete svladavanjem najlakše, a to je bijela i/ili svjetlo siva u pozadini u kombinaciji sa tamno sivim tekstom.
Ako pogledate bilo koji izbor popularnih web stranica, predložaka ili tema, velika je mogućnost da će većina njih imati upravo tu bazu tamno sivog teksta na bijelom ili svijetlo sivom i to je zbog dobrog razloga. Ova kombinacija praktički garanitra čitljivost posjetiteljima i omogućava da sadržaj koji se zasniva na tekstu i slikama bude u prvom planu.
Skicirajte osnovni raspored u sivim nijansama koristeći primjerke sadržaja, na primjer:
Govoreći općenito, trebali biste izbjegavati kosištenje crne boje za tekst, zato što je tamno sivu malo lakše čitati. Raspon za ugodno čitanje je između #333333 i #666666.
Što se tiče pozadinskih boja, potpuno bijela #FFFFFF je najsigurnija za pozadinu iza bilo kojeg glavnog dijela teksta. Za ostale pozadinske elemente možete birati od #FFFFFF do otprilike #CCCCCC.
Ponavljam, ovo nisu pravila za boje koja morate koristiti, nego samo smjernice sa kojima znate da će vaš početak biti siguran.
3. Odaberite samo jednu boju za isticanje
Najčešće mjesto gdje sheme boja pođu krivo je kada se nadjačava više različitih boja. Što više boja koristite, teže ih je držati pod kontrolom. Zato za početak dodajte samo jednu dodatnu boju vašim sivim nijansama, koja će se koristiti za isticanje elemenata kao što su linkovi, neki naslovi, izbornici, gumbi, itd. Vaša boja za isticanje može biti plava, zelena, crvena ili koja god vam odgovara.
Odaberite vašu boju za isticanje tako što ćete najprije postaviti kvadrat preko vaše baze kako biste mogli vidjeti kako vaša boja izgleda u odnosu na sve ostale elemente. Tada otvorite vaš izbornik boja i kliknite u sredinu gornje desne četvrtine mape boje.
Pomičite klizač gore i dolje pa izaberite boju za koju smatrate da će dobro funkcionirati sa vašim dizajnom.
U ovom trenutku radite sa tri osnovne boje; pozadinom, tekstom i bojom za isticanje. Vi možete, i trebali biste, u budućnosti koristiti više od jedne boje za isticanje , ali za sada razmišljajte o tome kao o žongliranju. Već radite sa tri žonglerska elementa, pa najprije postanite sigurni sa samo ove tri, a zatim dodajte nove kada ste samopouzdaniji.
Upravo ste naučili:
Upravo ste naučili kako odabrati "nijansu". U biti, nijansa je osnovna boja. Kada pomičete klizač gore i dolje, vidjet ćete da se "H" vrijednost u vašem izborniku boja mijenja.
"H" znači nijansa (hue) i jednom kada ste odabrali vašu boju za isticanje, broj u toj kućici je njena nijansa.
4. Ako se dvoumite, odaberite plavu
Ako se imalo dvoumite oko toga koju boju za isticanje koristiti, odaberite plavu. Ozbiljno. Plava je često najfleksibilnija boja i pristajati će najvećem broju tipova stranica. Boje kao ljubičasta i žuta mogu biti vrlo ugodne, no isto tako lako mogu postati drečave ako se koriste na krivi način.
S druge strane, sa plavom kao bojom za isticanje možete učiniti skoro bilo što i nećete puno pogriješiti. Ako niste sigurni otkud započeti s učenjem ili koju boju odabrati za projekt, jednostavno se vratite plavoj. Plava koju vi odaberete može se nalaziti bilo gdje između mornarsko plave (nijansa 235) i boje vode (nijansa 190) i još uvijek ćete biti na sigurnom teritoriju.
Za moj primjer izabrao sam nijansu 205. Kada ste odabrali svoju boju za isticanje, dodajte je svom dizajnu gdje god smatrate da je potrebna. Ako boju za isticanje koristite na gumbima ili na bilo kojem području koje sadrži tekst, također promjenite i boju teksta. U ovom primjeru u područjima koje sadrže boju za isticanje promjenio sam boju teksta u bijelu.
5. Dodajte varijacije vaše boje za isticanje
Kada ste odabrali vašu boju za isticanje od sada nadalje ostavite klizač (nijanse) tamo gdje se nalazi. Bit će vam potrebno još boja za vaš dizajn, no sve one će biti varijacije one boje za isticanje koju ste već odabrali kako bi pojednostavili stvari.
Za kreiranje varijacije boja povucite pokazivač po mapi za odabir boja.
Ove vrste varijacija boje koristite za:
Efekte prelaska kursorom
Rubove
Suptilniji tekst iznad boje za isticanje
Gradijente
Efekte svijetla i sjene
6. Držite se dalje od gornjeg desnog ugla
Gornji desni ugao mape boja je zemlja visokooktanskih boja. Boje u gornjem desnom uglu su kao trkaći automobili Formule 1; mogu imati zapanjujuće performanse i vrlo su privlačne, ali obično je potrebno veliko iskustvo kako bi ih se moglo dobro koristiti. Bez tog iskustva mogu izazvati nesreće, pa je najbolje učiti na bojama koje su manje intenzivne.
Zato sam u trećem dijelu ovog tutorijala zatražio od vas da kliknete mapu boja u sredini gornjeg desnog kuta prije odabira vaše boje za isticanje, kako bih bio siguran da ćete započeti sa relativno suptilnom bojom.
Za ilustraciju, pogledajte što se dogodi kada samo promjenim nijansu našeg dosadašnjeg dizajna, bez da promjenim mapu boja.
Još uvijek izgleda prilično dobro, zar ne? No, ako odaberem desni gornji kut mape boja, odjednom nije tako dobro.
Joj, moje oči!! Ako želite biti sigurni da nećete spaliti retine vaših korisnika, slijedite općenitu smjernicu umirivanja boja tako što ćete izbjegavati gornji desni kut mape boja.
Upravo ste naučili:
U posljednja dva djela naučili ste primjeniti nekoliko različitih aspekata teorije boja. Naučili ste kako koristiti:
Zasićenost i jasnoća.
Kada pomičete kursor po mapi boja vidjet ćete da se "S" i "B" vrijednosti mjenjaju, a one označavaju "Zasićenost" (eng. saturation) i "Jasnoća" (eng. brightness). Također ćete primjetiti da broj nijanse ostaje isti. Tako da kreirate varijacije boja mijenjajući zasićenost i jasnoću vaše originalne boje.
Zasićenost i tonovi
Zasićenost označava koliko je živo vaša boja izražena. Na primjer, pomislite "Moja košulja je bila natopljena (zasićena) prolivenim crnim vinom". U tipičnom izborniku boja zasićenost se određuje po tome koliko je bijele umješano u vašu osnovnu nijansu. Što je manje bijele, boja je zasićenija.
Kada pomičete krusor na mapi boja prema desno, vi smanjujete količinu bijele i tako povećavate zasićenost, pa se vrijednost "S" povećava. Kada krusor pomičete lijevo prema potpuno bijelom kutu, smanjujete zasićenost, pa se vrijednost "S" smanjuje.
Ovo mješanje bijele sa vašom bojom se također naziva kreiranjem "tona". Termin dolazi iz mješanja slikarskih boja gdje se bijela boja mješa sa obojenom.
Jasnoća i zasjenjenost
Jasnoća označava koliko je crne umješano u vašu boju. Što je manje crne, veća je jasnoća.
Kad povlačite kursor prema gore na mapi boja, smanjujete količinu crne, povećavate jasnoću i vrijednost "B" se povećava. Kada povlačite kursor dolje, povećavate količinu crne i vrijednost "B" se povećava.
Mješanje crne sa vašom originalnom nijansom se također naziva kreiranjem "zasjenjenosti". Taj izraz također dolazi iz slikarskog mješanja boja, gdje se crna boja mješa sa drugom bojom.
Tonovi
Kada miješate sivu u vašu odabranu boju to se naziva kreiranje "tona". Kada se maknete iz gornjeg desnog ugla, kao što smo to napravili gore, smanjujete i zasićenost i jasnoću, što dodaje i bijelu i crnu (sivu), i na taj način kreira ton. U osnovi, svaki put kada je vrijednost i zasićenosti i jasnoće manja od 100%, to je ton.
I ovaj termin dolazi iz miješanja slikarskih boja, gdje se kreira siva boja i zatim dodaje odabranoj boji. Od tuda također dolazi i fraza "ublažiti/sniziti ton". Zanimljivo, zar ne?
Monokromatske sheme boja
"Monokromatska" shema boja je ona u kojoj se osnovna boja nadograđuje nijansama, zasjenjenošću i tonovima. Upravo ste naučili što svi ti termini znače u praktičnom okruženju. Tako ste odabirom jedne boje i kreiranjem njenih varijacija zapravo kreirali monokromatsku shemu boje.
Što dalje?
Nastavite vježbati vaše monokromatske sheme boja na osnovi sivih nijansi dok se ne počnete osjećati zbilja samopouzdano. Pokušajte ih kreirati sa različitim nijansama kao bojom za isticanje, eksperimentirati kako biste vidjeli kako to mijenja postavke zasićenosti i jasnoće koje možete koristiti.
Kada se budete osjećali ugodno, dodajte još jednu boju za isticanje. Preporučujem da pokušate sa narančastom i plavom u prvom pokušaju jer je to obično najlakše raditi sa te dvije boje. Zatim pokušajte sa zelenom i plavom, koje su u mom iskustvu drugi najlakši par boja. Obje ove kombinacije obično su odlično prihvaćene od klijenata i kupaca.
Najboja stvar koju možete učiniti za razumijevanje shema boja koje se koriste na webu je preuzeti ekstenziju preglednika za uzorkovanje boja kao što je Colorzilla i iskoristiti ga za proučavanje kako iskusni dizajneri web stranica koriste boje. Kako budete pregledavali internet i vidite shemu boja koja izgleda odlično, pokrenite ekstenziju za uzorkovanje boja i pogledajte koje se boje koriste na stranici. Pogledajte koja razina zasićenosti i jasnoće najbolje funkcioniraju za svaku nijansu koju uzorkujete. Također ovratite pažnju na to koje se boje slažu sa drugim bojama.
Ako se dvoumite, od sada nadalje uvijek se možete vratiti na vaše "sigurnost prije svega" smjernice i biti sigurni da ste izbjegli "BLJAK".
