Quan un visitant entra a la teva web, abans de llegir ni una sola paraula ja s’ha format una opinió. I aquesta opinió la creen, en bona part, els colors i la tipografia. No és una qüestió d’estètica per a dissenyadors: és una qüestió de confiança, de llegibilitat i, en última instància, de vendes.
En aquest article t’expliquem com triar els colors i les lletres de la web de la teva empresa amb criteri, sense necessitat de saber disseny. Pensat per a propietaris de negocis que volen una web professional que transmeti el que són.
Per què els colors importen més del que sembla
Els colors comuniquen abans que les paraules. Un blau fosc transmet serietat i confiança (per això l’usen bancs i asseguradores); un verd evoca natura i salut; un taronja o un groc transmet energia i proximitat. No és màgia: són associacions culturals que tots compartim i que la teva web activa en segons.
Això no vol dir que hagis de triar el color «psicològicament correcte» com si fos una fórmula. Vol dir que els colors han d’estar alineats amb el que el teu negoci vol transmetre. Una funerària amb una web de color rosa xiclet generaria una dissonància evident; una ludoteca amb una web gris i seriosa, també.
La regla dels tres colors
Una norma senzilla que funciona gairebé sempre: tria tres colors i no te’n surtis.
- Color principal: el color de la teva marca, el que apareix al logotip. És el que més es veurà: capçaleres, botons importants, titulars.
- Color secundari: un color que combini amb el principal i serveixi per a detalls, icones i seccions secundàries.
- Color neutre: normalment un gris fosc per al text i un blanc o gris molt clar per als fons. Són els colors que fan que tot es llegeixi bé.
Més de tres colors i la web comença a semblar un circ. Menys d’això i costa diferenciar les seccions. Tres és el punt dolç per a la immensa majoria de negocis.
El color dels botons: una decisió de vendes
El botó de «Demana pressupost» o «Truca’ns» és l’element més important de la teva web des del punt de vista comercial. Ha de destacar clarament sobre la resta: un color viu i amb bon contrast respecte al fons. Si el botó es confon amb el disseny, els visitants no el veuran, i si no el veuen, no el premran.
Un error molt habitual: fer el botó del mateix color corporatiu per «quedar bé». El botó no ha de quedar bé: ha de cridar l’atenció. Pots mantenir la identitat de marca i alhora tenir un botó que es vegi d’una hora lluny.
Contrast i llegibilitat: el que no es llegeix no ven
La combinació més elegant del món no serveix de res si el text no es llegeix. Les normes bàsiques:
- Text fosc sobre fons clar (o a l’inrevés): és la combinació més llegible i la més segura.
- Evita el text gris clar sobre fons blanc: queda «modern» però molta gent —sobretot gent gran o amb el mòbil al sol— no el pot llegir.
- No posis text sobre fotos sense un fons que el protegeixi: una foto bonica darrere d’un text il·legible és una foto malgastada.
- Vigila el contrast en els botons: text blanc sobre groc o sobre taronja clar sovint no es llegeix.
Pensa en els teus clients reals: si tens clients de més de 50 anys, la llegibilitat no és un detall, és una necessitat. Lletres prou grans i contrast alt marquen la diferència entre una web que tothom pot usar i una que només entén el dissenyador.
Com triar la tipografia: menys és més
La tipografia són les lletres de la teva web. I la norma d’or és la mateixa que amb els colors: màxim dues tipografies —una per a titulars i una per al text normal— i, si pot ser, de la mateixa família.
Què ha de complir una bona tipografia web
- Llegibilitat: el text normal ha de ser una lletra clara i sense floritures. Les tipografies decoratives són per a logotips o titulars molt curts, mai per a paràgrafs.
- Mida suficient: el cos del text hauria de ser d’almenys 16 píxels. Més petit cansa la vista, sobretot al mòbil.
- Coherència: la mateixa tipografia a tota la web. Cada pàgina amb una lletra diferent transmet desordre.
- Accents i caràcters catalans: assegura’t que la tipografia inclogui correctament les vocals accentuades, la ce trencada (ç) i la ela geminada (l·l). Algunes tipografies gratuïtes fallen aquí i el resultat és molt poc professional.
Aquest últim punt és clau si la teva web és en català: comprova sempre com es veuen la «à», la «è», la «ç» i la «l·l» abans de decidir-te. Una tipografia preciosa que no té la ela geminada no serveix per a una web en català.
Com combinar els colors sense ser dissenyador
Triar tres colors que combinin bé pot semblar difícil, però hi ha mètodes senzills:
- Parteix del teu logotip: si ja tens un logotip amb colors definits, la feina està mig feta: fes servir el color principal del logotip com a color principal de la web i tria un secundari que hi combini.
- Mira què fa el teu sector: no per copiar, sinó per entendre les expectatives. Si totes les clíniques dentals usen blaus i verds suaus, un vermell intens pot desentonar (o pot diferenciar-te: depèn de la teva estratègia).
- Fes servir eines gratuïtes de paletes: hi ha eines en línia on tries un color i et suggereixen combinacions harmonioses. Són molt útils per no equivocar-te amb el color secundari.
- Prova-ho en context real: no jutgis els colors en una mostra aïllada: mira’ls aplicats a una capçalera, a un botó i a un titular. Un color preciós en abstracte pot no funcionar en una web.
I una norma pràctica per al color secundari: si dubtes entre dues opcions, tria la més sobria. El color secundari ha d’acompanyar, no competir amb el principal. El protagonisme visual ha de ser per al contingut i per als botons d’acció.
Coherència amb la teva marca
Els colors i la tipografia de la web han de ser els mateixos que els de la teva marca: el logotip, les targetes, la retolació del local, les furgonetes. Quan un client veu la teva furgoneta al carrer i després obre la teva web, ha de reconèixer immediatament que és la mateixa empresa.
Si no tens una identitat visual definida, la creació de la web és un bon moment per definir-la: triar els colors i les lletres que t’acompanyaran a tot arreu. És una decisió que convé prendre amb calma, perquè canviar-la després costa temps i diners.
Errors habituals en colors i tipografia
- Massa colors: cada secció d’un color diferent. Resultat: caos visual.
- Colors de moda que no et representen: triar el color perquè «ara es porta» en comptes de perquè encaixa amb el teu negoci.
- Text clar sobre fons clar: el pecat capital de la llegibilitat.
- Més de dues tipografies: titulars amb una lletra, text amb una altra, botons amb una tercera… desordre garantit.
- Lletres decoratives per al text normal: precioses en un logotip, impossibles en un paràgraf.
- No comprovar-ho al mòbil: uns colors i unes mides que al ordinador es veuen bé poden ser il·legibles en una pantalla petita.
Conclusió: criteri abans que gust personal
Triar els colors i la tipografia de la teva web no va de gustos personals («a mi m’agrada el lila»): va de què necessita el teu client per confiar en tu i llegir-te còmodament. Tres colors ben triats, dues tipografies llegibles, contrast alt i coherència amb la teva marca: amb això tens una base visual sòlida per a qualsevol negoci.
Quan encarreguis el disseny web de la teva empresa, parla d’aquestes decisions amb el professional: un bon dissenyador no t’imposarà el seu gust, t’ajudarà a traduir el que és el teu negoci en colors i lletres que funcionin. I si vols saber quant temps porta tot el procés, consulta la nostra guia sobre quant triga a fer-se una pàgina web.