Kako izabrati boje za brend i sajt - Zephyra Studio

Paleta za sajt sastoji se od tri do pet boja: jedna glavna, jedna do dve pomoćne, jedna za isticanje i neutralne nijanse za tekst i pozadinu. Umesto traženja savršene nijanse, prvo se odlučuje kakav utisak brend treba da ostavi, jer boja sama po sebi ne znači ništa bez konteksta u kojem se koristi. Drugo pravilo je čitljivost: tekst i pozadina moraju da imaju dovoljan kontrast, a to nije estetska preferencija nego uslov da tekst bude čitljiv svima, uključujući ljude sa slabijim vidom. Treće je doslednost, odnosno iste boje u logotipu, na sajtu, u mejlu i na računu. Ovaj tekst pokriva izbor, raspodelu i proveru, bez nabrajanja značenja boja koja u praksi ne drže.

Šta jedna paleta treba da sadrži

Glavna boja nosi prepoznatljivost i koristi se za najvažnije elemente: dugme koje vodi ka upitu, naslov na naslovnoj strani, ikonicu u pregledaču. Ona se pojavljuje najčešće, pa je najvidljivija i najteže je menjati kasnije.

Pomoćne boje služe za razlikovanje sekcija, za kategorije u prodavnici i za grafikone u izveštajima. Njihova uloga je da nose značenje, a ne da ukrašavaju, pa ih ne treba koristiti proizvoljno po stranicama.

Neutralne nijanse su zapravo najveći deo sajta: pozadina, tekst, ivice i polja za unos. Dovoljne su tri do četiri, na primer skoro bela pozadina, dve nijanse sive za tekst i ivice, i tamna za naslove. Bez njih svaka paleta izgleda glasno i neuredno.

Posebno se izdvajaju boje za stanja, na primer za potvrdu i za grešku. One ne smeju da zavise samo od nijanse, jer deo ljudi ne razlikuje crvenu od zelene, pa im treba pridružiti i tekst ili ikonicu.

Kako izabrati glavnu boju

Najkorisniji početak nije paleta sa interneta, nego odgovor na pitanje kako brend treba da bude opažen u odnosu na konkurenciju. Ako svi u delatnosti koriste istu plavu, ista plava vas ne izdvaja, a neka druga nijansa može da bude dovoljna razlika.

Ako logotip već postoji, boja se izvlači iz njega, jer je to najjeftiniji put i ne zahteva menjanje štampanog materijala. Ako brend tek počinje, polazi se od fotografija i materijala koje firma stvarno koristi, jer paleta koja postoji u stvarnosti izgleda uverljivije od one izabrane na ekranu.

Odabrana nijansa se odmah proverava u kontekstu, a ne u krugu boja. To znači prikaz na telefonu, na svetloj i na tamnoj podlozi, i u kombinaciji sa slovima koja će stvarno biti u upotrebi. Nijansa koja izgleda dobro u paleti često izgubi karakter kada se nađe na malom dugmetu.

Kontrast i čitljivost

Kontrast se meri odnosom između boje teksta i boje pozadine. Za uobičajen tekst preporučeni odnos je najmanje četiri i po prema jedan, a za velike naslove i elemente interfejsa tri prema jedan. To su vrednosti iz smernica za pristupačnost i proveravaju se besplatnim alatima u sekundi.

Praktično pravilo je da se izbegne čist crna na čisto beloj. Kombinacija je zamorna za duže čitanje, a dovoljna je tamno siva na skoro beloj, i to je ono što većina sajtova i koristi.

Provera se ne svodi samo na glavni tekst. Linkovi moraju da se razlikuju od običnog teksta, dugmad da ostanu čitljiva u svim stanjima, a polja za unos da imaju vidljivu ivicu. Zato se paleta proverava i u sivim tonovima, jer siva skala pokaže mesta gde je kontrast preslab.

• Odnos četiri i po prema jedan za tekst, tri prema jedan za velike naslove i elemente interfejsa
• Nikada jedno značenje samo kroz boju, uvek uz tekst ili ikonicu
• Provera u sivim tonovima, jer pokazuje kontrast bez utehe nijanse
• Provera sa simulatorom za daltonizam, naročito kod crvene i zelene
• Polja za unos i ivice moraju da se vide i na svetlom i na tamnom prikazu

Koliko boja i gde

Raspodela koja se u praksi najbolje pokazala je šezdeset, trideset, deset. Neutralne nijanse pokrivaju oko šezdeset odsto površine, glavna boja trideset, a boja za isticanje deset. Ako je glavna boja svuda, nijedno dugme se ne ističe.

Boja za isticanje koristi se štedljivo i to je jedina boja koja sme da bude jaka: dugme za slanje upita, broj telefona i jedan akcent u naslovu. Kada se ista boja pojavi na pet mesta, oko nema gde da se usmeri.

Ako sajt ima tamni prikaz, paleta se ne prevrće automatski, nego se pravi odvojeno. Neutralne nijanse se zamene, a glavna boja često mora da bude svetlija, jer tamna na tamnoj gubi kontrast.

Kod štampe se nijansa menja, pa se za logotip i osnovni materijal uzima preporučena vrednost za štampu, dok se za ekran koristi zapis za ekran. Obe vrednosti se čuvaju na jednom mestu, u dokumentu koji ima svako ko pravi materijal za brend.

Kako da proverite izbor pre nego što se zalepi

Prva provera je na tuđem uređaju. Otvorite stranicu sa paletom na jeftinom telefonu, napolju, jer ekran na suncu pokaže razliku koju monitor u kancelariji sakrije. Ako je tekst na tom ekranu teško čitljiv, kontrast nije dovoljan, bez obzira na to što merenje kaže da prolazi.

Druga provera je sa ljudima. Pokažite paletu petorici ljudi iz ciljne grupe i pitajte šta im prvo padne u oči i čemu ih boja podseća. Odgovori nisu odluka, ali otkriju asocijacije koje sami ne možete da vidite.

Treća provera je u upotrebi, ne u logotipu. Boja se primeni na stvarnu stranicu sa naslovom, tekstom, dugmetom i formom, pa se pogleda u celini. Ako se posle toga ipak menja, mnogo je jeftinije ako je boja u kodu zapisana na jednom mestu, kao vrednost koja se menja, a ne ručno prepisana na dvadeset mesta.

Izrada logotipa i brendiranja pokriva izbor palete zajedno sa tipografijom, a pravila pristupačnosti šire su obrađena u tekstu o pristupačnosti sajta, gde se kontrast i veličine teksta posmatraju u celini, a ne kao pojedinačna odluka.

Izvor

Ključni zaključci

• Paleta ima jednu glavnu, jednu do dve pomoćne, jednu boju za isticanje i nekoliko neutralnih nijansi.
• Glavna boja se bira prema poziciji brenda i razlici od konkurencije, ne prema trenutnoj inspiraciji.
• Kontrast je uslov, ne ukus: najmanje četiri i po prema jedan za tekst.
• Raspodela šezdeset, trideset, deset sprečava da se nijedan element ne ističe.
• Paleta se proverava na stvarnoj stranici, na jeftinom telefonu i uz ljude iz ciljne grupe.

Zaključak

Boje se najlakše biraju kada se odluka svede na tri pitanja: šta brend treba da izrazi, šta se razlikuje od konkurencije i da li je tekst čitljiv svima. Ako se posle lansiranja ipak menja nijansa, promena je jeftina kada je paleta definisana na jednom mestu, a skupa kada je boja prepisana ručno po stranicama. Ako menjate brend ili tek počinjete, izradu logotipa radimo zajedno sa paletom i osnovnim pravilima upotrebe, kako se boja ne bi menjala pri svakoj sledećoj izmeni sajta.