Ciao e bentornato/a sulla rubrica del Fabbro,
L’argomento di oggi è affascinante tanto quanto è importante e ti chiarirà un sacco di interrogativi che ti sei posto sicuramente nel tempo.
Infatti, chiunque realizzi un sito web o una grafica si pone sempre questa domanda:
che colori utilizzo?
La guida che ho preparato per te risponderà in modo esaustivo a questo interrogativo e ti permetterà di affrontare la questione in modo più funzionale e… divertente!
Sì perché scegliere i colori per il tuo sito web può essere anche un’attività ricreativa e rilassante se hai un metodo.
È importante scegliere i colori del tuo sito con cura perché l’impatto visivo ha molto valore in termini di fruizione. Devi scegliere i colori giusti… se non vuoi far sanguinare gli occhi dei tuoi utenti e farli scappare via.
Inoltre sono tante le ricerche che indicano come le prime impressioni di un marchio sono determinate dai colori.
Visto che è facilissimo lasciarsi scappare la mano quando si tratta di scegliere i colori (non solo per i siti web, ma in generale!), seguire le regole che sto per darti ti aiuterà a mantenere un approccio scientifico e a dare un aspetto professionale al tuo sito.
Non stai più nella pelle? Allora raccogli tutta la concentrazione che puoi e afferra una tazza del tuo caffè preferito: partiamo!
Quanti colori scegliere per il tuo sito
Spesso mi capita di navigare dei siti con tantissimi colori diversi.
Usare troppi colori diversi è sbagliato perché disorienta l’utente e inficia la visibilità dei tuoi contenuti, oscurando il testo.
Errore fatale!
Assicurati sempre che i testi sul tuo sito siano ben leggibili; perché se è attraverso il colore che costruisci la prima impressione nella testa dell’utente, è attraverso il testo che lo indirizzi ad effettuare la fatidica Call to Action.
Nota: se è la prima volta che mi leggi e non sai cos’è una Call to Action… don’t panic. Ho scritto un articolo molto approfondito a riguardo che puoi leggere cliccando qui.
Altre volte invece mi è capitato di atterrare su siti web in bianco e nero o mono-colore.
Errore fatale anche questo!
È vero che non devi esagerare col colore, ma non devi neanche ricreare un’atmosfera da cimitero.
Ma allora qual è il numero di colori da utilizzare sul tuo sito?
Puoi raggiungere l’equilibrio perfetto utilizzando 3 colori.
Proprio così. Utilizzando 3 tonalità di colore raggiungerai un risultato bilanciato e il tuo sito sarà figo.
Però aspetta un minuto, non muoverti da lì! L’informazione non è completa…
devi utilizzare questi 3 colori in modo strategico, non soltanto piazzandoli a casaccio o secondo buon senso.
Dovrai infatti individuare come prima cosa un colore principale. Si tratta di un colore dominante rispetto agli altri, con cui dovrai letteralmente riempire la maggior parte del tuo sito.
Per intenderci, dovrai usare questo colore specificamente come sfondo del menù di navigazione e del footer del tuo sito (il footer è l’elemento a piè di pagina dove inserisci le tue informazioni di contatto, la tua privacy policy e la tua partita IVA).
Da questo colore dominante ricaverai poi un secondo colore. Il colore secondario sarà infatti della stessa tonalità di quello principale ma più chiaro.
Puoi utilizzarlo, ad esempio, per lo sfondo delle pagine o per i bordi delle immagini e degli altri elementi grafici. Puoi addirittura utilizzarlo per i titoli e i sottotitoli degli articoli di blog.
E il terzo colore? Anche questo lo ricaverai dal primo, ma in maniera differente. Dovrai infatti utilizzare questo colore per mettere in evidenza bottoni, link e testi delle Call to Action.
Il terzo colore deve andare fortemente in contrasto col primo.
Un ottimo modo per scegliere un terzo colore efficace è utilizzare un complementare del primo.
“Ok Fabbro, ma cosa sono i colori complementari?”
Ottima domanda. Ci arriviamo tra poco.
Prima di capire come poter ricavare il complementare dal primo colore dobbiamo scoprire come scegliere quest’ultimo.
Come scegliere il colore principale del tuo sito
Qui c’è una regola molto semplice da seguire: utilizza il colore dominante del tuo logo.
Se il tuo logo è blu e il tuo sito è verde devi correre ai ripari al più presto.
Solo se il logo della tua attività è una scritta bianca o una scritta nera senza disegni o elementi grafici puoi scegliere anche un altro colore.
Però prima di proseguire lascia che ti ponga una domanda: in che modo hai scelto il colore del tuo logo?
Te lo chiedo perché dovresti fare distinzione tra i colori che ti piacciono e i colori che sono i più adatti per il prodotto/servizio che offri.
Ma non è tutto.
Quando scegli il colore principale devi pensarlo anche in relazione al tuo pubblico. Ogni pubblico è differente, perciò la scelta giusta varia di caso in caso, però esistono delle regole generali, e sono molto semplici.
Sto per spiegarti le sensazioni che trasmettono i colori più usati, perciò ti invito a ragionare se è il caso o meno che cambi i colori del tuo logo. Se infatti utilizzi i colori sbagliati per il tuo logo renderai inutile questa guida, perché seguendola utilizzerai lo stesso colore sbagliato per il tuo sito web.
- Il rosa è molto amato dalle donne e si usa sui siti che hanno il gentilsesso come target di riferimento.
- Il blu trasmette professionalità.
- Il nero si utilizza molto nel settore del lusso.
- Il bianco è un colore molto usato perché privilegia la chiarezza e la leggibilità dei testi. Se non sai proprio che colore principale utilizzare, scegli questo. Il bianco si utilizza anche per esprimere facilità d’uso, semplicità e purezza. Che colore puoi scegliere come secondario se utilizzi il bianco come primario? Puoi giocare con degli elementi grafici in trasparenza (ad es. puoi applicare dei filtri bianchi in trasparenza sulle foto al passaggio del mouse).
I colori del semaforo
Vediamo adesso le sensazioni che trasmettono i colori del semaforo:
- il verde trasmette sicurezza ed è spesso associato ai soldi e all’abbondanza. Quando il semaforo è verde puoi attraversare la strada in sicurezza (nota: ricordati comunque di guardare sempre a destra e a sinistra prima di farlo!). Usa il verde per i bottoni e i messaggi di conferma.
- Il giallo ci mette in allerta, facendoci prestare particolare attenzione a qualcosa. Usa il giallo per evidenziare un elemento che vuoi assolutamente non passi inosservato ai tuoi utenti.
- Il rosso si usa per gli errori, perciò utilizzalo soltanto per i messaggi di errore. MC Donald’s utilizza molto il rosso perché va in forte contrasto col colore primario (il giallo del logo) e perché si presta bene al cibo, creando insieme un senso di appetito e di urgenza.
Colori da evitare
Ci sono poi l’arancione e il marrone. Questi due colori possono andar bene come terziari, ma raramente come colori primari. Se non sai precisamente cosa stai facendo, evitali come la peste.
Come scegliere il secondo e il terzo colore per il tuo sito
Ora che hai individuato il colore primario passiamo agli altri due.
Il modo più semplice per “calcolare” le altre due tonalità in modo che vadano bene col colore primario è utilizzare uno strumento apposito.
Esiste un sito che personalmente adoro e che si chiama Coolors.
Collegati sulla home page e fai click sul bottone “Start the generator!”. Nella schermata seguente vedrai 5 colori con i relativi codici HEX, che puoi inserire sui programmi di grafica per generare precisamente quelle tonalità.
Tra questi colori che vedi c’è il colore primario che hai scelto? Se sì, che culo! Altrimenti schiaccia il tasto “spazio” sulla tastiera del tuo pc finché non ti compare una tonalità del colore primario che hai scelto che ti ispira. Ogni volta che schiacci “spazio” i colori cambiano.
Trovato? Perfetto, allora prendi subito nota del codice HEX (copialo e incollalo da qualche parte o segnatelo su carta).
Il prossimo passo da seguire è fare click sul lucchetto che trovi sopra al colore. Quando fai click sul lucchetto, questo si chiude. Il lucchetto ci servirà per trovare il terzo colore, però dimenticatelo per un attimo e pensiamo al secondo.
Per trovare il secondo colore fai click sulla scritta “View shades”. Wow, cos’è successo?
Che il sito ti tira fuori tutte le diverse tonalità di quel colore. Fai click su una delle sfumature più chiare: quello è il tuo colore secondario. Per esperienza, ti consiglio ti scegliere una tonalità inferiore almeno di 3 step rispetto a quella di partenza.
Trascrivi anche questo codice da qualche parte e poi incolla il codice del primo colore al posto del codice del secondo, per far tornare il primo dov’era.
Adesso assicurati che il lucchetto sul colore sia chiuso, dopodiché… schiaccia spazio nuovamente.
Noterai che cambieranno tutti i colori della schermata tranne quello principale, perché l’hai chiuso col lucchetto.
Ecco: la maggior parte di questi colori vanno in forte contrasto col colore principale e puoi usarli come terzo colore.
Metodo alternativo per la scelta del terzo colore
Un altro metodo efficace per ricavare un terzo colore adatto, ovvero in grado di far risaltare bottoni e Call to Action del tuo sito, è quello di usare i colori complementari.
Osserva la ruota dei colori qui in basso:
Poni attenzione sul giallo e il viola. Nota la relazione che c’è tra i due: sono praticamente in posizione opposta sulla ruota!
Ciò significa che sono complementari. Se utilizzi il viola come colore primario puoi utilizzare il giallo come terzo colore o viceversa.
Attenzione però: cerca di trovare il giusto equilibrio e di non esagerare. Aiutati con Coolors per trovare delle tonalità in armonia tra loro e cerca di non creare sul sito dei contrasti “cazzotti in un occhio”.
E ora… trucco veloce!
Inserisci il codice del colore principale sul terzo colore che vedi su Coolors, ovvero quello in mezzo.
Fai click sui 3 puntini sospensivi e clicca su “generate method”. Scegli “complementary” dal menù a tendina. Se hai fatto tutto bene, dovresti veder comparire la scritta “complementary” sul colore primario.
Adesso chiudi il lucchetto sul colore principale e schiaccia il tasto “spazio” sulla tastiera. Tutti i colori che compariranno ogni volta che schiaccerai “spazio” vanno bene come terzo colore per il tuo sito.
Conclusioni
Oggi ti ho fornito un metodo semplicissimo per scegliere i colori giusti del tuo sito e scommetto che non vedi l’ora di metterti all’opera e sperimentare.
Domande e/o consigli? Scrivimi nei commenti e ti risponderò personalmente non appena possibile.
Se l’articolo ti è piaciuto e in futuro desideri leggerne altri come questo, iscriviti subito alla newsletter del Fabbro! Fai click qui e ti invierò una guida gratuita ogni settimana per aiutarti a realizzare e gestire il tuo sito web in totale autonomia e nel migliore dei modi.
Continua a seguirmi e vedrai che presto per te sarà facilissimo usare il martello per spaccare il web!
A martedì prossimo,
Il Fabbro
