11-10-2021 - Design

Anche Batman ha dei problemi ad abbinare i colori

L’uso dei colori è molto complesso. I colori hanno un impatto significativo sulle nostre emozioni e influiscono sul nostro comportamento come utenti.

Nel Web Design, i colori incidono su un’infinità di elementi: sfondo, menu, bottoni pulsanti, titoli, testi, link, immagini e una combinazione di colori gradevole ed efficace incoraggerà i visitatori del sito a rimanere più a lungo e tornare spesso.

 

Tu chiamale se vuoi...emozioni

Ogni colore provoca uno stato d’animo. È importante avere una conoscenza base della psicologia del colore in modo da poter creare l’atmosfera corretta e trasmettere il messaggio giusto al pubblico di destinazione.

 

giphy (1).gif

 

Bisogna fare attenzione però, le emozioni che i colori trasmettono possono variare tra culture diverse ed è fondamentale che ogni designer prenda in considerazione queste potenziali differenze quando progetta in contesti interculturali.

Per esempio, per noi il bianco è generalmente associato ad attributi positivi nella cultura occidentale come purezza, semplicità, pulizia, mentre nella cultura asiatica il bianco viene associato alla morte e al lutto. Il blu da noi viene associato alla fiducia, all’affidabilità e alla pace mente in alcune culture sudamericane è associato ai problemi.

Argomento interessante vero? Ecco un link per approfondire i colori in ogni cultura.

 

unnamed (2).jpg

 

Accessibilità, ricordatelo sempre

Altro elemento da tenere in considerazione per la scelta di colori è l'accessibilità. Lo abbiamo già accennato quando abbiamo parlato del contrasto tra testo e sfondo Evitate di usare colori fluo se non siete in Cyberpunk.

Come designer, dovremmo sempre progettare tenendo presente l'accessibilità in modo che i nostri progetti possano essere utilizzati da chiunque, indipendentemente da disabilità fisiche, mentali o cognitive.

Ma come si crea una tavolozza di colori di successo, cioè esteticamente gradevole, accessibile e flessibile?

 

Giallo Post-it, Rosso Ferrari, Blu Tiffany...

Generalmente quando progettiamo un sito web, basiamo la nostra palette colori su una brand identity, per aiutare gli utenti ad associare il sito web all’attività in questione.

Questa palette dovrà però sicuramente essere ampliata, sia per garantire una migliore accessibilità all’utente, sia per consentire l’utilizzo di elementi chiave dello UI design, come pulsanti di conferma o di errore, ma anche fondi neutri per il contenuto.

 

unnamed (3).jpg

 

Non Pin up ma proporzioni

A proposito di colori neutri da utilizzare, nella progettazione della nostra UI può essere molto utile basarci sulla regola del 60-30-10: indipendentemente dai colori che vengono usati nel design, questi dovrebbero essere distribuiti in un rapporto di proporzione del 60% - 30% - 10%.

Solitamente il 60% è utilizzato proprio dai colori neutri. Allo stesso modo, il 10% solitamente è riservato a elementi importanti che aiuteranno l’utente a navigare nell’interfaccia (come pulsanti, ecc.).

Questa regola, utilizzata anche in altri campi del design come l’arredamento, aiuta a creare armonia e gerarchia, ovviamente non è sempre possibile applicarla a seconda della natura dell’interfaccia ma è bene comunque tenerla sempre a mente.

 

unnamed (4).jpg

 

Basta un poco di zucch...saturazione

Ve lo abbiamo già accennato sui social con il nostro consiglio di design: Mary Poppins insegna, basta un poco di colore e il nero ha un tocco in più.

Quando usate dei colori come il nero ed il grigio, cercate di inserire all’interno di questi una punta di colore in modo da allinearli col resto della palette.

Non bisogna usare grigi e neri puri, non solo perché in realtà grigio e nero puro non esistono ma aggiungendo un po’ di saturazione gli utenti si rapporteranno maggiormente a questi colori inconsciamente poiché si ricollegano ad un colore già presente sull’interfaccia.

 

Ma quali sono i colori giusti da abbinare?

Per creare una palette di colori armoniosa ed equilibrata ci sono cinque combinazioni base da ricordare.

 

Combinazione di colori - Monocromatico

In questo tipo di combinazione tutti i colori sono toni, tinte o sfumature di un colore di base. Facile da usare ma bisogna fare attenzione a non rendere la nostra pagina troppo noiosa e statica.

 

unnamed (5).jpg

 

Combinazione di colori - Analogo

Questa combinazione si concentra sulla corrispondenza dei colori che si trovano uno accanto all'altro sulla ruota dei colori (in entrambe le direzioni).

Consente di giocare con tonalità diverse ma senza dover pensare troppo a come interagiranno tra loro poiché sono di natura simile. Da un lato crea un design uniforme e coerente, dall’altro, però, può diventare opprimente se ci sono troppi colori e mancherà inoltre di un contrasto più forte. Una soluzione potrebbe essere quella di scegliere uno dei colori come tonalità dominante e utilizzare gli altri come accenti o colori secondari.

 

unnamed (6).jpg

 

Combinazione di colori - Complementare

Qui invece si utilizzano i colori sui lati opposti della ruota dei colori (rosso e verde, blu e arancione, ecc.). Il vantaggio principale è che ha un forte impatto ma bisognerebbe aggiungere toni e tinte di ciascun colore.

 

unnamed (7).jpg

 

Combinazione di colori - Triadico

Questa combinazione richiede tre colori che hanno uguale spazio tra loro all'interno della ruota dei colori.

 

unnamed (8).jpg

 

Combinazione di colori - Tetradico

Come la combinazione triadica ma con un colore in più: prendere quindi quattro colori da punti equidistanti sulla ruota dei colori. Più colori hai, più flessibilità ottieni con la tavolozza. Attenzione però, potrebbe diventare difficile da bilanciare.

 

unnamed (9).jpg

 

Ma che colori utilizzare quindi?

Non esistono colori giusti o sbagliati. Esistono colori adatti che ovviamente variano in base al proprio sito, al nostro marchio e personalità e allo scopo che vogliamo raggiungere.

Il colore ha molti ruoli nella progettazione dell’interfaccia utente e ciascuno di questi ruoli può aiutarci a creare un solido design per una migliore esperienza utente. Bisogna quindi scegliere le combinazioni con saggezza per trasmettere il giusto messaggio.

Creare uno schema di colori potrebbe pure essere semplice perché esistono diversi strumenti per generare palette automaticamente ma in realtà, quando si tratta di web design, la parte difficile è trovare il giusto equilibrio.

Si, anche Batman ha dei problemi ad abbinare i colori.

Contattaci

Vuoi progettare, migliorare o rinnovare la tua immagine? Perfezionare la UI/UX del tuo sito?

Anche se - semplicemente - vuoi prendere un caffè con noi o vedere la nostra collezione di Action Figures scrivici tramite questo form.

Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla privacy e i Termini di servizio di Google.