Share
Oggi impareremo l'importanza del colore nel Web Design e come scegliere uno schema di colori gradevole. Questo articolo fa parte della nostra serie Basix, che mira a fornire spiegazioni pratiche e concise dei principi di progettazione per coloro che hanno poca esperienza di progettazione.
Prima di iniziare, dai un'occhiata ai nostri modelli Web, se hai bisogno di un tema professionale per il tuo prossimo progetto. Ci sono anche una serie di grandi esempi di temi di colore per siti web.
Ora, iniziamo questo tutorial.
Questo articolo è stato scritto per le persone che stanno appena iniziando ad apprendere i principi del design formale. Non intende essere uno studio completo su come applicare il colore a un design (ne avremo molti in futuro), ma piuttosto è una panoramica per chi è alla ricerca di consigli pratici che li aiutino ad avvicinarsi alla teoria del colore all'interno il contesto di un progetto di web design.
Sto scrivendo questo perché ho sempre trovato difficile decidere su una combinazione di colori che funzioni bene per un progetto; è probabilmente una delle decisioni più difficili che devo prendere come designer. Tuttavia, apprendendo le basi della Teoria dei colori e alcuni eccellenti strumenti disponibili sul web, sono stato in grado di rafforzare i miei progetti e di rendere conto di questa debolezza.
La teoria del colore in realtà copre una serie di cose, ma al livello più elementare è l'interazione dei colori in un design attraverso la complementazione, il contrasto e la vivacità.
L'interazione dei colori in un design attraverso la complementazione, il contrasto e la vivacità.
Mentre la prima parte di questa definizione è diretta (e, in effetti, blanda), sono gli ultimi 3 termini che definiscono la Teoria dei colori di base:
La complementazione si riferisce al modo in cui vediamo i colori in termini di relazioni con altri colori. Quando i colori occupano le estremità opposte dello spettro dei colori, portano le persone a considerare un design visivamente attraente stabilendo un mezzo felice in cui l'occhio può risiedere. Invece di sforzarsi per adattarsi a una particolare area dello spettro cromatico, l'occhio viene fornito un equilibrio . Ci sono due usi comuni della complementazione: la combinazione di colori Triadic e Compound di cui parleremo in seguito. La complementazione può portarti a nuovi livelli di sofisticazione del design quando puoi iniziare a padroneggiare la complessità delle combinazioni di colori.
Il contrasto riduce l'affaticamento degli occhi e focalizza l'attenzione dell'utente dividendo chiaramente gli elementi su una pagina. L'esempio più evidente di contrasto è una selezione efficace di colore di sfondo e testo, come mostrato di seguito:
Se sei in dubbio, la migliore pratica è di solito scegliere un colore molto chiaro per lo sfondo e un colore molto scuro per il testo stesso. Questo è un settore in cui la teoria del colore è fondamentale per l'usabilità di un web design; Nella maggior parte dei progetti, le aree di testo di grandi dimensioni non sono un luogo in cui cercare di essere veramente creativi, quindi mantenerlo semplice e leggibile.
Oltre a stabilire un testo leggibile, il contrasto può anche attirare l'attenzione dello spettatore su elementi specifici di una pagina. Pensa a mettere in evidenza un libro di testo: quando vuoi attirare la tua attenzione su una parte specifica della pagina, fai apparire l'area circostante diversa dal resto del testo. Lo stesso principio si applica al Web Design: L'utilizzo di una varietà di colori contrastanti può aiutare a focalizzare l'attenzione dello spettatore su elementi di pagina specifici.
Se il tuo sito web ha uno sfondo scuro, concentrati sul contenuto principale con un colore più chiaro.
Questo principio vale anche per i colori analoghi (di cui parleremo più avanti):
Non sembrare sciocco, ma la vivacità determina l'emozione del tuo design. Colori più brillanti portano l'utente a sentirsi più energico come risultato del tuo design, che è particolarmente efficace quando stai cercando di pubblicizzare un prodotto o di invocare una risposta emotiva. Le tonalità più scure rilassano l'utente, consentendo alla mente di concentrarsi su altre cose. Un grande esempio di questo è un confronto tra CNN e Ars Technica:
Qui ci sono 3 delle strutture comunemente accettate per un buon schema di colori: triadico, composto e analogo:
Composto da 3 colori su estremità separate dello spettro dei colori. C'è un modo molto semplice per creare una combinazione di colori Triadic:
Usando un triangolo equilatero, puoi assicurarti che i colori abbiano egual vibrancy e si completino a vicenda in modo appropriato.
Lo schema di colori Compound si basa sulla fornitura di una gamma di colori complementari: due colori sono scelti dalle estremità opposte dello spettro dei colori. In questo modo, il designer ha più libertà nel design e beneficia anche del fascino visivo dei colori complementari.
Una combinazione di colori analoga si basa su un'attenta selezione di colori nella stessa area dello spettro dei colori. Di solito i colori sono differenziati per la loro vivacità e il loro contrasto se confrontati tra loro.
Due esempi di uno schema di colori analogo sono:
La bellezza di dove siamo nella storia in questo momento è che possiamo trarre beneficio da secoli di teorici dei colori scientifici e artistici. Ci sono interi volumi che sono stati scritti sui minutia della teoria dei colori, quindi incoraggerò quelli di voi che vogliono veramente approfondire l'argomento per trovare uno dei numerosi libri accademici disponibili per sfruttare alcuni dei concetti più profondi. Pubblicheremo anche articoli più approfonditi sulla "teoria del colore per i web designer" in futuro qui su Webdesigntuts + :).
Ora esaminiamo alcuni strumenti eccezionali che è possibile utilizzare per sperimentare da soli:
Per fortuna, ci sono alcuni strumenti a nostra disposizione che rendono la selezione del colore estremamente facile se utilizzata correttamente. E, soprattutto, miglioreranno la nostra comprensione della Teoria dei colori.
Sperimentando in un ambiente guidato, siamo in grado di imparare come applicare questi principi senza diventare frustrati quando le cose non funzionano perfettamente. Pensa a questi strumenti come a una sorta di "rete per la sicurezza dei colori", per aiutarti a esplorare la tua creatività senza mai dover allontanarti dalle regole stabilite per piacevoli combinazioni di colori.
Uno strumento sviluppato da Adobe, Kuler ha lo scopo di fornire un modo intuitivo per creare una tavolozza di colori. Ogni colore sulla tavolozza può essere modificato individualmente, o scelto come colore di base, con pochi semplici clic. Le tavolozze possono essere salvate e pubblicate e sul loro sito sono disponibili numerose voci di community. Sotto ogni colore, vengono forniti i codici di esportazione (incluso esadecimale). Tuttavia, l'interfaccia può essere ingombrante a volte, regolare la vivacità di un colore specifico può alterare l'intera tavolozza (vorrei che avessero una funzione di "blocco" che impediva ad altri colori di spostarsi). Nel complesso, consiglierei questo strumento a coloro che hanno una conoscenza decente dei concetti e della pazienza per quando le cose non funzionano nel modo migliore come avrebbero sperato.
Questo strumento sta rapidamente diventando la mia scelta preferita per i principianti assoluti, quelli con poca pazienza o persone con una scadenza. Fornendo un selettore molto semplice e controllato, Color Scheme Designer fornisce una barriera di ingresso molto bassa e la sua scelta di principi di colore presenta una varietà di opzioni. Mentre non insegna ai suoi utenti perché i colori funzionano bene insieme (la ruota cromatica dinamica di Kuler è molto più efficace a tale riguardo), i suoi risultati sono ottimi come punto di partenza o per finire un prototipo.
Le sue opzioni più avanzate sono molto utili: caratteristiche come la capacità di regolare la saturazione e il contrasto dell'intera tavolozza, le sovrapposizioni dal colore e le anteprime dei siti Web di esempio sono cose che spero che Kuler implementa molto presto. Tuttavia, ritengo che questo strumento non dovrebbe essere lo strumento principale utilizzato da coloro che desiderano apprendere la teoria dei colori, dato che fa troppo del lavoro per l'utente e non consente loro di sperimentare intuitivamente mantenendo le basi di ogni principio di colore.
Sì, ci sono molti altri siti in cui puoi trovare fantastici schemi di colori ... e in effetti andremo ad arrotondare questi siti e analizzarli nel prossimo futuro (cerca nel sito le nostre raccolte di risorse quando esce).
Per concludere questo articolo, esaminiamo un sito Web utilizzando alcuni dei principi che abbiamo discusso. Gamers with Jobs è un sito web dedicato a un'analisi più approfondita dei videogiochi, attraverso le sue funzionalità, podcast e forum.
Uno degli aspetti più difficili del lavoro con i colori è che a volte quando i colori non sono ancora stati disposti in un disegno, non sembrano funzionare bene insieme. Tuttavia, una volta applicati, la loro armonia visiva di solito diventa evidente. Mi sono causato un bel po 'di frustrazione adattando i colori scelti in Kuler prima di applicarli a un disegno, solo per scoprire che lo schema dei colori è stato alterato quel tanto che basta per essere sgradevole.
Fidati della teoria! Applicare i colori scelti attraverso un principio di colore, e poi regolare secondo necessità. Così facendo ti risparmierai un sacco di tempo e rafforzerai le tue capacità di progettazione man mano che inizierai a vedere il colore in modi più raffinati, artistici e persino scientifici!
Grazie per aver letto il mio primo articolo, mi sono divertito tantissimo a scriverlo. Si prega di fornire un feedback nella sezione commenti se si sente così incline, voglio rendere questi articoli più utili possibile.
Oh! E se sei desideroso di leggere di più, dai un'occhiata a un altro grande articolo basato sulla teoria che si riferisce a ciò di cui abbiamo appena parlato: "Understanding Hierarchy Visual in Web Design".
Se hai bisogno di un tema professionale per il tuo prossimo progetto, sfoglia i nostri modelli Web. Ci sono un sacco di esempi di bellissimi colori per i siti Web da decostruire anche su ThemeForest. O assumere un designer su Envato Studio.
Accentsconagua