Come ottenere un aspetto professionale con il colore
Cosa rende coordinato, pianificato e professionale un aspetto del design? La risposta è: 'colore' .
Non tutti i progetti hanno bisogno di blu aziendale per sembrare professionale. Pianificare il colore significa creare una struttura che descriva quali colori utilizzare e come usarli.
Il colore è l'elemento di design più scivoloso. Il colore "buono" è così strettamente legato a cose elusive come il gusto personale e l'intuizione, così come considerazioni tecniche come il contrasto e la calibrazione del monitor.
Ma il colore è vitale per il contenuto . Se consideri un sito web abbastanza importante da dedicare tempo alla rifinitura, i lettori probabilmente lo considereranno abbastanza importante da dedicare tempo alla lettura. Buone scelte di colore rendono questo possibile.
In questo articolo esamineremo alcune tecniche per ottenere bellissimi pallets di colori per i tuoi progetti web.
Il modo migliore per rendere un sito Web non pianificato è sceglierne i colori a caso.
Anche quando i visitatori sfiorano la home page di un sito Web per la prima volta, i colori influenzano il loro atteggiamento nei confronti del contenuto . Questo sito è eccitante? Rassicurante? Daring? Bland? Politico? Formale?
Il colore influenza il modo in cui le persone interpretano ciò che vedono tanto quanto la tipografia.
Trovare i colori giusti non è facile, ma il processo può essere sistematico.
Una buona strategia di progettazione coinvolge una combinazione di colori (ovvero una gamma di colori selezionati per comunicare uno stato d'animo o un messaggio) e una disposizione di tale schema.
Diciamo che ti è stato chiesto di progettare un sito web professionale. (E questo potrebbe benissimo trasformarsi in un gioco alcolico: fare un tiro ogni volta che il cliente usa la parola "professionista", "pulito" o "moderno". Due colpi per "Mi piace questo altro sito Web. Copialo").
Lo schema dei colori dipenderà dalla particolare natura del sito web. Ad esempio, sia le banche che i fiorai possono avere siti Web dall'aspetto professionale.
Ma le persone potrebbero essere meno inclini a comprare fiori da un sito web che è blu aziendale e grigio oceano. E immagina il sito della Bank of America in lilla e giallo-verde.
Un design "professionale" dice ai visitatori di aver trovato un sito Web che prende sul serio il soggetto, anche se questo argomento è spensierato. Indipendentemente dalle tonalità e dai valori, "professionale" significa coordinato, pianificato e pensato .
Vai in scala di grigi
Il modo migliore per lavorare con il colore è iniziare con nessuno.
Rimuovere il colore da un disegno rivela problemi fondamentali che dovrebbero essere affrontati prima di preoccuparsi di quale tonalità di chartreuse funzioni meglio. Se il design non sembra giusto in bianco e nero, è ora di apportare modifiche.
Ogni pagina ha uno scopo chiaro? Il design guida i lettori attraverso il contenuto? Il contenuto è convincente, stimolante o informativo? Le intestazioni sono chiare? I link sono in contrasto con l'altro testo? Il colore migliora questi effetti, ma i problemi di layout, tipo e organizzazione non possono essere risolti solo con il colore .
Per fare una riprogettazione, prima estrai il colore. Il semplice atto di lavare le primarie sovrasaturate mostra davvero dove si trova un sito web. (In realtà, dovresti davvero iniziare una riprogettazione rivalutando i tuoi obiettivi e i tuoi contenuti, ma questa è un'altra storia.)
A volte la rimozione del colore è una soluzione in sé .
Una volta ho lavorato con una società di web design per ridisegnare il proprio sito web. I proprietari erano personali riguardo al progetto e desiderosi di farlo bene. Ma se pensi che progettare per te sia difficile, prova a farlo da un comitato. Alla fine, tutti e tre stavamo fissando uno screenshot del nono sorteggio al di fuori di un paio di drink.
All'improvviso, ho appiattito i livelli di Photoshop e ho colpito "Desaturate" trasformando il vivace design rame e navy in sfumature di grigio. Con sorpresa di tutti, ha funzionato.
Alla fine della settimana, avevamo un design grigio "caldo" con accenti rossi. Sapevamo di avere un vincitore quando i precedenti clienti si complimentavano con loro per il nuovo look e altre chiamate arrivavano da potenziali clienti.
Analizza la tua combinazione di colori con il test "strabismo" di Photoshop :
- Fai screenshot di almeno tre pagine dal tuo sito web. Aprili in Photoshop.
- Duplica il livello di sfondo in ogni schermata ( Livello → Duplica livello o Comando + J su Mac o Control + J su Windows).
- Applica una sfocatura gaussiana di circa 10 pixel ai nuovi livelli.
- Vai a Immagine → Regolazioni → Posterizza . Usa da 8 a 12 livelli o vai su Filtro → Pixellate → Mosaico . Utilizza da 15 a 30 pixel.
Questo mostra quali colori sono veramente dominanti. Più i colori sono dominanti, più pesantemente lo schema è impressa nella mente del visitatore.
Una volta che il layout e l'organizzazione del sito web funzionano senza colori, è ora di scegliere una tavolozza. Ma quale? E quanto usare?
Allinea le tue sfumature
Il colore ha tre proprietà: tonalità, saturazione e valore (a volte chiamato leggerezza).
La saturazione è quanto è ricca la tonalità: i colori al neon sono molto saturi, mentre i colori pastello sono meno saturi.
Il valore indica quanto è luminoso (cioè quanto vicino al nero o al bianco) un colore.
La tonalità indica a quale parte dell'arcobaleno appartiene un colore, ad esempio rosso o verde; è la proprietà su cui la gente inciampa.
Nulla uccide una combinazione di colori come le tonalità contrastanti. Un design può avere cento sfumature di una tonalità, da pastello a neon, e sembra ancora pianificato. Ma se le tinte sono mescolate nel modo sbagliato, lo schema cade a pezzi.
Un modo per evitare le tonalità contrastanti è separandoli con un terzo colore. Un buffer di nero, grigio o bianco è più sicuro, perché la scala di grigi è neutrale rispetto alla tonalità: puoi coordinare qualsiasi parte dell'arcobaleno con nero, bianco e grigio.
Una seconda soluzione è usare le tonalità in proporzioni diverse . Se una combinazione di colori ha, per esempio, viola e marrone, il design potrebbe avere molte sfumature di marrone con alcuni riflessi violetto luminosi.
Un'altra opzione è di variare i valori. Il blu puro e il ciano chiaro formano una combinazione così tanto, ma il contrasto tra il blu scuro (blu scuro) e il ciano chiaro (blu cielo) è sufficiente per distinguersi. Rosso e viola possono essere abbastanza diversi da non scontrarsi, ma abbastanza vicini da non sembrare intenzionali. Rosso chiaro (rosa) e viola scuro portano distinzione.
Sfortunatamente, evitare una brutta combinazione di colori non è la stessa cosa che sceglierne una buona. Una combinazione di colori ha successo non quando sei soddisfatto, ma quando il tuo pubblico si sente a suo agio.
Scopri i grandi schemi
Da dove vengono i grandi schemi di colori? Con centinaia di colori e migliaia di combinazioni, come si decide?
I progettisti di piccoli siti Web statici dovrebbero trarre colore dal contenuto . Questo di solito significa foto.
Il design di un sito web di otto pagine che ho recentemente costruito era sormontato da un'elaborata impalcatura metallica contro un cielo indaco. Impostando lo strumento contagocce di Photoshop su una media 5 × 5, ho campionato le parti più scure e più chiare del cielo e ho dato alla barra laterale, ai link, ai titoli e al piè di pagina quelle poche sfumature.
Quando il cliente ha chiesto come siamo riusciti a progettare un sito web così bene e così rapidamente, la nostra risposta è stata: "Questo è ciò che facciamo". Ma il colore era già lì. Ho dovuto cercarlo.
Mentre le foto d'archivio funzionano per siti web veloci, i designer di siti web più grandi e più dinamici dovrebbero cercare ispirazione dal loro pubblico .
Un eccellente indicatore di quali colori sono attraenti per il tuo pubblico è il loro abbigliamento quotidiano. Scopri cosa indossano i tuoi visitatori e saprai quali colori li rendono confortevoli. Se il tuo sito web parla, ad esempio, di sport in lega, scopri cosa le persone indossano per i giochi, piuttosto che i loro lavori giornalieri.
Se sei abbastanza fortunato da ottenere le foto del tuo pubblico di destinazione, visualizzale in massa; vuoi una media della folla. Ma se le foto non sono disponibili, vai a fare shopping.
I designer di abbigliamento che sono in grado di rimanere in azienda hanno un eccellente senso del colore per ogni umore e stile di vita. Non deve essere la 5a haute couture. Una ricerca su Google per "negozi da campeggio", "vestiti per bambini", "sci e costumi da bagno" e "vita informale" rivelerà molte combinazioni di colori buoni.
Le persone indossano abiti in base ai loro gusti. Se usi i colori che preferiscono, si sentiranno più a loro agio sul tuo sito web.
Usa trame
Lievi variazioni di tonalità, saturazione o valore creano trame .
Le trame monocromatiche (cioè le trame con una sola tinta) ei motivi forniscono una dimensione sottile alla maggior parte dei siti Web senza interferenze.
Gli sfondi di texture semplici, in particolare, sono facili da costruire:
- Scatta una foto di un muro interno o qualcosa che è nudo ma che ti sembra ruvido.
- Aprilo in Photoshop.
- Duplica il livello di sfondo e chiamalo "trama 1."
- Riempi il livello di sfondo con i colori della tua combinazione di colori.
- Imposta la modalità di fusione del livello "texture 1" su "" Luce soffusa "e la sua opacità al 30%.
- Provalo sul tuo sito web. Se non sembra corretto, gioca con l'opacità del livello.
Il nome del livello è intenzionale. Puoi giocare con più di una foto, ma evita di dare i nomi dei livelli come "texture muro" o "texture carta". Vuoi concentrarti sull'effetto sul tuo sito web, non da dove proviene.
Creare un buon schema
Una buona combinazione di colori ha alcune caratteristiche. Pensala come una struttura o una serie di linee guida per mantenere un design coerente. Lo schema dovrebbe:
- Elenca da due a cinque tonalità che funzionano bene insieme,
- Descrivi fino a che punto un design può variare da quelle tonalità,
- Conto per sfumature di ogni tonalità,
- Funziona bene contro il bianco e nero.
Ecco un esempio:
Il designer ha iniziato scegliendo per lo più tonalità calde che sembravano giuste. Non c'era logica, solo il vago obiettivo di "autunno" e la sua intuizione.
In Photoshop, due livelli hanno fornito sfumature di bianco e nero. La modalità di fusione di ogni livello era impostata su "Luce soffusa". Il nero puro era troppo scuro per il colore più a destra, quindi l'opacità del livello nero è stata regolata.
Per unificare i colori, è stato creato un nuovo livello e riempito di rosso puro. La sua modalità di fusione è stata impostata su "Colore" e la sua opacità è stata ridotta a circa il 40%. (Nota: l'ordine dei livelli è molto importante: i colori cambieranno se il livello "tinta" è impostato sotto i livelli in bianco e nero).
Ciò ha dato al designer 15 colori tra cui scegliere. Ne scelse quattro che avevano una gamma di toni e tonalità. Qui, i colori sono impostati contro il bianco.
Le variazioni sono importanti, quindi il progettista ha sperimentato. Come sarebbero i colori contro il nero? Cosa succede se li ombreggiamo leggermente?
E se li avessimo cambiati del tutto? Usando Immagine → Regolazioni → Tonalità / Saturazione sul livello "tinta" crea una sensazione decisamente non autunnale, ma i colori sono ancora coordinati. Forse quella tavolozza può essere usata per la Pasqua.
Il risultato finale è una combinazione di colori: un riferimento che fornisce tonalità diverse (ma non troppo diverse) e una gamma di tonalità che funzionano bene insieme. Scarica il file di esempio.
Usa il Framework
La grafica, le foto e le icone di domani funzioneranno con la combinazione di colori di oggi? Di quali immagini avrà bisogno un sito Web in sei giorni, sei settimane o sei mesi? È difficile da dire, ma il contenuto fa parte della tua combinazione di colori .
Potresti risolvere questo problema o facendo in modo che le tue immagini seguano lo schema dei colori o facendo in modo che le combinazioni di colori seguano le tue immagini.
Applicare la combinazione di colori, anche con le foto, è un ottimo modo per ottenere un aspetto unificato su tutte le pagine .
La soluzione più semplice è trovare le immagini che si adattano al tuo schema. Ricorda che una combinazione di colori ti consente di eseguire la manovra: purché le tinte principali di un'immagine si adattino, l'immagine dovrebbe funzionare. Molti siti web di foto stock ti consentono di cercare per colore (ovvero tonalità: di solito primarie come il rosso, il verde e il blu).
Se un'immagine non si adatta alla tua combinazione di colori, dagli una tinta:
- Apri l'immagine in Photoshop.
- Crea un nuovo livello. Imposta la sua modalità di fusione su "Colore".
- Riempi quel livello con uno dei colori della tua tavolozza, preferibilmente quello che corrisponde maggiormente all'immagine.
- Imposta l'opacità del livello di colore al 50%.
- Gioca con l'opacità fino a ottenere un buon equilibrio tra il colore originale dell'immagine e la tavolozza dei colori del tuo sito web.
- Questa tecnica funziona per foto, illustrazioni e icone, qualsiasi cosa basata su pixel. (Se non possiedi l'immagine, assicurati di ottenere il permesso prima di alterarlo. Potresti migliorare il suo aspetto sul tuo sito web, ma stai ancora prendendo delle libertà con l'arte di qualcun altro.)
Guardando professionale
Nessun set di colori sembra "professionale" di per sé. Piuttosto, devi seguire una procedura per raggiungere un tatto coordinato e pianificato.
Qualunque sia il contenuto del sito, il pubblico saprà che si prende sul serio.
Suggerimenti
- Quando pensi di avere una buona combinazione di colori, provalo per almeno una settimana. La valutazione del colore richiede un'intuizione che si sviluppi nel tempo. Datti il tempo di assorbire completamente la personalità dello schema.
- Quando pensi di avere una buona combinazione di colori, non lasciarlo andare stantio. I gusti dei tuoi visitatori, come i tuoi, cambiano nel tempo. Prendi nota per rivedere i colori dopo quattro mesi. Quindi chiedi, sono ancora appropriati? Se no, cosa è cambiato? Quali fattori influenzeranno la tua regolazione?
- Usa i colori brillanti con parsimonia. Una spruzzata di qualcosa di iridescente attirerà visitatori lì, ma se lo vedranno ovunque, vagheranno senza meta.
- Alcune persone pensano che gli schemi di colori abbiano una gamma ristretta. Permetti un certo margine di manovra per dare profondità ai tuoi disegni.
- Evita le primarie pure come rosso, verde, blu e giallo. Dai un tocco al vero personaggio: rosso, ma leggermente viola, blu con un tocco di verde, giallo "caldo" con una sfumatura arancione.
- Assicurati che i tuoi colori funzionino quando sono sbiaditi. Se scegli il rosso, tieni presente che il rosso chiaro può essere femminile e il rosso scuro può sembrare ruggine o sangue. Il giallo corre dalla luce del sole sbiadita al marrone scuro. Il blu scuro è misterioso e il blu chiaro è tranquillo o elettrico se lo saturi di saturazione.
- Utenti Mac, imposta il tuo schermo. Vai su "Preferenze di Sistema" e fai clic su "Accesso universale". Imposta la visualizzazione su "Usa scala di grigi". Questo è utile anche quando sei in vena di film noir.
- Indipendentemente da quanto vuoi che il tuo sito web si senta attivo, usa uno sfondo neutro. Nero, bianco e grigio funzionano bene con quasi tutte le tonalità.
- Se vuoi un testo piccolo (diciamo 14 punti o meno) per abbinare un grande campo di colore, rendi il testo più scuro del normale. Ciò compenserà i contatori di luce all'interno dei personaggi.
- Usa più sfumature con meno tonalità.
- Ciò che "sembra buono" è intuitivo. Ma l'intuizione è una battaglia tra il tuo ego, la delicatezza del tuo pubblico e l'autorità delle persone che finanziano il progetto.
- Usa sfondi sbiaditi per far risaltare il contenuto:
Scritto esclusivamente per WDD da Ben Gremillion . È un web designer freelance che ha imparato che l'inflessibilità di una scadenza è inversamente proporzionale al numero di funzioni richieste all'ultimo minuto.
Come crei schemi cromatici di successo? Cosa funziona e cosa non funziona per te?