Uno spettro di possibilità: la guida ai colori dell'interfaccia utente di riferimento
Pubblicato: 2022-03-11Non c'è modo di aggirarlo: il colore è l'elemento creativo di maggior impatto nel visual design. Dagli incantevoli fondali scenici della scenografia alle intricate composizioni della pixel art, una solida comprensione del colore è la chiave principale per una comunicazione avvincente. Hai bisogno di una prova?
Quando i partecipanti a un recente studio incentrato sul marchio sono stati sfidati a disegnare i loghi di 10 aziende iconiche, solo il 16% è stato in grado di ricordare forme e caratteristiche di design accurate. Tuttavia, quando è stato chiesto di identificare la tavolozza dei colori di un marchio, il numero di risposte corrette è salito all'80%.
Il colore svolge anche un ruolo influente nel mondo della progettazione dell'interfaccia utente. I prodotti digitali con cui interagiamo quotidianamente si basano sull'uso strategico del colore per comunicare informazioni importanti, quindi è fondamentale che i designer di UX e UI comprendano come maneggiare il colore con saggezza.
In questa guida:
- Demistificare le basi della teoria dei colori,
- Fornire solidi principi per lavorare con il colore nelle interfacce digitali,
- Condividi risorse utili per aumentare la consapevolezza del colore e
- Consenti ai progettisti dell'interfaccia utente di creare le proprie straordinarie combinazioni di colori.
L'obiettivo di questa guida è la competenza sul colore, seguita dall'affidabilità del colore, il tutto per il bene di una straordinaria esecuzione del colore nelle interfacce utente che incontriamo ogni giorno.
Corso accelerato: teoria del colore per i progettisti dell'interfaccia utente
La teoria del colore è un vasto campo di studio con una propria terminologia, metodologia e basi scientifiche. Può essere complicato, ma non è quello che vogliamo. Quello che vogliamo è una comprensione del colore che possa essere applicata con una precisione fulminea. Vogliamo usare il colore nel modo in cui usiamo le forme: senza sforzo, audacemente ed efficacemente.
Per utilizzare il colore in questo modo, i progettisti dell'interfaccia utente devono avere una solida comprensione di questi concetti fondamentali della teoria del colore:
- Il colore è relativo.
- Il sovraccarico di saturazione uccide la vivacità del colore.
- Il contrasto simultaneo ha pro e contro.
- Le combinazioni di colori di base sono le migliori.
- La tonalità ha sempre un impatto sul valore.
Scendiamo.
Il colore è relativo
Il colore non sta mai da solo. Poiché l'occhio umano e il cervello lavorano insieme per vedere un colore, sono sempre influenzati da:
- Luce che brilla sul colore
- Altri colori che circondano il colore
Dai un'occhiata a questo esempio dalla natura:
A: Il cervello e l'occhio lavorano insieme per aiutarci a capire che il fiore nel suo insieme è in realtà di un rosso brillante.
B & C: Il marrone scuro dell'ombra del fiore (B) fa apparire l'evidenziazione sulla cresta del petalo (C) molto più luminosa del colore marrone scuro opaco che è in realtà. In sostanza, la luce che brilla sulla cresta del petalo e il colore dell'ombra lavorano in tandem per ingannare l'occhio e intensificare la luce.
Ecco un altro esempio che mostra quanto il colore possa essere ingannevole:
Nella progettazione dell'interfaccia utente, la relatività del colore non è sempre così ovvia, quindi i colori all'interno di uno schema dovrebbero essere testati l'uno contro l'altro. Come mai? Perché quella selezione di colori ben organizzata nella tua guida di stile potrebbe rivelarsi problematica se applicata a un'interfaccia.
Il grande asporto? Non coccolare i tuoi concetti di colore. Se un campione di giallo accento sembra rigoglioso quando è circondato da spazi bianchi in Sketch ma si scontra con la combinazione di colori dominante di un'interfaccia utente, trova una soluzione diversa.
Il sovraccarico di saturazione uccide la vivacità del colore
La saturazione del colore è parte integrante della vivacità del colore. Tuttavia, uno schema assemblato attorno a nient'altro che colori altamente saturi travolge l'occhio e la vivacità è ridotta. Con il colore, meno è di più. Un colore altamente saturo diventa vibrante se utilizzato in tandem con colori meno saturi.
Il contrasto simultaneo ha vantaggi e svantaggi
Il contrasto simultaneo si verifica quando i complementi di colore dello stesso identico valore sono posti adiacenti l'uno all'altro. L'effetto è così intenso che fa vibrare o pulsare il punto in cui i due colori si incontrano.
Per i progettisti dell'interfaccia utente, il contrasto simultaneo può avere esiti positivi e negativi, quindi è importante capire come controllare la potenza di questo fenomeno visivo.
Ad esempio, in un'interfaccia progettata attorno a una varietà di blu, l'utilizzo di un'arancia complementare con lo stesso valore del colore di ancoraggio blu sarebbe un ottimo modo per attirare l'attenzione sulle icone di notifica.
Tuttavia, la stessa combinazione arancione e blu indurrebbe l'emicrania se utilizzata per il testo e lo sfondo dei menu a discesa.
Le combinazioni di colori di base sono le migliori
Gli arcobaleni sono belli, in natura. Nella progettazione dell'interfaccia utente, il colore deve essere utilizzato in modo più selettivo o travolge l'esperienza. Anche quando i marchi hanno tavolozze ad alto impatto con un'ampia gamma di opzioni, è meglio mostrare moderazione e costruire interfacce utente attorno a schemi di colori semplici.
Ecco due piani infallibili per la creazione di una combinazione di colori di base dell'interfaccia utente:
1. Schemi di colori dell'interfaccia utente analoghi
- Questi schemi piacevoli per gli occhi sono costituiti da colori strettamente raggruppati sulla ruota dei colori.
- Schemi di colori analoghi sono facili da trovare nelle foto di ambienti naturali, in particolare la vita vegetale, e tendono a calmare visivamente.
- La varietà in schemi analoghi deriva da cambiamenti di saturazione e luminosità, non da grandi cambiamenti di tonalità.
- Quando si utilizza uno schema analogo, provare ad aggiungere un colore altamente saturo direttamente attraverso la ruota dei colori per creare enfasi all'interno di un'interfaccia.
2. Combinazioni di colori dell'interfaccia utente complementari
- Le combinazioni di colori complementari si basano sull'interazione di colori freddi e caldi complementari che esistono uno di fronte all'altro sulla ruota dei colori.
- La varietà di colore si ottiene alterando la saturazione e la luminosità tra gli estremi complementari.
- L'uso di troppi colori luminosi e altamente saturi mina l'impatto degli schemi complementari.
La tonalità influisce sempre sul valore
Può sembrare strano, ma i colori hanno valori di grigio corrispondenti. Ecco la prova:
Nell'immagine sopra, abbiamo una gamma di tonalità al 100% di luminosità e saturazione, ma guarda cosa succede quando questi colori vengono convertiti in scala di grigi:
Boom! Viene rivelata un'intera gamma di valori di grigio. Perché questo è importante per i progettisti dell'interfaccia utente? Una parola: contrasto .
Passa per un momento alla scala di grigi. Se stavi cercando di creare contrasto, useresti mai un valore di grigio del 40% oltre al 50%? Ovviamente no, ma questo è esattamente ciò che si rischia quando la tonalità viene lasciata fuori dall'equazione del contrasto del colore.
Ricorda, la tonalità ha sempre un impatto sul valore.
4 Principi essenziali del colore per le interfacce digitali
Ora che abbiamo semplificato la teoria del colore e correlato i suoi concetti fondamentali alla progettazione dell'interfaccia utente, è tempo di dare uno sguardo più mirato al ruolo svolto dal colore nelle interfacce digitali. Questi sono i quattro principi di colore che devono essere considerati fin dai primi sforzi di ogni progetto di progettazione dell'interfaccia utente.
- Il rapporto tra testo e colore è cruciale.
- L'accessibilità del colore non può essere ignorata.
- Il contrasto è essenziale, ma non è un toccasana per il design.
- Il colore funziona meglio se applicato in modo proporzionale.
La relazione tra testo e colore è fondamentale
Il colore influisce sulla leggibilità. La maggior parte dei progettisti dell'interfaccia utente lo capisce in linea di principio, motivo per cui non vediamo molte interfacce con corpo del testo verde su sfondi rossi. Invece, la tensione tra testo e colore si accende in modo sottile, insinuando attraverso componenti comuni dell'interfaccia utente come moduli, pulsanti, intestazioni e icone.
Mantieni una sana relazione testo/colore seguendo queste semplici linee guida:
- Evitare sempre un basso contrasto tra testo e sfondo.
- Non utilizzare colori complementari per testo e sfondo, soprattutto quando i colori hanno luminosità e saturazione simili (ad es. testo giallo su sfondo viola).
- Anche su sfondi bianchi, non impostare il corpo del testo con colori vivaci. Il nero e il grigio scuro sono i più facili da leggere.
L'accessibilità del colore non può essere ignorata
Il colore è comunicativo, ma non può essere l'unico elemento di design utilizzato per trasmettere informazioni in un'interfaccia utente. Perché no? Perché alcuni utenti del web percepiscono il colore in modo diverso (o per niente) rispetto alla maggior parte della popolazione.
Ad esempio, una persona che soffre di daltonismo potrebbe non essere in grado di dire quando l'icona di un prodotto è nel suo stato "premuto" se l'unica differenza nell'icona è un cambiamento di colore.
Inoltre, alcune persone hanno difficoltà a vedere componenti importanti dell'interfaccia utente con un contrasto cromatico basso rispetto allo sfondo di un'interfaccia. Siti come Colorable e Contrast Ratio consentono ai designer di testare rapidamente una gamma di abbinamenti di colori per l'accessibilità del contrasto.
Il contrasto è essenziale, ma non è un toccasana per il design
Sì, il contrasto cromatico nella progettazione dell'interfaccia utente è importante. Pianificalo, implementalo, trai vantaggio da esso. Ma non aspettarti di agitarlo come una bacchetta magica e correggere un design scadente.
Forma, spazio, dimensioni e altri elementi di design non devono essere ignorati. Il contrasto del colore può rendere attraente un'interfaccia utente orribile, ma non risolverà una brutta esperienza utente.
Il colore funziona meglio se applicato in modo proporzionale
Immagina un'app di notizie in cui ogni istanza di testo è impostata nel titolo o un sito Web di eCommerce progettato su una griglia di immagini 9x9. Entrambi sarebbero terribili!
I progettisti esperti dell'interfaccia utente utilizzano elementi di design come la tipografia e la ripetizione in modo proporzionale per migliorare la gerarchia del design. Il colore merita la stessa ponderata considerazione. Nella progettazione dell'interfaccia utente, l'utilizzo di troppi colori confonde il modo in cui vengono percepite le informazioni.
Risorse colore per un progresso continuo
Ecco una scomoda verità: progettare con il colore è un'abilità e le abilità devono essere sviluppate. La maggior parte dei designer dell'interfaccia utente ha un'idea innata di quali colori stanno bene insieme (ovvero il gusto del colore), ma questo non si traduce sempre in applicazione.
Per padroneggiare veramente il colore e vedere il suo pieno impatto sulla progettazione dell'interfaccia utente, i designer devono esercitarsi. Fortunatamente, ci sono molte risorse per aiutare con l'apprendimento continuo del colore e lo sviluppo delle abilità.
Ctrl+Colore
Se sei un designer dell'interfaccia utente che cerca di acquisire un'immediata sicurezza del colore, inizia con ctrlpaint.com, un sito Web dedicato alle istruzioni di pittura digitale. Pittura digitale? Davvero?
Assolutamente. Il concept artist professionista Matt Kohr insegna l'uso del colore digitale attraverso brevi tutorial video ed esercizi pratici. Il curriculum è meravigliosamente semplice e incentrato sul "dipingere ciò che vedi", sia nel mondo fisico che nell'immaginazione.
Inizia con la videoteca gratuita (Sezione 11) prima di passare agli esercizi più intensivi nel Color Starter Kit .
Josef Albers e l'interazione di Color App
La comprensione contemporanea della relatività del colore è stata ampiamente esplorata e avanzata dall'approccio pratico prima della teoria dell'artista/educatore Josef Albers.
Albers ha proposto che un singolo colore potesse avere "molte facce" e ha incoraggiato un ampio gioco e sperimentazione tra i suoi studenti nella speranza che "gli occhi sarebbero stati aperti" per vedere il colore come si comporta veramente nel mondo reale (al contrario dei colori simbolici che immaginiamo nella nostra mente).
Nel 1963 Albers ha scritto Interaction of Colour , un libro di testo che continua ad essere molto influente nell'educazione mondiale dell'arte e del design. Per celebrare il 50° anniversario della pubblicazione del libro, la Yale University ha rilasciato un'app interattiva per iPad che contiene il testo completo ma consente anche agli utenti di giocare e sperimentare con le tavole a colori di Albers.
Per i progettisti dell'interfaccia utente, l'app Interaction of Color offre l'opportunità di sperimentare esercizi di colore analogico in un ambiente digitale e vedere in prima persona come la relatività del colore influisce sulle interfacce utente.
Andrea Loomis
Durante la prima metà del 20° secolo, Andrew Loomis è stato un importante illustratore e istruttore presso l'American Academy of Art di Chicago, ma la sua eredità duratura è quella di autore. Loomis ha scritto sei libri sull'arte commerciale e il design e ha trattato una vasta gamma di argomenti, dal disegno di figure al posizionamento di prodotti.
Nei suoi libri Creative Illustration e Eye of the Painter (entrambi disponibili su archive.org), Loomis lascia cadere una serie di linee durature che rimangono rilevanti per il campo moderno del design dell'interfaccia utente:
L'errore più grande nel colore, e quello che causa la mancanza di unità e armonia, è avere troppi colori sulla tavolozza.
Due colori qualsiasi saranno armoniosi quando uno o entrambi contengono parte dell'altro.
Il colore si presta alla sperimentazione più di qualsiasi altro elemento di bellezza.
Interfacce di altri designer
Una volta raggiunto un livello base di competenza cromatica, la creazione di combinazioni di colori sboccia in un'affascinante ricerca. Ogni interfaccia incontrata diventa un'opportunità per l'apprendimento e la critica, e le osservazioni abbondano.
Questa è la fase dello sviluppo di un designer dell'interfaccia utente quando fare riferimento al lavoro di altri designer diventa potenziante. Come mai? Perché il riferimento si sposta dalla destinazione al viaggio, dall'endpoint all'ispirazione.
I progettisti dell'interfaccia utente di tutti i livelli trarranno vantaggio dal tenere un registro continuo delle combinazioni di colori dell'interfaccia utente trovate. Acquisisci schermate, tieni un diario dei colori fisico, avvia una moodboard: tutto ciò che serve per imprimere momenti di illuminazione a colori per l'implementazione futura.
Il colore è troppo importante per essere ignorato
Quando si tratta di progettare interfacce digitali, il colore non è una considerazione facoltativa. Anche nelle interfacce utente che utilizzano un colore minimo (o quelle interamente in bianco e nero), è fondamentale che i progettisti dell'interfaccia utente capiscano perché il colore viene o non viene utilizzato e in che modo ciò influisce sull'esperienza dell'utente.
È anche importante che i progettisti dell'interfaccia utente abbiano la capacità di generare e implementare schemi di colori originali. Fare riferimento al lavoro di altri designer e ai prodotti digitali è una pratica utile, ma diventa limitante quando è l'unico metodo di esplorazione del colore intrapreso durante il processo di progettazione. C'è un immenso valore nell'essere in grado di catturare gli abbinamenti di colori visti nel mondo reale o nell'occhio della mente.
Se sei un designer che ha faticato a usare il colore abilmente o hai mai pensato: "Non ho davvero un talento per il colore", non scoraggiarti. Progettare con il colore non è una forma di magia creativa o regali speciali; è una disciplina pratica fondata su tecniche semplici che possono essere ripetute e migliorate.
Ricorda, il colore è la chiave principale per una comunicazione di design chiara e convincente. Che sia implementato con cura o abbandono sconsiderato, influisce sulla conversione, sulla consapevolezza del marchio e sull'esperienza dell'utente. Per il designer dell'interfaccia utente, il colore è uno strumento potente che semplicemente non può essere ignorato.
• • •
Ulteriori letture sul blog di Toptal Design:
- Il ruolo del colore nella UX
- Creazione di una guida allo stile dell'interfaccia utente per una migliore UX
- UX e l'importanza dell'accessibilità al Web
- Arte vs Design: un dibattito senza tempo
- Progettare per ambienti interattivi e spazi intelligenti