Prima di addentrarci nell’argomento, come tutti sanno la maggior parte delle persone ha un colore preferito, mentre non tutti sono conoscenza del fatto che ogni colore suscita in loro una sensazione ben definita.
Per questo abbinare i colori giusti sul tuo sito è un esercizio fondamentale per attirare il pubblico adatto e farlo interessare a ciò che proponi. Il colore agisce sulle sensazioni e per questo ha una forza d’attrazione unica, ed ancor prima di valutare la tua offerta, i tuoi clienti saranno solleticati dal colore del tuo sito.
La scelta di uno schema colore da adottare per il tuo sito in tre semplici passi:
- definire il colore principale che definirà la maggior parte del sito;
- il colore secondario, in tono con il principale, che definirà le sezioni secondarie
- infine un colore a contrasto, che definirà elementi di risalto come bottoni, links, ecc.
Nell’immagine di fianco ho riportato i principali con i loro significati che possono essere abbinati tra di loro per generare la giusta sensazione all’utente del tuo sito.
I due tools che adopero quotidianamente sono Coolors e Paletton, se hai dei dubbi, parti da questi.
Diciamo che il tuo sito propone prodotti di cosmesi ecologici e si rivolge ad un pubblico prettamente femminile in una fascià d’età giovane. Il tuo schema colore potrebbe adottare il | rosa | come colore primario per esprimere femminilità e il | verde | per evidenziare gli ingredienti naturali dei tuoi prodotti. Entrami i colori verteranno verso una tonalità pastello per accentuare il contrasto con elementi in evidenza come il | grigio scuro| .
Ci sono tanti modi per scegliere uno schema di colori, ma partire dalla ruota colore proposta in alto, oppure dal sito Paletton è un buon modo per distinguere quali devono essere i colori primari, secondari ed a contrasto. Abbinare un colore caldo con uno freddo è già una ottima base di partenza per creare una combinazione accattivante e d’effetto.
Da non sottovalutare il messaggio implicito che vogliamo far passare alla tua utenza, il colore primario sarà la prima impressione che l’utente valuterà inconsciamente per la prima volta sul tuo sito.
Trova il tuo pubblico e troverai il tuo colore
Per trovare il tuo colore primario devi identificare il tuo pubblico, definire il tuo segmento di mercato, inquadrare il tuo settore. Saper stabilire a quale fetta di mercato rivolgersi è un’ottima prassi per qualsiasi attività di marketing, compresa la scelta del tuo colore primario.
Basta cercare nel web per capire cosa attira i suoi naviganti: se parlo di mattoncini è quasi inevitabile pensare a LEGO con il suo marchio rosso e giallo (creatività ed entusiasmo); se penso a smartphone mi viene in mente il blue di Samsung; se invece penso ad una moto mi vengono in mente Ducati (rosso) e KTM (arancione).
Una volta stabilito quale sarà il mio mercato di riferimento, scegliere il colore primario sarà semplice e abbinarne i complementari lo sarà ancor di più grazie agli strumenti che ho nominato prima.
In particolare Paletton ha una ottima funzione che una volta stabilito il colore primario da utilizzare, tramite l’opzione “Add Complementary” attiva subito il colore opposto nella ruota colore. Nel riquadro che si verrà a creare sul lato destro, avrai subito un primo look di come verranno visualizzati i colori contrastanti.
La sperimentazione non finisce lì, ma può essere ampliata a tre colori adiacenti, tre opposti e quattro colori in stile libero. Ad ogni modifica l’app riporterà un esempio nel riquadro a destra per mostrare in tempo reale cosa esce dall’abbinamento dei colori.
Se invece cerchi qualcosa di già definito, ti consiglio di passare a Coolors che dispone di una vastissima scelta di abbinamenti già pronti con il tuo colore primario di riferimento.
Ad ogni elemento il suo colore
Ogni pagina del nostro sito sarà composta da elementi quali bottoni, titoli, immagini e testo, per questo motivo dovrai prestare particolare attenzione all’uso dei colori e nell’abbinarli ai corretti elementi.
A volte l’errore più comune è porre il testo con un colore analogo allo sfondo, rendendo la lettura più impegnativa per l’utente. Oppure sovrapporre un bottone ad un’immagine con lo stesso colore dominante.
Un testo blue scuro ha meno risalto su uno sfondo blue chiaro, anche se lo scrivo in grassetto.
Mentre un testo viola su sfondo giallo è un chiaro esempio di colore complementare d’effetto.
Colori complementari danno risalto agli elementi come i bottoni grazie al forte contrasto, ma devi trovare il giusto equilibrio per evitare di strafare come ho fatto io nell’esempio precedente.
Conclusioni
In definitiva, come abbiamo visto, creare uno schema colore è abbastanza semplice, grazie ai numerosi strumenti online che soddisfano le esigenze di tutti. La parte più impegnativa è assegnare lo schema colore ai vari elementi delle pagine, cercando di rendere chiaro e leggibile ogni singolo elemento delle pagine.