Anche Batman ha dei problemi ad abbinare i colori

DEVSIGN TIPS - Piccoli consigli di design per gli sviluppatori

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.

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.

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.

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.

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.

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.

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.

Combinazione di colori - Triadico

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

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.

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.

Ti interessano i nostri consigli di design? Ecco cosa ti sei perso nelle puntate precedenti:

Evitate di usare colori fluo se non siete in Cyberpunk