L’influenza del colore nel web design

Il colore nel web design

Il colore è il risultato di una sensazione prodotta dalla luce emessa o riflessa dagli oggetti. Tale sensazione varia in rapporto alla lunghezza d’onda che colpisce l’occhio, determinando così quelli che si definiscono colori.Giorgio fioravanti – nuovo manuale del grafico

Questa è sicuramente la definizione più semplice tra quelle a mia disposizione.
Non a caso si parla di sensazioni, il colore infatti è un importante media in grado di influenzare la percezione di un sito web, per questo gioca un ruolo estremamente importante e necessario per rendere efficaci le nostre strategie di comunicazione.

Introduzione

Nella nostra quotidianità il colore ha un forte potere discriminante che ci permette di distinguere gli oggetti tra loro. Sono i colori infatti a delimitare le forme e, sebbene il nostro cervello sia in grado di scindere il concetto di forma da quello di colore, insieme rappresentano un forte media percettivo.
Quando guardiamo un oggetto il suo colore è esposto ai mutamenti di luminosità: le parti in ombra saranno più scure, quelle in luce più chiare. Una foglia è verde, ma in realtà se dovessimo dipingerla emulando la realtà, utilizzeremmo tantissime sfumature.
Sul web ciò non accade. I colori che il web designer decide di utilizzare non vengono in nessun modo alterati e la percezione del colore è comune a tutti fruitori (tranne per chi soffre di daltonismo) .

Significato

Se sul web cercate il significato dei colori, troverete tabelline più o meno dettagliate in cui ad ogni colore viene associata una sensazione.
Le sensazioni derivano principalmente dalla nostra memoria che ci induce ad associare i colori agli oggetti che più ricordano quelle cromie. È così che il verde ci ricorderà le foglie, la natura e la sensazione di benessere che ne deriva. Volendo fare una sintesi ad ogni colore potremmo associare le seguenti sensazioni:

Rosso: Colore del fuoco, entusiasmo, passione, aggressivo.
Marrone: La terra, il legno. Il calore, intimità, resistenza
Nero: Assenza assoluta di colore, oscurità. Potenza, raffinatezza.
Verde: Colore delle foglie e della natura. Pace, benessere
Giallo: È il colore del sole e della luce. Fiducia, positività felicità, gioia, energia.
Grigio: Sobrietà, stabilità.
Blu: Il colore del mare e del cielo. Fiducia, intelligenza e verità
Rosa: Giovinezza, romanticismo.
Viola: Lusso, la saggezza.
Arancione: Energico, vibrante, vivace.
Bianco: Purezza, semplicità.

Queste considerazioni però non tengono conto delle diverse gradazioni di ogni colore. La percezione di un verde foglia darà sicuramente sensazioni diverse rispetto un verde acido, stessa cosa per un viola medio rispetto un lilla e via dicendo.
Prendete dunque questi riferimenti valutando i colori singolarmente e nelle loro tonalità “neutre”.

Non dimentichiamo che l’interpretazione dei colori può variare anche in base alla cultura del fruitore, un esempio banalissimo sono i colori delle squadre di calcio italiane: l’accostamento del rosso e del nero come dell’azzurro e del nero ad un italiano faranno pensare subito alle squadre del milan e dell’ inter ad un autraliano probabilmente ricorderanno altro o niente.

Influenza

Memoria, tonalità, forme e cultura sono caratteristiche sulle quali dobbiamo riflettere prima di scegliere i colori del nostro sito web. La percezione del colore infatti dipende da tutti questi fattori, non per ultimo dai suoi accostamenti. Qui la pittura la dice lunga, pensate ad un’opera di Caravaggio e una di Van Gogh. Del primo ricorderete i colori drammatici, del secondo le tinte luminose.
Gli artisti infatti, attraverso precisi accostamenti, hanno trasmesso al fruitore un certo tipo di sentimento che non dipende soltato dai soggetti rappresentati. Pensate davvero che la “Deposizione di Cristo” di Caravaggio o i “Girasoli” di Van Gogh in bianco e nero siano efficaci tanto quanto gli originali?

Bene, un sito web altro non è che una composizione di forme e colori capaci di influenzare emotivamente la percezione degli utenti, interagendo con la loro psiche. Non è dunque il singolo colore a restituirci degli input emotivi, ma tutto l’insieme.
Valutiamo pertanto il colore come un elemento naturalmente instabile la cui percezione viene alterata dal suo contesto, vale a dire che, ad esempio, uno stesso colore accostato a colori differenti verrà percepito in modo differente.
Un blu vicino al giallo sembrerà più luminoso rispetto ad un blu accostato ad un azzurro chiaro.

Memoria e riconoscibilità

Se chiediamo ad un utente di ricordare il colore di un certo sito web, probabilmente la distinzione più semplice che riuscirà a fare è chiaro e scuro, in seconda battuta cercherà di menzionare il colore predominante.
Le sensazioni di chiaro e di scuro sono le più elementari e anche le prime ad essere percepite, sarà cura del progettista quindi amministrare in un certo modo le tonalità al fine di determinare l’effetto desiderato.

Prima ancora però di pensare a quali scelte cromatiche possano innescare un certo tipo di sentimento nel fruitore, l’aspetto prioritario riguarda la riconoscibilità e riconducibilità del brand.

L’utente che visita per la prima volta un sito web deve subito ricondurre i colori percepiti al marchio. Riuscireste ad immaginare il sito di apple arancione e verde? O quello di starbucks magenta e giallo? No. I colori devono rappresentare l’identità dell’azienda a colpo d’occhio.
La scelta dei colori di un marchio solitamente è frutto di parecchi studi, come dimostra quest’articolo di color metters.
Il colore comunica, non dimentichimolo mai! Il suo potere semantico è fortissimo.

Man Ray - Pane Blu

Man Ray. Pane Blu 1960

Lo dimostra nel 1960 Man Ray dipingendo un pane (una baguette) di blu cobalto. Un dettaglio non indifferente che ha reso quel pane non commestibile! D’altronde chi mangerebbe un pane blu? Ecco quale potente reazione può innescare un colore.

Per evitare pertanto che il vostro sito perda appetibilità, come il pane blu di Man Ray, consiglio non solo di rispettare il colore del brand ma di accostarlo ai toni che possano avere un certo potere persuasivo e attrattivo verso il vostro pubblico di riferimento.
Uno dei guru dell’argomento è sicuramente Louis Cheskin fondatore e direttore del Color Research Institute di Chicago i cui studi, basati sulla psicanalisi, consistevano nel determinare il potere persuasivo e suggestivo non solo dei colori, ma di tutti i media di promozione.

Armonia

Fin qui abbiamo analizzato come il fruitore percepisce il colore. Ma il vero lavoro di un web designer (alla stregua di un musicista o di un artista) è quello di mescolare adeguatamente i colori alla ricerca di quell’armonia capace di rendere piacevole la fruizione un layout.

Compito non certo facile se pensiamo che dai colori di un sito può dipende anche l’usabilità. Se i contrasti non sono appropriati potrei non riuscire a leggere bene il testo o magari a non distinguere adeguatamente un bottone, inibendo così la permanenza degli utenti.

Tutti i colori del nostro sito dunque devono adattarsi reciprocamente per formare un tutto unificato, una piacevole armonia che comunichi con il nostro pubblico di riferimento.
Scegliere la palette di un sito web richiede parecchie valutazioni ma on line ci sono molti strumenti a supporto di queste esigenze. Ma in merito alla scelta dei colori scriverò sicuramente un altro articolo.

Conclusioni

Il colore è un forte media percettivo da cui può dipendere il successo di un sito web.
Definito il pubblico di riferimento, al web designer è deputato l’incarico di scegliere i colori più appropriati in grado di comunicare efficacemente il messaggio del sito.

Certo col tempo, la vostra sensibilità di progettisti migliorerà, sarete in grado di accostare automaticamente i colori tra loro e avrete una visione della composizione sempre più completa.
Ma per quanto siate bravi, competenti ed esperti, permettetemi di dirlo, l’ultima parola lasciatela sempre agli utenti.

Alcune fonti
Giorgio Fioravanti – Nuovo manuale del grafico
Rudolf Arnheim – Arte e percezione visiva
Bruno Munari – Fantasia

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>