L'applicazione di combinazioni di colori richiede di vederle di nuovo
Esistono molte risorse online che i progettisti possono esplorare, modificare e scaricare fantastiche combinazioni di colori.
Giocare con combinazioni complementari, analoghe, monocromatiche e altre ci apre a possibilità eccitanti, e non mancano gli omaggi.
Ma c'è una differenza tra una combinazione di colori vincente e un design vincente che la usa.
La scelta dei colori è il primo passo. Adattarli in base alle tue esigenze di progettazione è altrettanto importante.
Quello che sembra buono in un campione potrebbe non funzionare bene su una pagina web, ma ciò non significa che devi tornare al punto di partenza. Esploreremo qui nuovi modi di guardare le combinazioni di colori.
Il colore gioca un ruolo importante nel modo in cui le persone assorbono i contenuti. Indipendentemente dal fatto che un progetto sia riservato o rumoroso, amichevole o sinistro, caldo o freddo, i visitatori di un sito web sono immediatamente influenzati dal tono impostato dal layout, dalla tipografia, dalle immagini e, naturalmente, dalle tonalità e dai valori che comprendono la combinazione di colori.
La scelta dei colori può essere il lavoro più soggettivo nel web design. Alcuni colori funzionano bene insieme; altri, non così tanto. Alcune combinazioni fanno appello a certe persone. Più di un set di colori può adattarsi allo stesso design.
Fortunatamente, esistono molte risorse per aiutare. Generatori di palette di colori come Designer Schema colori , Adobe Kuler , Tucano di voliera e Schema dei colori giornaliero siamo tra i grandi luoghi per trovare combinazioni di colori che stabiliscano effettivamente un umore. Ma trovare una tavolozza è solo il primo passo. La potenziale efficacia di qualsiasi combinazione di colori può essere compromessa dal modo in cui viene applicata .
Il numero di colori in uno schema fa la differenza
Una combinazione di colori è un insieme di colori che sono stati scelti per lavorare insieme. Gli schemi di solito hanno almeno quattro colori e possono spesso essere scaricati come immagini semplici e talvolta come
Lo schema di colori sopra riportato è tipico di come la maggior parte degli schemi sono presentati: come campioni uniformi di colori piatti. Questo set potrebbe essere taggato come tale:
- Allegro
- amichevole
- Contemporaneo
- Casuale
- primarie
Ma fai risaltare uno o due colori e potrebbero venire in mente diversi aggettivi.
L'immagine sopra ha lo stesso schema che è stato presentato nel campione, ma è meno casuale e più desertico. Questa immagine enfatizza i colori caldi. Macchie isolate di blu e verde attirano l'attenzione essendo più rada. L'umore risultante potrebbe essere descritto come:
- sabbioso
- Luminosa
- Caldo
- Cachi
- Ruvido
La scelta del colore dominante influisce sul modo in cui appare lo schema.
Ancora una volta, qui stiamo usando gli stessi colori, ma per un fine molto diverso. Questa immagine assomiglia ad una mappa del mondo astratta, con isole di rosso, verde e marrone. L'immagine non è solo più fredda: è leggermente più scura , anche se proviene dalla stessa tavolozza.
Essere in grado di riconoscere le buone combinazioni di colori non è sufficiente, perché i colori raramente vengono applicati in modo uniforme al design di un sito web. Usare i colori con saggezza e nella giusta proporzione è importante quanto scegliere i colori giusti.
Lo sfondo imposta il tono
Il posto più ovvio per avere un impatto con il colore è in sottofondo. Questa vasta distesa può attirare l'attenzione tanto quanto il contenuto posto sopra di esso.
Nonostante abbia contenuti identici, il design sulla destra è molto più caldo di quello a sinistra. Ma qui sta accadendo di più di un semplice scambio di colori.
Le barre del contenuto nel design verde (ad esempio il testo bianco su rosso) mantengono le proprie contro lo sfondo verde ampio. Ma lo sfondo rosso sulla destra lava le sbarre verdi. Questo perché, oltre ad essere più caldo, questa particolare sfumatura di rosso è più saturo. In effetti, gli unici elementi con un peso visivo sufficiente a contrastare lo sfondo rosso sono le ampie intestazioni. A confronto, il testo del corpo piccolo e le barre verdi sbiadite. Questo non è necessariamente negativo; uno sfondo potente conferisce alla pagina una presenza sostanziale. Il design verde è più fresco e conferisce al contenuto un aspetto più casual.
Quale uso del colore è migliore? Dipende dal tuo intento. I visitatori dovrebbero considerare il contenuto rilassato o audace? Vuoi minimizzare le barre colorate? Sei preoccupato che lo sfondo possa sopraffare le informazioni? Un colore è più importante di un altro nel tuo marchio? Le risposte a queste domande determineranno quale colore è "giusto". Questa palette di colori singoli presenta due diverse soluzioni.
Colore dietro il testo
L'interazione tra testo e sfondo è influenzata dalla dimensione e dalla quantità di ciascuno. L'effetto del testo sulla pagina dipende tanto dal colore del testo stesso quanto dal colore dello sfondo, nonostante la tendenza generale a preoccuparsi maggiormente dello sfondo.
Sopra, il testo chiaro su uno sfondo scuro funziona meglio quando il tipo è grande. Prendendo a prestito dallo schema di colori con cui abbiamo iniziato, questo oro è meno appropriato per il corpo del testo (cioè circa 13 pixel o più piccolo). La soluzione è semplice:
Sopra, il testo piccolo nelle ultime due righe si trova in una tonalità di oro più pallido. Non è completamente bianco, ma molto più leggibile rispetto alle due linee nella prima immagine. Il contrasto aggiunto mantiene il testo piccolo da essere sopraffatto dallo sfondo. La chiave è usare la combinazione di colori come punto di partenza, non una regola fissa. Se un colore di sfondo minaccia di sopraffare elementi più piccoli, aumenta il contrasto, che manterrà l'integrità dello schema e manterrà il contenuto leggibile.
Testo su bianco
Molte pagine Web hanno sfondi bianchi o aree di contenuto bianco. Ma "bianco" non significa "bianco". Grandi strisce di bianco influenzano il modo in cui il colore viene percepito. Per esempio:
I colori che abbiamo iniziato con sembrano più chiari se usati per il testo.
- Il blu relativamente scuro crea abbastanza contrasto per rendere il testo leggibile contro il bianco.
- Questa particolare sfumatura di verde si fonde con lo sfondo. Se l'intento è l'armonia, allora il verde funziona.
- Rosso + bianco = rosa o pesca.
- L'oro sembra quasi un tono seppia.
Il bianco tende a illuminare tutto ciò che tocca. Se si desidera impostare uno stato d'animo leggero, allora una delle combinazioni sopra potrebbe funzionare. Per maggiore impatto, è possibile scurire la combinazione di colori.
Giocare con combinazioni di colori in Photoshop
Se il tuo progetto non richiede l'uso uniforme di tutti i colori del tuo schema, allora dovresti testare uno o due colori per il dominio. Il trucco è trovare uno schema con colori che funzionino sia l'uno con l'altro sia con il colore dominante.
Fortunatamente, abbiamo un processo semplice per testare i colori. Per vedere come diverse misure di colore possono influenzare un design, segui questi passaggi in Photoshop.
1. Trova o crea una combinazione di colori. Il nostro esempio ha cinque colori, ma qualsiasi numero sopra uno funzionerà.
2. Crea una nuova immagine in Photoshop, 500 x 500 pixel, con uno sfondo bianco.
3. Crea quattro nuovi livelli (il tuo livello di sfondo sarà il quinto). Se il tuo schema ha più o meno di cinque colori, aggiungi o rimuovi i livelli di conseguenza.
4. Riempi ogni livello con un colore diverso dal tuo schema.
5. Aggiungi una maschera di livello a ogni livello sopra il livello di sfondo. La tavolozza dei livelli dovrebbe assomigliare a questa:
Sopra, la palette di livelli di Photoshop, con un livello per colore e con le maschere di livello applicate.
6. Eseguire l' azione "Thresholdizer" su ogni maschera di livello, ma non sugli stessi strati.
Sopra, quando si utilizza l'azione "Thresholdizer", assicurarsi di selezionare la maschera di livello , non il livello attuale. Se si esegue l'azione sul livello per errore, sii contento della funzione "Annulla".
Questa azione crea principalmente un pattern casuale in una maschera di livello. Da qui, il designer prende in carico: con il controllo "Soglia". Fai scorrere il controllo Soglia a sinistra per rivelare più di un determinato livello e a destra per rivelare di meno. L'applicazione di questa azione a ciascuna maschera di livello farà sì che un colore domini gli altri in uno schema casuale.
In questo caso, il controllo Soglia determina la quantità di un dato livello visibile. Una maschera di livello per lo più nera nasconde il livello; per lo più bianco rivela lo strato. L'esecuzione dell'azione Thresholdizer su ogni maschera di livello creerà un mix di colori come questo:
Questo documento di Photoshop mostra come potrebbe apparire un disegno se il giallo fosse dominante. La regolazione dei colori ora è un gioco da ragazzi: per dare un contrasto più o meno a un colore, basta usare un comando di Photoshop (come Immagine> Regolazioni> Tonalità saturazione ).
Ad esempio, la tonalità di verde che ha funzionato bene con il blu in precedenza non sembra molto buona ora che il blu non è dominante. Alcuni esperimenti rivelano quanto segue:
Qui abbiamo due varianti della nostra combinazione di colori originale. La variazione n. 1 oscura leggermente il verde. Funziona quasi. La variazione n. 2 cambia tutto tranne il giallo per aggiungere contrasto e allineare le tonalità.
E se il nostro design fosse per lo più blu anziché giallo? Questa sfumatura di blu è abbastanza scura da contrastare con gli altri colori, ma nessuno di essi è coordinato: sono tutti primari. Scegliendo un nuovo dominante, abbiamo creato un nuovo problema.
La variante n. 1 sostituisce il rosso morbido con un blu più scuro e trasforma la tonalità di verde in una menta pallida. La variante n. 2 va dall'altra parte, usando più rosso (o borgogna) invece di meno.
Il merito di ognuna di queste variazioni è soggettivo. Idealmente, dovresti applicarli al design attuale prima di prendere una decisione definitiva. La chiave è nel processo: ottenere una tavolozza, scegliere un colore dominante e far lavorare gli altri con esso.
Informazioni sull'azione "Thresholdizer"
Non c'è mistero per questa azione. È possibile ottenere lo stesso effetto applicando Filtro> Rendering> Nuvole o Filtro> Rendering> Nuvole di differenza su una maschera di livello. Questa azione si limita a perfezionare il processo, organizzando il comando Soglia in decili.
Sentiti libero di scarica l'azione "Thresholdizer" . Meglio ancora, creane uno tuo e condividerlo con tutti, fornendo un link nei commenti qui sotto.
Valutazione del colore senza l'azione
Naturalmente, ci sono modi per giudicare il colore senza giocare con la soglia. Inizia scegliendo un colore principale e poi fai in modo che gli altri lavorino con esso.
Ecco la nostra combinazione di colori originale, con il marrone come colore primario.
Abbiamo attenuato il verde e saturato il rosso. I colori più aspri stanno da soli, come fa il blu (che non è stato regolato).
Qui, abbiamo sbiadito il verde, il giallo e il rosso. Questi "accenti" low-key si fondono con lo sfondo marrone. Scurisci il blu per creare contrasto.
I tre colori primari più scuri si sposano bene con il marrone medio, mentre il giallo chiaro funge da accento.
Ancora una volta, la decisione finale arriva quando il progettista applica questi schemi al progetto attuale. Fino ad allora, questi sono solo i punti di partenza: strumenti utili per evitare scontri, riferimenti pratici per mantenere i disegni sul tema e un ottimo modo per esplorare le combinazioni.
Il colore è semplicemente un elemento di design. L' uso del colore è un'abilità che si deve praticare per controllare l'umore, coltivare il proprio gusto e diventare in grado di vedere le possibilità in pochi campioni.
Solo una cosa è certa: che il verde deve andare.
Scritto esclusivamente per il Webdesigner Depot di Ben Gremillion. Ben è un freelance web designer chi risolve i problemi di comunicazione con un design migliore.
Come testate i colori? Quali sono i tuoi modi preferiti per creare combinazioni di colori? Condividi le tue opinioni nei commenti qui sotto.