Cuprins
„Ce culoare vinde mai bine?” pare o intrebare cu raspuns scurt. Numai ca un buton rosu nu aduce mai multe click-uri doar pentru ca e rosu, iar albastrul nu face singur un brand credibil.
Cu culoarea tragi privirea unde vrei, pui ordine in informatie si iti faci un stil pe care lumea il recunoaste. Pe toate trei le controlezi de la primul proiect.
Asocierea nu este o regula universala
Vezi des albastru la banci, verde la produse care se vand ca naturale si negru la brandurile premium. Sunt conventii din anumite piete, nu un dictionar al emotiilor valabil peste tot.
Acelasi rosu poate fi culoarea brandului, un mesaj de eroare intr-un formular sau eticheta de -30% dintr-o promotie. Ce intelege cititorul tine de text, de imagine, de categoria produsului si de ce a invatat sa recunoasca.
Asa ca lasa deoparte explicatiile de tipul „rosu inseamna pofta, deci vindem mai mult”. Uita-te intai cum folosesc culoarea competitorii, de exemplu in Meta Ad Library, biblioteca publica de reclame a Meta. Abia apoi hotarasti daca o culoare sustine mesajul tau.
Incepe cu mesajul si cu ce ai deja
Hai sa luam un exemplu inventat: faci pagina unui atelier de biciclete din Cluj. Cine intra pe ea trebuie sa priceapa trei lucruri: ce reparatii face atelierul, unde e si cum se programeaza.
Daca atelierul are deja logo si culori, de acolo pleci. Nu schimbi paleta doar pentru ca ai dat peste un template frumos in Canva.
Daca n-are nimic, strange exemple din domeniu: site-uri, pagini de Instagram si reclame ale altor ateliere. Ia cinci bune si cinci proaste si raspunde pentru fiecare:
- Ce culori se repeta la competitie?
- Care pagini se citesc fara efort?
- Unde se vede din prima actiunea principala?
- Prin ce se deosebeste vizual un brand de celelalte?
Nu copiezi pagina care iti place cel mai mult. Cauti ce anume o face sa se inteleaga din prima.
Analiza asta face parte din procesul descris pe larg in cum gandesti o campanie de social media.
O paleta simpla, cu roluri clare
Pentru atelierul din exemplu, eu as merge pe paleta de mai jos. E o propunere de design, nu rezultatul unui test de vanzari. Albastrul inchis si portocaliul sunt complementare (opuse pe cercul cromatic), asa ca portocaliul sare in ochi langa albastru.
| Rol | Culoare de exemplu | Unde o folosesti |
|---|---|---|
| Fundal | Alb, #FFFFFF | Suprafata principala a paginii |
| Text | Gri inchis, #1F2937 | Titluri si explicatii |
| Culoare de brand | Albastru inchis, #1E3A8A | Logo, iconite si detalii de identitate |
| Actiune principala | Portocaliu, #F97316 | Butonul de programare, cu text inchis |
Fiecare culoare are treaba ei. Daca pui portocaliul pe fiecare titlu, pe fiecare iconita si prin paragrafe, butonul de programare nu mai iese in fata.
Tine aceleasi roluri pe toate paginile. Dupa doua-trei pagini, vizitatorul stie deja ca portocaliul inseamna „aici apesi”.
Contrastul: se poate citi sau doar arata bine?
Contrastul e diferenta de luminozitate dintre text si fundal. O combinatie poate arata bine pe monitorul de la birou si sa nu se mai citeasca pe telefon, afara, in soare.
Pentru pagini web, WCAG 2.2, criteriul 1.4.3 cere un raport de cel putin 4,5:1 pentru textul obisnuit si 3:1 pentru textul mare, cu exceptiile din standard. WCAG e setul de reguli de accesibilitate pentru web. Text mare inseamna cel putin 18 puncte, sau 14 puncte daca e bold.
Raportul nu-l calculezi de mana. Bagi codurile celor doua culori intr-un verificator de contrast si vezi pe loc daca perechea trece pragul.
In exemplul nostru, n-as pune din reflex text alb pe butonul portocaliu. Alb pe portocaliu iese cam 2,8:1, sub prag. Gri inchis pe acelasi portocaliu iese cam 5,2:1 si trece. Iar un font mare nu repara orice combinatie.
Pe vizualele de social media, uita-te si la marimea textului. Contrastul bun nu te salveaza daca ai bagat un paragraf cu litere minuscule pe un story.
Nu comunica doar prin culoare
Daca un formular are o eroare, un contur rosu nu ajunge. Scrii si mesajul: „Completeaza adresa de email.” La un grafic, pe langa rosu si verde, pui etichete sau forme diferite, ca sa se descurce si cine nu deosebeste bine cele doua culori.
Asa cere si regula din WCAG privind folosirea culorii: culoarea nu trebuie sa fie singurul semn vizual prin care transmiti o informatie.
Un test rapid: fa o captura de ecran, trece-o pe alb-negru si vezi daca mai intelegi ce ai de facut si unde e problema.
Cum testezi o schimbare de culoare
Daca schimbi culoarea butonului si cresc programarile, nu te grabi sa spui ca „portocaliul vinde”. Poate ai schimbat si textul, oferta sau sursa traficului.
Ca sa poti trage o concluzie din test:
- Hotarasti la ce te uiti: de exemplu, cate formulare se trimit.
- Lasi neatinse textul, pozitia butonului si oferta.
- Imparti traficul cat mai egal intre cele doua variante.
- Scrii perioada si numarul de vizite langa procentul final.
- Nu declari o varianta castigatoare dupa doua programari.
Un site mic, cu cateva zeci de vizite pe saptamana, poate sa nu stranga destule date pentru o concluzie. Atunci mai bine repari lizibilitatea si faci butonul sa se vada decat sa rulezi un test in graba.
Un exercitiu de facut azi
Deschide un vizual sau o pagina la care lucrezi acum. Incercuieste titlul, explicatia si actiunea principala. Apoi raspunde la trei intrebari:
- Se vede ordinea in care vrei sa fie citite?
- Textul are destul contrast?
- Culoarea de accent scoate in fata actiunea sau e imprastiata peste tot?
Schimbi doar ce incurca. Nu-ti trebuie o paleta noua pentru fiecare postare.
Pentru fonturi, aliniere si spatiu, mergi mai departe cu regulile de design pentru incepatori. Acolo e restul structurii din care face parte si culoarea.
Gata sa treci la practica?
Vino in grupa urmatoare sau intra in comunitate - ne vedem acolo.
