Creare un color system scalabile per i propri prodotti digitali non è una passeggiata, ma negli anni ho individuato alcuni aspetti che andrebbero sempre tenuti in considerazione, e voglio condividerli con voi!
Apparentemente gestire il colore sembra semplice, ma convincere un intero team di designer e sviluppatori a seguire le tue linee guida per realizzare un progetto è un’impresa enorme.
Grazie al recente aggiornamento delle linee guida della comunicazione di Be.Family abbiamo imparato molto. Di sicuro non è ancora perfetto, ma finora funziona abbastanza bene.
Questi sono alcuni vincoli che ci siamo dati per la definizione e la costruzione del nostro Design System e le principali problematiche che comunemente affrontiamo:
Vincoli
Il nostro sistema di identità visiva è fortemente vincolato all’accessibilità AA (lo so, non è AAA, ma non può avere tutto nella vita).
Per determinare come costruire il tuo sistema, considera quanto segue:
Accessibilità
L’accessibilità del colore significa creare sufficiente contrasto tra un elemento e il suo sfondo: quanto è facile per tutti leggere il testo o vedere un’icona.
Ci sono due livelli WCAG 2.1 che hanno requisiti di contrasto diversi per icone, elementi interattivi, testo grande e piccolo.
Il livello AA è un requisito legale per la maggior parte delle aziende di architettura, trasporti o governative.
Flessibilità
Il sistema più flessibile sarebbe quello di lavorare con moltissimi valori esadecimali, ma questo potrebbe renderebbe difficile mantenere la coerenza all’interno di un prodotto digitale (soprattutto se ci si lavora in team).
Conviene quindi, a volte, darsi dei “paletti” e consentire solo una piccola quantità di colori e utilizzarli in modo molto specifico.
Quindi, quale soluzione scegliere?
Il mio consiglio è: costruisci un sistema più “rigido” se l’uso del colore può essere chiaramente documentato e ci sono pochi casi d’uso, altrimenti crea un sistema più “flessibile” se l’utilizzo del colore è complesso (dovrai realizzare infografiche, illustrazioni, schemi, ecc).
Capacità di espansione
I prodotti digitali spesso, in particolare all’inizio, sono molto ridotti rispetto a come evolvono nel tempo.
Si lanciano infatti i cosiddetti MVP (Minimum Viable Product) che nel tempo si strutturano.
E questa evoluzione porta a delle spiacevoli prese di coscienza: una tra questa probabilmente sarà che durante lo sviluppo del primo color system non avrai considerato alcune dinamiche, come ad esempio la dark mode (su cui spenderà qualche parola in più tra poco).
Come costruire il nostro color system?
La costruzione di un buon color system si basa su ciò che sai e su ciò che puoi anticipare relativamente al design del tuo prodotto.
La maggior parte dei color system contiene casi d’uso comuni perché sono noti (verde, rosso, arancione per i messaggi di stato ad esempio), ma anticipare la necessità di colori aggiuntivi renderà il tuo sistema molto più affidabile e pronto ad ogni evenienza.
Utilizzando strumenti come Color Box, è possibile creare facilmente e molto velocemente tinte e sfumature in ogni gamma per coprire tutti i casi d’uso di cui abbiamo bisogno.
Fate però attenzione alla nomenclatura.
È molto importante infatti rinominare tutti i colori affinché siano facilmente identificabili e numerati per offrire la possibilità di aggiungere più tinte e sfumature intermedie in futuro, se necessario.
Non esiste una vera e propria regola giusta o sbagliata per la nomenclatura, l’importante è che ce ne sia una! Confrontatevi in team e scegliete quella che ritenete più adatta a voi e al vostro modo di lavorare.
Come anticipavo poco fa quindi, seguendo questa logica è possibile creare uno spettro colori che si adatta molto bene sia alla light mode sia alla dark mode, utilizzando lo stesso nome per le tinte così da poter “switchare” facilmente modalità.
Problemi principali
Spesso mi trovo a confrontarmi con gli altri designer, che lavorano ad un progetto insieme a me, su come utilizzare i colori del brand all’interno del prodotto digitale che stiamo realizzando e
Capita ad esempio che, alcune volte, un colore particolarmente vivace utilizzato per le call to action attiri l’attenzione dell’utente e interrompa il flusso di navigazione, rendendo più difficile il conseguimento di un obiettivo.
In questo caso, che si fa?
Per molti prodotti, infatti, il colore predominante dell’azienda viene utilizzato per le call to action principali.
Logo del brand blu = bottoni blu. Facile.
Purtroppo non è sempre possibile, in quanto capita che i colori aziendali non soddisfino i requisiti di accessibilità, e quindi si sceglie di utilizzare un colore alternativo.
Questa scelta può però portare a due potenziali problemi:
- Con il passare del tempo altri designer che lavorano al progetto potrebbero “dimenticarselo” e usare il “colore aziendale”, rendendo difficile mantenere questa logica anche in futuro;
- Il rischio che il colore utilizzato più frequentemente nel prodotto definisca l’identità dell’azienda. In questo caso è importante assicurarsi che il brand al di fuori dell’app sia abbastanza forte da consentire agli utenti di associarlo al colore desiderato.
Obiettivi e gerarchia
Le proporzioni del colore su uno schermo aiutano a definire la gerarchia delle varie informazioni.
A causa delle dimensioni dello schermo e della quantità di contenuti, alcuni elementi/call to action potrebbero avere solo una piccola porzione di spazio a disposizione e spetta al colore il compito di farle risaltare.
Questo tuttavia porta alle volte un risultato catastrofico: un’app arcobaleno in cui ogni funzionalità cerca di conquistare l’attenzione l’utente.
Definisci quindi obiettivi chiari per ogni schermata all’interno di un flusso principale e in base a quello pondera l’utilizzo dei colori.
Uso esclusivo del colore
Molti designer, me compreso, adorano creare funzionalità che possiedono esclusivamente un colore.
L’idea di fondo è di fare in modo che l’utente associ rapidamente il colore a una specifica funzione in tutta l’app.
Ciò è possibile se il colore viene utilizzato frequentemente e in modo coerente per indicare sempre la stessa cosa.
Tuttavia, con solo pochi colori a disposizione (una volta rimosso il colore principale e gli stati), nella maggior parte dei casi, una funzionalità difficilmente è abbastanza importante da impedire a tutte le altre di utilizzare lo stesso colore.
In questo Uber fa scuola, perché:
- Ha scelto di connotare il suo blu con un forte messaggio;
- Valuta bene l’importanza di una funzionalità considerando il flusso di navigazione e la gerarchia nella schermata rispetto ad altre funzionalità.
- Conferisce differente importanza agli elementi utilizzando il colore, ma in altri modi – come ad esempio con l’iconografia.
Lavorando a progetti complessi ci sarà sempre qualche problema relativo al colore, ciò che più importa è cercare di prevenirli il più possibile e farsi trovare pronti.
Trovando il giusto equilibrio e mantenendo sempre una buona coerenza.
