Share
Benvenuti alla decima lezione della nostra serie Web Design for Kids, interamente dedicata a Color.
In questo tutorial passeremo alla teoria dei colori, ai diversi modi di usare i colori nel nostro CSS, al significato di determinati colori e rivedremo come selezionare i colori perfetti per i nostri siti. Finiremo con alcuni suggerimenti per l'utilizzo del colore sul Web.
Non dimenticare di porre domande nella sezione commenti in fondo a questa pagina!
Teoria dei colori coinvolge un sacco di cose, ma l'obiettivo principale è guardare come i colori si comportano tra loro in un design. Chiamiamo un gruppo di colori scelti per essere usati insieme a Palette dei colori. Una tavolozza di colori ben progettata avrà colori così complemento l'un l'altro e hanno il bene contrasto e vitalità. Parleremo di cosa significano queste parole in un momento.
Scegliere i colori giusti e sapere perché alcuni colori funzionano e altri no, può determinare se il nostro progetto funzionerà o meno. La scarsa scelta dei colori può rendere il nostro sito difficile da utilizzare, o il nostro testo è impossibile da leggere e l'utente lascerà il nostro sito web.
Prima di andare troppo avanti nel nostro tutorial, parliamo di una terminologia di colore di base di cui parleremo molto. Useremo questi termini per aiutarci a capire meglio ciò che rende ogni colore così unico.
UN colore è(più o meno) il colore di un oggetto. Quando ci riferiamo a cose come "rosso" o "giallo" stiamo parlando della loro tonalità.
Colore saturazione si riferisce a quanto è vivido, o forte, un colore. Una saturazione bassa crea un colore che appare sbiadito, mentre un'alta saturazione produce e colori molto vividi.
Luminosità si riferisce alla luminosità o all'oscurità di un colore. Questo va dal nero (senza luminosità) al bianco (piena luminosità).
La ruota dei colori è basata su rosso, giallo e blu ed è abbastanza nota agli artisti. Come designer, capire come vengono creati i colori ci aiuta ad avere una migliore idea di quali colori complemento l'un l'altro e perché.
La ruota sinistra sulla macchina qui sotto mostra i tre colori primari. Con questi tre colori possiamo creare tutti gli altri colori.
La ruota a destra sulla macchina sopra mostra colori secondari troppo: i colori che sono stati creati mescolando i colori primari. Ad esempio, il blu e il giallo diventano verdi, mentre il blu e il rosso diventano viola.
La ruota dei colori di sinistra sulla macchina qui sotto mostra un altro livello: colori terziari. Questi sono colori creati mescolando a primario e secondario colore. Ad esempio, mescolando il blu con il viola si ottiene un viola bluastro scuro.
Esistono numerosi sistemi di colori (modi per descrivere i colori) ma solo alcuni sistemi sono adatti per il web.
RGB sta per "Red Green Blue" e descrive come vediamo i colori sui display elettronici. Questi tre colori possono essere combinati per produrre molti altri colori. I tre valori sono elencati in ordine e ciascuno va da 0 a 255.
body background: rgb (138,138,226);
Il precedente CSS produce uno sfondo giallo-arancione su una pagina. All'interno delle parentesi puoi vedere vari valori di rosso, verde e blu.
Abbiamo usato solo i colori esadecimale valore finora in questa serie, ma possiamo usare un colore nel nostro CSS in molti modi diversi.
Visita questo sito per un rapido elenco di valori esadecimali e RGB per 500 colori specifici.
HSL sta per "Hue Saturation Lightness" e il valore è composto da tre numeri in questo ordine.
Possiamo dichiarare lo stesso giallo-arancio sul corpo di una pagina usando un valore HSL invece dei valori esadecimale o RGB del colore:
body background: hsl (43,100%, 57%);
Il primo valore qui, 43, rappresenta un angolo su un cerchio di colori. Questo è ciò che ci dà il colore. Il rosso è 0 o 360 gradi, mentre il verde è 120 gradi e il blu è 240 gradi.
Il secondo valore ci dà una percentuale di saturazione per il colore, con 100% qui completa saturazione.
Il valore finale, leggerezza, determina quanto è chiara o scura la tonalità. Il 100% è bianco, lo 0% è nero e qualsiasi cosa nel mezzo imposta una combinazione dei due.
Il valore che utilizziamo nel nostro CSS dipende interamente da noi, ma i valori HSL sono più semplici da indovinare selezionando un valore dell'angolo che si sposta in senso antiorario da rosso (0) e quindi aggiungendo la percentuale di saturazione e luminosità che vogliamo.
Ci sono un numero limitato di colori che hanno nomi che possiamo usare nel nostro CSS, nessun numero richiesto.
corpo sfondo: verde;
Un elenco completo di questi nomi di colori può essere trovato qui.
Se avessimo mai un valore Hex e avessimo bisogno del valore RGB o HSL di quel colore (o viceversa!) Ci sono alcuni strumenti accurati che faranno questo lavoro per noi, come rgb.to e Colorrrs.
I colori hanno molto significato. A seconda del paese in cui vivi, un determinato colore può essere usato per indicare pericolo, amore, felicità o malvagità. I colori possono far reagire gli utenti con determinati sentimenti, quindi avere una comprensione di ciò è importante per comunicare il nostro messaggio all'utente.
Dai un'occhiata a questo grafico che mostra come colori diversi significano cose diverse in varie culture.
Discutiamo brevemente alcuni significati dietro i tre colori primari: giallo, rosso e blu.
Il giallo attira l'attenzione dell'utente più di ogni altro colore e generalmente rappresenta la felicità e il sole. D'altra parte, il giallo può anche significare "attenzione", come mostrato con molti segnali stradali.
Usare il giallo sul web può essere molto accattivante, quindi è meglio non abusarne e assicurarci di mettere in evidenza solo le informazioni importanti.
A seconda del paese in cui vivi, il rosso può significare qualsiasi cosa, dal pericolo, alla rabbia, all'energia, all'amore e alla felicità. Qualunque cosa possa significare, il rosso è sempre usato per rappresentare un estremo sentimento o azione.
Nel web design il rosso viene spesso usato per comunicare la cancellazione o errori. È un colore audace che cattura l'attenzione dell'utente in modo che possa funzionare bene come un colore accento. Troppo rosso su un sito può essere schiacciante e potrebbe essere difficile dire cosa sia particolarmente importante.
Il blu rappresenta per lo più sia la calma che la tristezza ed è un colore molto popolare sul web.
La sensazione creata usando il blu nei disegni dipenderà molto dall'ombra e dalla tonalità che selezioniamo. Mentre un blu scuro comunicherà forza e affidabilità, un blu più chiaro sarà più divertente e amichevole.
La maggior parte dei siti avrà una serie di colori che funzionano per dare gerarchia e impostare il sensazione di un design. La nostra selezione dei colori può essere tanto importante quanto tutte le altre decisioni progettuali che abbiamo dovuto prendere finora, quindi dobbiamo avere un buon occhio per capire quali colori funzionano insieme, indipendentemente dal fatto che abbiamo ottenuto un buon contrasto in tutta la pagina, e se i colori hanno la stessa sensazione o significato del nostro contenuto.
Ecco un altro sguardo alla tavolozza dei colori principale utilizzata in tutta la serie di tutorial Tuts + Town:
I colori più chiari vengono utilizzati come sfondi mentre i colori più scuri vengono utilizzati per il testo o per evidenziare determinate sezioni.
In generale, i colori esistenti attraverso gli uni dagli altri sulla ruota dei colori sono considerati piacevoli alla vista. Questi sono complementare colori - quando combinati producono una sfumatura di grigio. È possibile che i colori che si trovano uno accanto all'altro sulla ruota dei colori funzionino bene insieme, ma potrebbe essere necessario un po 'di saturazione e regolazione della luminosità per ottenere il giusto abbinamento.
Abbiamo anche toccato un po ' contrasto nel precedente tutorial sulle basi del design, ma diamo brevemente un altro sguardo.
Il corretto contrasto riduce l'affaticamento degli occhi e rende chiara la gerarchia visiva. Il miglior esempio di contratto buono contro cattivo può essere visto confrontando determinate combinazioni di colori di sfondo e testo.
L'immagine in alto mostra un contrasto debole a sinistra con un contrasto migliore a destra. Il testo con scarso contrasto è difficile da leggere e fa male agli occhi, creando un effetto sfocato.
Ci sono strumenti che ci forniscono elenchi di bellissime tavolozze di colori tra cui scegliere, che possono essere un risparmio in tempo reale e servire da grande ispirazione.
Coolors.co è uno dei selettori di colore più facili da usare disponibili al momento.
Ci fornisce splendide tavolozze di colori che possiamo personalizzare e modificare premendo la barra spaziatrice.
Adobe Color è un altro strumento di selezione dei colori che fa un grande uso di quella straordinaria ruota dei colori di cui abbiamo parlato prima.
Possiamo apportare modifiche alla ruota dei colori, determinare la nostra tavolozza e quindi apportare ulteriori modifiche ad ogni singolo colore.
Adobe Color ci consente inoltre di salvare le nostre tavolozze preferite e sfogliare quelle popolari e preselezionate.
Quando si scelgono i colori per il Web e li si applicano agli elementi della pagina, è importante tenere a mente alcune cose per assicurarsi che questi colori migliorino l'esperienza dell'utente.
Il contrasto è così importante che, in caso di dubbio, scegli l'opzione più sicura; anche se sembra un po '"noioso"! Alcuni dei compiti più importanti che abbiamo come designer sono assicurarsi che le cose siano funzionali, facili da usare e facili da leggere. Scarsa contrasto impedirà ai nostri utenti di leggere il nostro meraviglioso contenuto.
Quindi, anche se è OK essere avventuroso con le tue scelte di colore, queste scelte non dovrebbero mai togliere dal funzionamento generale del sito o distrarre dal contenuto.
Gli strumenti di selezione delle palette di colori, come Coolors, ci forniranno spesso cinque colori. Cinque colori ci permettono di avere uno o due colori dominanti e alcuni colori meno dominanti per cose come pulsanti e collegamenti.
Avere più di cinque colori diversi mette i nostri disegni a rischio di essere inconsistenti e difficili da seguire; anche se bianco, nero e grigi non dovrebbero essere contati qui.
È molto importante non allontanarsi dall'uso del colore che è generalmente accettabile da molte persone. Ad esempio, la maggior parte delle persone è abituata al significato di verde "aggiungi" e rosso significa "cancella". Invertire questa funzione sul nostro sito Web sarebbe una pessima decisione di progettazione perché non è ciò che è previsto e probabilmente confonderà gli utenti.
In questo tutorial abbiamo discusso le teorie e le regole del colore e come selezionarle e usarle correttamente sul web. Ogni colore porta il suo messaggio. Dobbiamo assicurarci che questo messaggio corrisponda a quello dei nostri contenuti attraverso scelte di tavolozza attentamente studiate.
Ora completeremo la nostra serie con alcune riflessioni finali e diversi modi in cui possiamo condividere il nostro duro lavoro con amici e familiari online.
Ci vediamo in giro per la città!
Accentsconagua