Web Design: Come trovare i giusti colori per la realizzazione di un sito o di blog?

Un cattivo schema di colori potrebbe rendere un progetto poco professionale e spingerebbe l’utente a “scappare” di corsa.

Se vuoi realizzare un sito o un blog professionale, ti anticipo qui sotto i contenuti che presenta questa mini guida sull’argomento:

• Il significato dei colori più importanti;
• Come usare i colori per creare un sito accessibile;
• Alcuni suggerimenti su come sceglierli;
• 14 tools per la scelta dei colori giusti.

Se vuoi aggiungere altri strumenti o servizi che usi anche tu per realizzare siti web, ti invito a dire la tua nei commenti qui sotto.

Il significato dei colori più importanti

I colori suscitano emozioni.

Nella realizzazione di un sito o di un blog, devi per forza tenere in considerazione le emozioni che si percepiscono utilizzando determinati colori.

Queste emozioni possono variare da persona a persona, tutto dipende dalla esperienze di vita di ognuno.

Qui sotto trovi alcuni significati dei colori più comuni utilizzati maggiormente:

Il Blue

E’ uno dei colori più utilizzati nel web, le emozioni che suscita sono positive.
Il blue rappresenta pace, tranquillità, affidabilità, fiducia, onestà, pulizia e chiarezza.

Pensa ad esempio alla realizzazione di un progetto web legato ad assicurazioni, case farmaceutiche, banche e simili, in tali casi questo particolare colore potrebbe aiutare l’utente a fidarsi maggiormente dell’azienda in questione.

Il Verde

E’ stato sempre associato alla natura, può anche rappresentare l’ambiente, la salute (vedi studi dentistici o medici) e la fortuna.

Per questo blog dedicato alla salute creato qualche anno fa da me, ho usato appunto il verde, visto che tratta argomenti correlati ai farmaci.

L’Arancione

Colore forte che suscita energia e vitalità.

Il Rosso

Come nella segnaletica stradale, il rosso corrisponde a pericolo, ad un avvertimento o anche al sangue.
Le emozioni positive legate al rosso includono l’amore ed il calore/affetto.

Il Rosa

Un colore molto legato alla femminilità (es. un portale sulla moda o sul mondo femminile in genere), associato anche ai bambini e all’infanzia.

Il Nero

Colore importante legato al potere, all’oscurità e  all’eleganza.

Il Bianco

Rappresenta la purezza e la bontà, oltre che all’inverno (es. portali o siti dedicati agli sport invernali) e alla freddezza (aziende che producono frigoriferi, gelati o simili).

Come usare i colori per creare un sito accessibile

Nella fase iniziale di progettazione di un sito, la scelta dei colori è legata anche al semplice buon senso.

Mi spiego meglio con un esempio.

Una clinica di chirurgia oculistica ti commissiona la creazione del loro sito/blog aziendale.

In questo caso puoi evitare l’utilizzo eccessivo di colori come il rosso, poiché implicherebbe emozioni legate al pericolo e al sangue. Meglio non osare .

Fai attenzione alle visualizzazioni del sito su diversi monitor

I colori di un sito web potrebbero variare in base al tipo di schermo (computer/portatile/tablet/smartphone).

I colori non saranno mai gli stessi su macchine diverse, troppe sono le caratteristiche che le differenziano:

• il settaggio del monitor;
• i diversi tipi di monitor in commercio;
• la scheda grafica;
• etc.

Piccoli suggerimenti per migliorare la leggibilità di un sito

Assicurati di utilizzare un buon contrasto tra lo sfondo ed il testo, in maniera da aiutare la navigazione agli utenti con problemi visivi.

L’uso di un alto contrasto è comunque ottimale anche per coloro che hanno una vista normale.
L’occhio si affatica maggiormente davanti al monitor rispetto ad un supporto cartaceo (libri, riviste etc.).

Il corretto uso dei colori porta vantaggi anche lato SEO, perché un aumento del tempo di permanenza e delle pagine visualizzate, permette a google di giudicare il sito come un progetto di qualità, utile a chi lo consulta.

La lettura su carta e sullo schermo hanno caratteristiche ben distinte.

Meglio non utilizzare più di 3-4 colori in totale.
Cerca di scegliere lo stesso tipo di colore per i link, in maniera da rendere facilmente riconoscibile un collegamento dal normale testo.

Ti mostro un piccolo esempio esempio pratico.

Decidi di rendere il collegamento di un menu orizzontale seguendo questa formattazione:

• non sottolineato;
• di colore nero;
• con un carattere Trebuchet MS di 13 pixel di grandezza.

Al passaggio con il mouse, il link è sottolineato con una linea continua in basso alta 3 pixel, ed un testo che cambia di colore (es. da nero ad azzurro).

Questo è il menu orizzontale che ti ho segnalato, puoi vederlo anche su questa pagina.

Questo esempio mi serviva per rendere l’idea di come dovrebbe essere netta la differenza di colore tra il menu e il normale testo, durante tutta la navigazione del sito.

Strumenti e risorse utili sui colori

Qui sotto ti elenco 14 tools tools on line che ti permettono di valutare il corretto contrasto e scegliere i colori giusti:

Kuler.adobe

Tool web based della Adobe per la realizzazione, la ricerca ed il download di palette di colori, utile nella realizzazione di siti web.

Colourcheck

Un tool on line utile per scegliere il corretto contrasto tra 2 colori, tramite l’inserimento del valore in esadecimale (es. #000000).

Spin the Color Wheel

Tool on line per la scelta dei colori per il web.
E’ possibile inserire i valori esadecimali, oppure scegliere la funzione random che visualizza un’anteprima di 3 colori ogni volta diversi.

Graybit

Ti permette di visualizzare un’anteprima in scala di grigi del sito.
Puoi verificare in questo modo, se gli utenti con problemi visivi (che hanno difficoltà del distinguere alcuni colori) riescono a leggere correttamente il testo presente nel sito.

Colour Contrast Analyser 1.1

La versione italiana di questo strumento la trovi su webaccessibile.org.
E’ un software gratuito da installare sul proprio pc, per testare le combinazioni di colore sfondo e primo piano.

ColorBlender

Ti permette di selezionare un colore preferito creando una tavolozza sulla base delle tue preferenze.
Le varie palette realizzate possono essere salvate per usi futuri e ottimizzate in base alle tue necessità.

4096 Color Whee

E’ abbastanza semplice e facile da usare per creare tavolozze e combinazioni di colori.

ColorSchemer Studio

Ti suggerisce idee basate da una palette iniziale e puoi divertirti a giocare con i colori.

Photo Color Matcher

Con questo strumento puoi creare una tavolozza dei colori da un’immagine esistente a tua scelta.
Può esserti utile come web designer se desideri creare uno schema di colori da una fotografia.

Colr.org

Tool web based simile a Photo Color Matcher, che estrapola i colori da un’immagine.

What Color

Programma shareware per estrarre colori dal monitor del proprio pc (solo per windows).

Web 2.0 Color Palette

E’ organizzato per aiutarti a sviluppare le combinazioni di colori sulla base di determinati criteri, che si inseriscono in un cosiddetto schema Web 2.0.

Sono stanco di sentire parlare di questo benedetto web 2.0, ma il servizio è molto interessante. Da provare.

Colour Contrast Check

Tool gratuito utile per l’analisi del contrasto dei colori tramite semplici palette.

Ercancem

(Blog in inglese).
Una esauriente lista di altre decine di siti e strumenti utili sui colori.

Due plugin per firefox

Utili strumenti che puoi usare senza installare nulla, solo un applicazione per Firefox.
In una mia precedente mini guida per sviluppatori e web designer, dove elenco numerosi tools di vario tipo, segnalo anche due plugin dedicati alla scelta e al controllo esadecimale dei colori (Colorzilla e WCAG Contrast Checker).

Veerle-v2.duoh

Un tutorial del 2007 della web designer Veerle Pieters, su come scegliere le giuste combinazioni di colori per un progetto web o cartaceo.
Questi sono gli argomenti che tratta il post:

• Quale colore è adatto a quale scopo?
• Come scegliere il giusto equilibrio di colori?
• Dove trovare tool on line per ispirazioni sul colore?

Ti è piaciuta questa mini guida sui colori?
Vuoi aggiunge altre risorse che usi anche tu, che non sono presenti qui?

Partecipa alla discussione qui sotto, e lascia il tuo contributo.

Photo credits: Darrell Gulin/Corbis – Ben Miners/Corbis – Nick Rains/Corbis