Quando applichiamo la carta grafica alle nostre interfacce, dobbiamo porci la questione del colore.
Se è già stata creata una carta, è necessario leggerla e applicarla (spesso sotto l'occhio vigile dell'ufficio marketing e comunicazione, che garantisce il corretto utilizzo degli elementi grafici).
Ma potresti essere incaricato di creare il grafico e quindi di scegliere i colori. Per costruire la carta, devi prestare particolare attenzione al simbolismo e alla combinazione di colori.
Una tavolozza coerente e armoniosa consente di consegnare correttamente un messaggio. I colori hanno un potere di comunicazione molto potente. A seconda del suo utilizzo, della scelta e della diversità dei colori scelti, sarai in grado di creare una gerarchia tra i tuoi contenuti ed evidenziare alcuni elementi, inclusi ad esempio inviti all'azione.
Particolare attenzione dovrebbe essere prestata anche all'accessibilità. Quando menzioniamo l'accessibilità per i colori, pensiamo principalmente al contrasto dei colori tra sfondi e testi. C'è un rapporto per scegliere le giuste corrispondenze di colore.
ti condivido uno strumento online che ti permetterà di convalidare il matrimonio dei tuoi colori in termini di accessibilità al web.
La creazione di una tavolozza di colori ha tre scopi :
- Porta estetica, armonia e coerenza alle tue interfacce.
- Fai conoscere ai tuoi lettori i problemi, i valori e la personalità del tuo marchio.
- Distinguiti e segna gli spiriti rispetto ai concorrenti.
Potrei anche aggiungere un argomento parlando con te di organizzazione: da designer, definire velocemente la tua tavolozza di colori e attenerti ad essa ti permette di costruire interfacce con calma e di non perderti.
Quindi oggi condivido i miei consigli per costruire la tua tavolozza di colori.
Non esitate a darci nei commenti le vostre buone pratiche sui vostri progetti! In UX Republic, ascoltiamo sempre le tue migliori pratiche e la tua opinione!
# 1 Colore principale
Cominciamo dall'inizio : il colore principale del tuo sito! È il colore che dà vita alla tua identità di marca.
Per questo colore dominante, è interessante conoscere la psicologia e il significato di
colori. Così, a seconda del settore di attività, della tipologia o del target, riceverai aiuto per sceglierlo.
Non scegliere in base alle tue preferenze personali o alle tendenze del design. Devi avere argomenti forti per il tuo cliente e soprattutto il tuo obiettivo è inviare un messaggio agli utenti attraverso il colore.
È possibile creare variazioni da questo colore per ottenere diverse tonalità e diverse opacità.
# 2 Colore secondario
Il colore secondario fornisce contrasto con il colore principale.
Devi pensare che simboleggia diversi stati nelle tue interfacce e in particolari azioni (call-to-action e link, ad esempio).
Dal momento che punterà le interazioni e i contenuti importanti, è essenziale scegliere un colore che si distingua e incoraggi a fare clic, pur rimanendo in armonia con la tua carta.
Come trovo questo colore ?
Generalmente si sceglie un colore opposto e complementare al colore principale. Puoi usare la ruota dei colori per questo. Ma questa non è una regola assoluta! Libera la tua creatività!
Molti siti utilizzano il nero come colore d'azione (soprattutto nel settore del lusso) e funziona perché si adatta all'universo del marchio e vengono utilizzati altri processi per evidenziare il contenuto.
Il colore secondario è una buona pratica nella progettazione UX, ma molti designer non lo usano e usano il colore principale come colore dell'azione.
Ad esempio, nelle linee guida Apple, troviamo il Tint Color, questo colore unico che simboleggia il colore del marchio/prodotto e gli elementi cliccabili.
# 3 Colori di sfondo
Il colore di sfondo utilizzato è spesso bianco o grigio chiaro. Ma ancora una volta, non esitare a fare dei test per risvegliare la tua creatività.
● Il bianco è un'opzione sicura, è un colore pulito che farà risaltare i tuoi contenuti.
● Il grigio chiaro permette di evidenziare i contenuti con sfondi bianchi e quindi di evidenziarli (mappe o una tabella per esempio).
● I colori scuri puoi anche rendere la tua interfaccia più scura e usare sfumature scure come il grigio antracite o il blu notte. Ancora una volta, a seconda della tavolozza.
● Gradienti sono anche un'opzione e per questo sono necessari più colori che vanno insieme e non creano squilibri o spaccature troppo pronunciate.
Il mio trucco per determinare il colore di sfondo è partire dal colore principale e schiarirlo per creare una connessione con esso.
Come trovo questo colore ?
- Seleziono il colore principale in Figma, Sketch o altri strumenti di progettazione.
- Passo alla modalità HSL (invece di essere in esadecimale, ad esempio.
- Cambio il valore "L" in 95.
# 4 Colori del testo
Una buona pratica da tenere a mente per i tuoi progetti è non usare il nero (#000000) per i tuoi elementi, in particolare i tuoi testi.
Preferiamo le varianti nere che partono dal blu, verde, grigio, … Anche in questo caso, a seconda della tavolozza.
Il mio trucco per determinare il colore del testo utilizza il metodo per il colore di sfondo, ovvero partire dal colore principale e scurirlo per creare un collegamento con esso.
Come trovo questo colore ?
- Seleziono il colore principale in Figma, Sketch o altri strumenti di progettazione
Passo alla modalità HSL (invece di essere in esadecimale per esempio) - Cambio il valore "L" su 10
Ti consiglio anche di scegliere due colori per i testi. Uno scuro e uno più chiaro per creare una gerarchia tra diversi tipi di contenuto.
# 5 Colori di avviso
Per alcuni tipi di sito, è interessante fornire i colori per gli avvisi: rosso, arancione e verde.
Possono essere utilizzati per inviare messaggi o notifiche ai tuoi utenti come un errore o una convalida.
Questi sono i colori che vengono utilizzati per :
● messaggi di errore, 404 pagine, avvisi (snackbar, toast, modali, ecc.).
● gli stati e/o gli stati di un elemento
● pulsanti o collegamenti (rossi per distruggere o eliminare ad esempio)
# In conclusione
Per costruire una tavolozza di colori, il tuo primo compito è quindi scegliere prima il tuo colore principale. Grazie a questa scelta, potrai creare una tavolozza armoniosa e coerente.
Una piccola parentesi sull'uso e la condivisione della carta che stai per creare: prendi in considerazione la creazione di un documento che raggruppi i colori e i loro usi per condividerlo con il team di progetto e in particolare con gli sviluppatori del progetto.
Può anche assumere la forma di una libreria nel tuo strumento di progettazione preferito.
E in questo caso vi consiglio di utilizzare i termini (“colore-primario”, “colore-secondario”, …) . E non il nome del colore (“Blue”, “red”, “#FEFEFE, …).
Pertanto, se viene apportata una modifica, sarà più facile per te. E sarà in uso anche durante la creazione dei tuoi diversi corsi.
Ricordati di prenderti il tuo tempo per trarre ispirazione, controllare i simboli, quindi fare i test e sfidare le tue scelte.
Fonte immagine: https://undraw.co/illustrazioni
Alexa CUELLAR UX-UI Designer @UX-Republic
