Per qualsiasi designer, la scelta e l’uso dei colori per la palette è fondamentale per trasmettere al meglio il messaggio che il brand vuole comunicare.
Non solo, il colore, come vedremo, trasmette delle sensazioni e delle emozioni.
Ed in questo articolo parleremo proprio di questo ma nell’ottica di uno ui designer e Web designer.
Questo articolo va a ricollegarsi a quello sull’introduzione alla UI Design, infatti li accenniamo l’importanza delkla scelta dei colori.
Parleremo soprattutto di processi per creare una palette, partendo dal significato e dall’importanza che ha. Infatti, troppe volte si usano questi termini in modo errato, quindi cominciamo e se sei interessato a capire cos’è una palette colori, su come utilizzarla; consiglio di proseguire la lettura dell’articolo.
Cos’è una palette?
La palette è un insieme di colori che, abbinati tra dio loro, creano una giusta armonia che è ricollegabile al brand.
Non solo..Il colore è uno degli elementi che comunica al meglio il messaggio che, il brand, vuole inviare al suo pubblico.
Un’esempio pratico è Apple, infatti quello che comunica questa azienda è noto a tutti: minimalismo, eleganza, pulizia delle linee, modernità.
E infatti, visitando il sito ufficiale di Apple, si notano degli abbinamenti colori molto ben studiati. Lo sfondo di alcuni molti sezioni sono bianche con una scritta in nero.
Il resto lo fanno le immagini luminose e iper colorate dei prodotti.
Quindi, come già abbiamo trattato inoltro articolo, la palette è uno dei primi elementi a cui guardare per iniziare a progettare una buona UI.
La palette deve essere ben coordinata con quello che è il brand del cliente, perché chi vede il prodotto finale deve subito vedere un collegamento diretti con il brand.
Oltre a tutto questo , la palette appena viene applicata alla UI non deve disturbare la navigazione del sito o dell’app; quindi i colori non devono essere troppo luminosi e non devo dare disturbo all’ occhio dell’utente.
Come vedremo, nei capitoli successivi, sul mercato ci sono tanti strumenti che aiutano i designer nella fase di scelta della palette.
Quali sono i fondamentali per una buona palette?
Ma prima di creare la vostra palette di colori, è giusto comprendere alcune nozioni importanti sull’argomento.
Infatti per creare una palette, non basta avere un buon gusto; bisogna sapere alcune nozioni perchè i colori comunicano e bisogna trovare quelli giusti per dare i giusti messaggi al target.
La psicologia
Innanzitutto bisogna capire che ogni colore, porta con sé un messaggio e comunica un’emozione o una sensazione.
Ad esempio, il verde si intende un’operazione che è andata buon fine.
Infatti il verde comunica successo, natura..insomma delle sensazioni positive.
Per questo, quando un’utente invia un form correttamente..Compare un messaggio di successo che, in molti casi, è caratterizzato dal color verde.
Invece quando c’è un’errore , o una segnalazioni di pericolo, il colore sarà il rosso che comunica pericolo, urgenza ed è un colore talmente acceso che attira subito l’attenzione
La ruota dei colori
Altro strumento fondamentale è comprendere al meglio la ruota cromatica dei colori, che descrive al meglio quali colori sono complementari., quali meno. Quindi decidere.
i colori della palette in base a quello.
- Monocromatica: cioè una ruota cromatica composta da solo un colore che poi viene declinato in varie gradazione, così a creare una gerarchia degli elementi. Quindi si ha un minor rischio nel combinare i colori..Dato che il colore è uno.
- Analoga: che è composta da colori che nella ruota sono adiacenti tra di loro, in particolare modo domina colori che sono posizionati vicino l’uno all’altro; Questo permette di creare palette armoniosi con colori diversi ma non troppo distanti tra di loro.
- Complementare: che utilizza i colori che sono complementari tra di loro, quindi si creerà più contrasto tra i vari componenti e, con uno studio attento, si possono creare combinazioni tanto inusuali, quanto belle.
- Triadica che usa tre colori equidistanti sulla ruota cromatica, dando dei buoni contrasti ma senza andare a distruggere l’armonia della palette, ache qui, come nella complementare Il rischio di creare delle combinazioni colori inusuali è molto alto, quindi bisogna bilanciare al meglio la scelta dei coloro.
Come avete potuto leggere, comprendere la ruota dei colori è importante per scegliere al meglio l’abbinamento tra colori; per non creare palette corrette e che possano avere abbinamenti che non c’entrano nulla.
I processi per creare le palette
Ora arriviamo al punto del processo di scelta dei colori per la UI, qui vedremo quelli che sono le fasi per scegliere i colori e abbonamenti corretti.
Questi processi non sono i definitivi, ma sono più che altro consigli e idee per scegliere e, successivamente, utilizzare bene i colori delle palette.
Quindi, di seguito vengono elencati quelli che sono processi da tenere in considerazione, quando si vuole creare una bella palette di colori
Prendere ispirazione
Questa è la prima fase, ma secondo me, una delle più importanti, perché è giusto prendere ispirazione e nota guardando le idee, le palette dei più esperti.
Si può cominciare, consultando siti come Awwwards che pubblica i migliori web design delle migliori agenzie.
Ed in questo sito si possono filtrare i siti web con i colori utilizzati.
Oppure si possono navigare i siti web delle migliori aziende, per consultare le loro scelte e guardare che scelte di colori ci sono dietro ai più grandi case studies.
Altro consiglio potrebbe essere consultare le migliori brand guidelines.
Si ma cosa sono?
Sono le guide di utilizzo dei brand delle aziende, in cui si possono consultare tutti le Indicazioni su come utilizzare il brand.
Tra tutti questi consigli, poi ci sono quelli sui colori, e qui, è sicuramente utile vedere come avvengono le varie combinazioni senza danneggiare la comunicazione del brand.
Definire l’identità
Come detto, nei paragrafi precedenti, prima di scegliere i colori che compongono la palette di colori, bisogna esaminare per bene ciò che il brand vuole comunicare.
Ogni colore trasmette emozioni, sensazioni, e quindi non sui possono fare abbinamenti casuali.
Ad inizio articolo abbiamo fatto l’esempio di Apple, ma potremmo farne altri..Anche di brand meno noti.
Ad esempio, immaginiamo di fare una UI per un’azienda chimica.
Sicuramente, verrebbe quasi istintivo, di scegliere tra le varie tonalità di verde, blu, giallo.
Colori che richiama sicuramente ambiti scientifici ma anche piccoli richiami a elementi presenti in natura come acqua, piante, alberi ecc..
Se invece dovessimo avere a che fare con un brand presente nella cosmetica, si andrebbe più su colori come il rosa, rosso, il viola e altri.
La scelta del colore primario nella palette
Dopo aver definito l’identità, si parte con la scelta del colore primario.
Che cosa sarebbe?
E’ il colore che è utilizzato di più all’interno della UI ma non solo;
Che come detto, può avere anche tante tonalità all’interni della palette
Ma attenzione..Bisogna farne un’utilizzo equilibrato e saper farlo dialogare con gli altri colori della palette.
Ricordiamoci sempre le regole sulla gerarchia e che ogni elemento ha il suo peso e la sua importanza.
Il colore primario, solitamente, è quello predominante nel logo o nel brand dell’azienda.
I più grandi brand utilizzano sempre colori primari che comunichino al meglio Il loro messaggio, ad esempio il più memorabile tra tutti è il rosso Ferrari.
Un colore deciso e ben visibile , che comunica passione ma senza andare a rovinare l’eleganza di ogni elemento visivo dell’azienda.
Un’altro esempio di un’azienda, che nel proprio prodotto usa un colore primario ben definito è Facebook, infatti l’azienda di Zuckenberg utilizza il blu, che è anche il colore del logo, ed è prevalente in buona parte dell’interfaccia.
Quindi il colore primario è quello principale all’interno di una UI, ed è quello che, solitamente è Il più presente nell’interfaccia dell’applicativo o del sito web.
La regola 60-30-10
Per realizzare un’ottima interfaccia utente, bisogna avere una determinata gerarchia nell’uso dei colori all’interno della palette.
Per dare anche un risultato gradevole all’occhio dell’utente.
In aiuto ai designer, esiste una regola: quella del 60-30-10.
Che è utilizzata soprattutto in altri campi del design, come la decorazione d’interni
Cosa significa questa regola?
Significa la percentuale di presenza dei colori all’interno della UI.
- 60% è la percentuale che occupa il colore primario che, come detto, è quello che ha più importanza. E’ utilizzato per sfondi, per il testo principali e per i box, le cards e tutti quegli elementi che contengono informazioni primarie.
- 30% sta per la percentuale del colore secondario che dovrà fare da contorno e dialogare con il colore primario, creando un contrasto con esso ma senza invadere.
Principalmente, può essere utilizzato per sottotitoli, per i bordi dei box e divider, oppure per colorare i testi highlight cioè questi testi che possono subire interazione con l’utente, come un link che, se cliccato, cambia colore. - 10% è la percentuale dei colori che sono da ‘contorno’ ad esempio quelli da utilizzare per creare bottoni “Call To Action”.
Quindi per creare un’interfaccia con un ottimo bilanciamento dei colori, si può utilizzare questa regola.
Ma soprattuto, una regola da tenere ben a mente è che si può utilizzare una palette con pochi colori e renderla funzionale, comprensibile ed accessibile.
Non è consigliato cercare di utilizzare tanti colori..si rischia di creare mix di colori che rendono l’interfaccia poco comprensibile e armoniosa.
Il colore primario è sicuramente quello dominante, il secondario è quello che dialoga con il primario..
Che può essere anche una tonalità più chiara del colore primario e deve bilanciare il peso dominante.
I neutri e i colori di stato
I neutri e i colori utiulizzati per gli stati, sono altri due elementi importanti da inserire all’interno dei processi della creazione di una palette.
Ad esempio l’utilizzo del colore bianco è fondamentale per gli spazi negativi che tanto negativi non sono, dato che è lo spazio vuoto che serve a dar respiro all’interfaccia.
I neutri, possono essere utilizzati per dare gerarchia a molti elementi testuali.
Ad esempio, potremmo utilizzare un nero per i titoli, invece per i sottotitoli una tonalità di nero diversa che stacchi dal titolo, dando il giusto all’articolo formato da essi.
Invece i colori di stato, come dice il nome, sono quei colori che sono degli indicatori per lo stato di alcuni processi.
Ad esempio, una progress bar che, quando l’utente esegue l’upload di un file, diventa verde.
Oppure il testo rosso che si trova sotto gli input vuoti ma che sono obbligatori da compliare.
Ecco sono tutti colori molto fori e accesi, apposta per attirare subito l’attenzione dell’utente.
Alcuni strumenti utili
Come tutti sanno, internet è pieno di strumenti che aiutano i designer, stesso discorso vale per la fase di scelta della palette.
I siti in cui trovare dei generatori di palette sono molti, oppure siti con i colori più utilizzati divisi per tonalità.
Io, personalmente, ho sempre utilizzato pochi strumenti perché ne ho trovati alcuni che mi ha sempre aiutato, quindi, per un motivo di continuità, ho continuato a usare quelli.
Parto dal primo che che flatuicolorpicker.com, che è un sito molto utile perché raccoglie tutti i colori più utilizzati per creare palette interessanti.
In questo sito si trovano moltissimi colori divisi per tonalità ed ogni colore, ha una pagina di dettaglio dove trovare i valori rgb, hsl, cmyk, da copiare e da inserire nel progetto o nel codice css.
Non solo..Nella parte inferiore della pagina, sono illustrati degli esempi pratici su come inserire il codice del colore all’interno di file css per colorare i testi, lo sfondo o i bordi.
Questo sito sera molto utile quando era stato introdotto il trend del flat design, con grafiche caratterizzato da semplicità e minimalismo quindi anche molto accessibili.
Il secondo strumento che utilizzo molto è un il sito Coolors, in cui si può utilizzare un generatore che ti mette a disposizione varie opzioni per testare i contrasti, la luminosità dei colori.
Inoltre dal generatore, abbiamo a disposizione uno strumento molto interessante per testare i colori nella versioni in cui lo vedono utenti affetti da daltonismo, acromatomalia, protanomalia.
Invece, per chi volesse spendere meno tempo e avere delle palette già generate, Coloors mette a disposizione palette già ‘confezionate’ e pronte da testare.
Ovviamente tutte queste palette, successivamente, possono essere editabili dal generatore.
Infine una bellissima features che ha Coloors è il visualizers.
Che permette di vedere le palette su degli esempi di manifesti, interfacce grafiche ed illustrazioni.
E’ una sezione a parte, in cui si può testare, modificare i colori con degli esempi sotto mano per aiutare l’utente.
Le conclusioni
In questo articolo possiamo avere una bella panoramica di quello che è il tema delle palette.
Ognuno ha un proprio metodo, ma diciamo che, qui, si sono elencati alcuni processi standard per creare una buona palette.
La cosa fondamentale che, deve uscire dall’articolo, è che bisogna comprendere che significato ha un colore perchè il designer deve comunicare ciò che è il brand.