Progettare a colori

Il colore è una forza potente nelle mani di un designer. Attira il tuo sguardo, evoca emozioni e comunica significato. Per darti un'idea di quanto sia importante il colore, in uno studio ampiamente citato intitolato The Impact of Color on Marketing, i ricercatori hanno scoperto che per alcuni prodotti, il 90% delle decisioni rapide che le persone prendono sui prodotti potrebbe essere basato solo sul colore.

Quindi usare il colore in modo efficace è importante per i design. Ma anche trovare combinazioni di colori diverse è difficile. Ogni colore ha il suo significato e ci sono un numero infinito di combinazioni là fuori.

Questo articolo ha lo scopo di fungere da guida per aiutarti a trovare tavolozze di colori per i tuoi progetti. Ti incoraggia a esplorare di più con il colore, il che ti aiuterà a sviluppare un senso intuitivo per buone combinazioni di colori.

Man mano che esplori di più con il colore, svilupperai un senso intuitivo per buone combinazioni di colori.

Scegliere una tavolozza di colori

A volte una tavolozza di colori è il risultato di un'ispirazione improvvisa. Ma il più delle volte deriva da un approccio sistematico.

Identifica lo scopo

Prima di fare qualsiasi altra cosa, identifica innanzitutto lo scopo del tuo progetto. Un buon design allinea la sua tavolozza di colori con il suo scopo.

Ponetevi le seguenti domande:

  • Qual è il messaggio che vuoi trasmettere con il tuo design?
  • Qual è lo scopo del tuo design? Per essere informativo? Convincere?
  • Quali emozioni vuoi che il tuo design evochi?

Lo scopo del tuo design dovrebbe servire da guida per te quando scegli la tua tavolozza di colori.

Identifica il tuo pubblico

Le persone percepiscono i colori in modo diverso. Come ha detto Fairchild, il colore è un fenomeno psicologico che sorge all'interno dell'osservatore. I colori hanno effetti diversi sulle persone in base alle loro preferenze personali, educazione culturale ed esperienze. Pertanto, per capire come le persone reagiranno al tuo progetto, devi identificare il tuo pubblico.

Mentre alcuni significati del colore sono universali per il pubblico, altri non lo sono. Il verde rappresenta universalmente la natura in quanto è il colore della vegetazione. Tuttavia, un colore come il rosso viene interpretato in modo diverso tra le culture. Nel mondo occidentale, il rosso è associato al fuoco, alla violenza e alla guerra. È anche associato all'amore e alla passione. Tuttavia, paesi come la Cina associano il rosso alla prosperità e alla felicità.

Poiché i colori hanno così tanti significati diversi, è importante abbinare i modelli di colore mentale che hai come designer con quelli del tuo pubblico.

Per saperne di più sul significato dei colori nei diversi paesi e dati demografici, consulta La psicologia del colore nel marketing e nel branding e Il significato del colore.

Rivedi la teoria dei colori

Quando si sceglie una tavolozza dei colori, a volte è utile conoscere un po 'di teoria dei colori. La teoria del colore è una struttura logica e una guida pratica per mescolare i colori. Comprende tutto, dalla ruota dei colori al significato dei singoli colori.

Un buon primer è Basic Color Theory di Canva e Color Theory 101 di Hubspot. Puoi leggere un'interessante applicazione della teoria dei colori in Why Is Facebook Blue? La scienza dietro i colori nel marketing.

Trova l'ispirazione

A volte è difficile visualizzare la tavolozza dei colori giusta per il tuo design. Va bene, i grandi artisti rubano . O meglio, prendono ispirazione da altri artisti.

I soliti sospetti per l'ispirazione della tavolozza dei colori sono siti come Dribbble e Behance. Se vuoi trovare l'ispirazione cromatica per uno stile di design specifico come il material design, puoi utilizzare un sito come MaterialUI. L'equivalente del design piatto può essere trovato su FlatUIColors.

Questi siti sono utili, ma prova a guardare i progetti che provengono dall'esterno del supporto specifico per cui stai progettando. In questo modo potrai creare tavolozze di colori inaspettatamente uniche e piacevoli. Ad esempio, potresti guardare i design degli interni.

Se vuoi qualcosa di diverso, cerca l'ispirazione del colore nel design di altre culture. Ad esempio, i set di video musicali coreani sono noti per le loro tavolozze di colori colorate e accattivanti. Ogni cornice può servire come fonte di ispirazione.

Non devi andare in Corea per trovare l'ispirazione per il colore. È ovunque, inclusa la tua vita quotidiana. La prossima volta che esci, fermati ad apprezzare i colori intorno a te.

Quando trovi qualcosa che ti ispira, crea una tavolozza di colori per esso. Puoi utilizzare lo strumento contagocce nel tuo programma di design preferito per estrarre una tavolozza di colori e apportare modifiche se necessario.

Stabilisci un sistema di progettazione

Un sistema di progettazione, a volte chiamato guida di stile, è un framework che incapsula tutti gli elementi che entrano nel tuo progetto. Questo include tutto, dai pulsanti alla tipografia. Considera cose come il tipo di pulsanti che utilizzerai e l'aspetto della barra di navigazione.

Per un esempio di un sistema di progettazione, controlla il sistema di progettazione di Salesforce. Per ulteriori esempi, ecco un elenco di 50 guide di stile meticolose che ogni avvio dovrebbe vedere prima del lancio.

È utile stabilire un sistema di progettazione prima di scegliere una tavolozza di colori, anche se è solo uno schizzo approssimativo. In questo modo avrai un'idea di quali elementi hai e di come i tuoi colori potrebbero applicarsi a loro.

Quando si sceglie una tavolozza di colori per il proprio design, è meglio attenersi al principio KISS (Keep it simple, stupid). Meno colori sono, meglio è. Per la maggior parte dei sistemi di progettazione, la seguente struttura è un buon inizio:

  • sfondo
  • Accento primario
  • Accento secondario
  • Colore errore
  • Colore di successo

Il colore principale è il colore che usi più spesso per pulsanti e accenti importanti. Per molte aziende questo è anche il colore del loro logo.

Il colore secondario è il colore che usi per differenziare le azioni secondarie da quelle primarie. Ad esempio, pulsanti primari e secondari. I colori di errore e di successo, tipicamente rosso e verde, comunicano gli stati del design. Ad esempio, notifiche di esito positivo o di errore.

Scegli una tavolozza di colori

Ora che sei armato di ispirazione e di uno schizzo approssimativo di un sistema di progettazione, è il momento di scegliere una tavolozza di colori.

Per una tavolozza di colori di base, mi piace mettere i miei colori fianco a fianco, proprio come farebbe un artista per la tavolozza dei colori.

Questo è il momento di prendere tutta la tua ispirazione per i colori e creare tavolozze di colori da loro. Più sono e meglio è. Non aver paura di sperimentare anche i colori da solo.

Quando restringi le opzioni della tavolozza dei colori, ripensa alle prime due sezioni in cui hai identificato lo scopo e il pubblico del tuo progetto. Ponetevi le seguenti domande:

  • Quali colori sono accessibili?
  • Quali colori hanno un impatto visivo e attirano la tua attenzione?
  • Hai bisogno di una combinazione di colori chiari o scuri? A che ora della giornata le persone useranno il tuo prodotto?
  • Quale stato d'animo vuoi che trasmetta il tuo design? Qualche tavolozza di colori che hai lo fa meglio delle altre?

Come ho accennato nell'ultima sezione, i colori avranno ruoli diversi nel tuo sistema di progettazione. Ciò significa anche che ogni colore ha un peso diverso nel tuo sistema. Ad esempio, i colori dello sfondo verranno utilizzati più spesso dei colori accentati.

Per questo motivo, a volte è un buon esercizio creare un disegno usa e getta composto da forme di dimensioni diverse, con ciascuna dimensione che equivale all'incirca alla frequenza di occorrenza e alla superficie media del colore su una data pagina.

Ad esempio, ecco la tavolozza dei colori di Invision.

Una rappresentazione geometrica potrebbe assomigliare a questo.

Applicazione di tavolozze di colori

Per darti un'idea di come applicare i colori ai sistemi di design, diamo un'occhiata ad Airbnb. Il colore principale di Airbnb è Rausch, dal nome della strada da cui ha avuto origine l'azienda. Kazan funge da colore secondario e i due grigi sono usati come colori di sfondo.

Per la maggior parte delle pagine, Airbnb utilizza il grigio nebbioso come sfondo. Puoi vedere che usano il rausch come colore principale per accentuare azioni importanti come la richiesta di prenotare un annuncio.

Kazan, il colore turchese, è usato per catturare e coinvolgere il tuo sguardo. Nota come si complimenta con il colore primario.

Per i messaggi di errore, Airbnb utilizza un rosso chiaro, probabilmente un'ombra di rausch. Il rosso, insieme al punto esclamativo, attira immediatamente la tua attenzione e ti avvisa dello stato del sistema.

Inizia senza alcun colore nel tuo design. Concentrati sulla disposizione e il posizionamento degli elementi. Dopo che sei soddisfatto di ciò che hai, puoi iniziare ad applicare la tavolozza dei colori al tuo design.

Pensa alla gerarchia visiva nel tuo design. Considera quali componenti del design desideri evidenziare e assegna il colore appropriato. Inoltre, considera l'utilizzo di diverse sfumature dei tuoi colori per cose come gli stati al passaggio del mouse e clic.

Incartare

Il colore è tutto basato sulla sperimentazione e l'iterazione. Se vuoi migliorare nel lavorare con il colore, l'unica risposta è lavorare di più. Pensa al colore come a un additivo. Se hai il layout e la funzionalità del tuo design in basso, puoi sperimentare tutte le tavolozze di colori che desideri.

Imparare a progettare con i colori è infinitamente prezioso per un designer. Man mano che si migliora nella scelta delle tavolozze dei colori, si sviluppa la capacità di visualizzare le combinazioni di colori su un disegno prima ancora di toccare un programma di disegno.

Mi piacerebbe sapere come lavori con il colore. Qual è il tuo processo? Sentiti libero di lasciare una nota o un tweet per me.

PS Se questo articolo ti è piaciuto, significherebbe molto se premi il pulsante di raccomandazione o lo condividi con gli amici.