Boje za sajt firme: kako izabrati paletu

Tri uloge boje na sajtu

Paleta sajta firme ima tri dela i svaki ima svoj posao:

• Osnovna boja nosi prepoznavanje: boja iz logoa, sa vozila ili sa izloga. Stoji u zaglavlju, na velikim površinama i u ukrasima.
• Neutralne boje nose čitanje: tamna za tekst, svetla za pozadinu i jedna ili dve sive za linije i sporedan tekst.
• Boja za akciju pokazuje gde se klikće: dugmad, linkovi, polje u koje se piše. Najbolje je da bude jedna i da se ne troši na ukras.

Poznata gruba mera je odnos 60-30-10: najviše neutralne pozadine, manje osnovne boje i najmanje boje za akciju. To nije pravilo, nego podsetnik da boja za akciju mora da ostane retka da bi se primetila.

Na sajtu Medica Centar prva verzija palete imala je četiri akcenta, po jedan za svaku oblast rada ordinacije. Odgovor je bio kratak: previše boja. Sada je akcenat jedan, prigušeni teal na toplim neutralnim bojama, i koristi se štedljivo, za naslove, tanke linije i traku sa pozivom na kraju strane.

Kad boja logoa ne sme na tekst ili dugme

Svetle boje iz logoa, kao žuta, narandžasta, svetlozelena i svetloplava, retko prolaze kao tekst na beloj pozadini, a beli tekst na njima takođe ne prolazi. Izmereni primeri:

Iz toga slede tri rešenja. Svetla boja ostaje na velikim površinama i na dugmetu, a slova na njoj su tamna. Za tekst i linkove na beloj ide tamnija nijansa iste boje. Ili boja logoa ostaje samo ukras, a akcija dobija drugu boju. Nije svaka boja problem: jaka crvena #E30613 sa belim slovima ima 4,88:1 i prolazi.

Pazite i na pozadinu. Tamnija narandžasta #BD5A00 prolazi na čisto beloj, a na blago sivoj #F7F7F5 pada na 4,23:1, ispod granice.

U prvoj verziji sajta Kraljevi Čardaci zlatna boja na svetloj podlozi imala je 3,5:1, premalo za tekst. Zlato je ostalo za ukras, a slova su dobila tamniju varijantu, od 11:1. Ista provera oborila je i standardnu plavu za linkove, koja je bila stotinku ispod praga, pa je zamenjena tamnijom. Na sajtu Medica Centar tekst takođe koristi tamniju nijansu istog tona, zbog kontrasta.

Tamna tema: kada ima smisla

Tamna tema ima smisla kad je deo identiteta, kao na ovom sajtu, ili kad se sajt često čita uveče. Ona nije samo obrnuta paleta: svaki par treba ponovo izmeriti, jer boja koja prolazi na beloj često ne prolazi na crnoj, kao Klein plava iznad.

Sajt Denis Market 97 ima dnevnu i noćnu temu, izvedene preko promenljivih u CSS-u, sa prelazom koji pri promeni ne treperi.

Tamna tema koja se pali sama, po podešavanju telefona, mora da bude urađena do kraja. Na sajtu Diamond Lux Kopaonik strana je imala i tamnu paletu koja se uključivala sama, a pozadinska fotografija je pri skrolu ostavljala procep kroz koji se ta paleta videla, kao tamnoplava traka na dnu ekrana. Tema je zaključana na svetlu, a pozadina je postala nepomičan sloj.

Boja u sitnim delovima sajta

Paleta se ne završava na zaglavlju i dugmadi. Baner za kolačiće na sajtu AutoSet Niš dolazi iz zajedničkog dela koji koristi više mojih sajtova, ali je prebojen u paletu firme: svetloplava sa naglascima i isti font kao ostatak sajta. Deo koji zadrži tuđe boje odmah izgleda kao nalepljen.

U konfiguratoru sajta Jupiter Planet kupac bira boju majice iz palete. Boja se ne crta ponovo za svaku nijansu: preko bele fotografije ide filter množenja, pa senke i nabori ostaju vidljivi u svakoj boji, a jedna slika po proizvodu daje celu paletu. Natpis koji kupac doda ima konturu, jer isti tekst mora da se vidi i na beloj i na crnoj majici.

Psihologija boja: šta može pošteno da se kaže

O značenju boja piše se mnogo, a malo toga može da se proveri. Značenje zavisi od kulture, delatnosti i navika kupaca: zelena kod apoteke i zelena kod pumpe ne govore isto. Za sajt firme više odlučuju dve stvari koje se proveravaju: da li se boja prepoznaje kao boja te firme i da li tekst na njoj ima dovoljan kontrast.

Zato ovde nema tabele u kojoj plava znači poverenje, a crvena hitnost. Za takve tvrdnje nisam našao izvor koji bih potpisao. Kako logo izgleda na svetloj i na tamnoj pozadini, piše na strani Logo za sajt, a koji font ima sva naša slova, na strani Fontovi za latinicu.

Ako vam treba sajt čija paleta polazi od vašeg logoa i prolazi proveru kontrasta, pošaljite upit. Kako izgleda ceo tok rada, opisano je na strani Proces dizajna sajta.

Česta pitanja