La corrispondenza dei colori nel web design è un'importante disciplina che risale al Medioevo e utilizzata per creare eccezionali opere dell'umanità. Quindi proviamo a comprimerlo in un piccolo post!)
Certo, un post non è sufficiente per comprendere tutta l'essenza della teoria del colore, ma contiene le tesi ei concetti principali di questa disciplina.
Ecco 5 passaggi da seguire per scegliere la giusta combinazione di colori per il tuo sito web.
Il primo passo è il più importante. Il colore principale crea la prima impressione del sito e stabilisce anche una connessione tra il tuo marchio e le emozioni che sta vivendo il tuo pubblico. Tutto ciò crea la tua identità, quindi la scelta del colore principale dovrebbe essere affrontata in modo molto approfondito.
Naturalmente, se il tuo marchio è già associato a un colore, questo passaggio sarà molto più semplice.
Innanzitutto, va tenuto presente che colori diversi evocano emozioni diverse. E questo fatto è stato scientificamente confermato. Anche diverse tonalità dello stesso colore influenzano le emozioni del pubblico in modi diversi. C'è sempre un certo grado di incertezza, a seconda delle associazioni personali di una persona, ma in generale, gli stessi colori possono causare le stesse emozioni in persone diverse.
- Rosso: passione, aggressività, pertinenza.
- Arancione: agilità, energia.
- Giallo: entusiasmo, felicità, attenzione/avvertimento.
- Verde: crescita, stabilità, natura.
- Blu: serenità, apertura.
- Blu: sicurezza, fiducia, professionalità.
- Bianco: pulizia, salute.
- Viola: lusso, mistero, romanticismo (tonalità chiare).
Non sorprende che molte lattine utilizzino una combinazione di colori a base di blu.
Ricorda che stai progettando per un gruppo specifico di persone che potrebbero avere emozioni diverse dalle tue. Inoltre, vale la pena considerare i diversi atteggiamenti nei confronti dello stesso colore di persone di diversi generi, culture o religioni.
Quando scegli il tuo colore principale, dovresti iniziare escludendo i tuoi concorrenti dall'elenco dei colori considerati. Dopodiché, devi considerare che tipo di umore dovrebbe creare il tuo marchio e quali emozioni evocare.
Determina il colore esatto (la sua tonalità e saturazione)
Dopo aver scelto il colore principale, è necessario determinarne la tonalità e la saturazione. Come notato sopra, il tono di un colore e la sua saturazione possono cambiarne il significato. Ad esempio, le tonalità più scure del giallo (ad esempio l'oro) danno l'impressione dell'antichità, le tonalità più chiare non daranno questo effetto.
La regola generale è che le tonalità chiare creano un senso di energia, freschezza, divertimento, sfumature più scure: stabilità e professionalità.
Successivamente, è necessario determinare l'esatto valore numerico del colore nei sistemi RGB, CMYK, HEX o Pantone per utilizzarlo nel processo di progettazione.
Se, ad esempio, hai scelto un colore che è già utilizzato su qualche risorsa web e desideri applicarlo o applicarli, puoi utilizzare il servizio Stylify Me, che ti aiuterà a determinare i colori utilizzati su qualsiasi sito web.
Seleziona il tipo di combinazione di colori
Prima di scegliere il resto dei colori, devi determinare come interagiranno. Vuoi una combinazione di colori più contrastante o una combinazione di colori più tranquilla?
Puoi combinare i colori come preferisci, ma qui abbiamo presentato le combinazioni di colori più comuni.
Monocromo
Implica l'utilizzo di diverse tonalità del colore di base. Più spesso utilizzato per stili di design minimalisti.
Analogico
Colori simili che appaiono vicini l'uno all'altro sulla ruota dei colori.
Pendenza
Passaggio graduale da un colore all'altro. Più colorato dell'analogico, ma può distrarre da altri elementi di design.
contrasto
Due colori opposti. Se guardi la ruota dei colori, i colori opposti sono i più contrastanti. Ad esempio, rosso e verde o giallo e viola. L'uso di questa combinazione di colori aggiunge dinamismo all'impatto visivo del design.
I contrasti aiutano a manipolare l'attenzione dell'utente, permettendo di evidenziare gli elementi più importanti (pulsanti) e di nascondere quelli meno significativi.
duplex
Crea immagini utilizzando solo 2 colori. - non è tanto una combinazione di colori quanto una sorta di decorazione di una combinazione di colori contrastanti.
Per dirla semplicemente, il duplex sembra semplicemente fantastico, è un effetto visivo dinamico che "cattura" l'attenzione dell'utente.
Triade
Tre colori equidistanti tra loro sulla ruota dei colori. Una delle combinazioni di colori più comunemente usate, la triade è uno standard affidabile. È difficile usarlo correttamente, basta disegnare un triangolo equilatero sulla ruota dei colori e hai tre colori nella tua triade.
Contrasto diviso (diviso)
Utilizzo di un terzo colore oltre a due a contrasto. Oltre allo schema contrastante, è consentito porre l'accento sulle parti necessarie del design, ma ha più possibilità per questo.
Scegli i colori secondari
La definizione di una combinazione di colori aiuterà a semplificare la selezione dei colori secondari. Ma tutti dovranno lavorare sulla scelta delle loro sfumature e saturazione, come hanno fatto quando hanno scelto il colore primario.
Il semplice strumento Paletton ti aiuta a visualizzare diverse combinazioni di colori. Puoi scegliere il colore principale e definire gli schemi di colori, mentre il Paletton definisce i colori di sfondo.
Decidi dove e come utilizzerai ciascun colore
Quindi hai una grande tavolozza di colori per il tuo progetto ... ora cosa fare con esso? Applicare i colori su un sito Web è il punto in cui l'arte e l'abilità di un designer si incontrano.
Gli accenti non devono essere usati solo su elementi di invito all'azione o pulsanti importanti. Puoi applicarli a diverse parti del sito. Ad esempio, evidenziare le parole importanti nel testo in modo che l'utente vi presti particolare attenzione.
Innanzitutto, devi progettare il sito in bianco e nero. Usando la scala di grigi per determinare l'importanza di un particolare elemento, costruisci una gerarchia in base all'importanza di ogni parte del tuo progetto.
Conclusione
Quindi, abbiamo scoperto che la scelta di una combinazione di colori nel web design è una fase importante nel design del sito web, che deve essere affrontata a fondo. La scelta del colore principale è molto importante perché determina lo stato d'animo generale che il tuo sito porterà.
Il tipo di combinazione di colori influisce anche sulle emozioni che un sito evocherà dai visitatori. Il tipo determina il numero di strumenti che è possibile utilizzare per determinare l'ordine in cui vengono utilizzati i colori.
Ragazzi, mettiamo la nostra anima nel sito. Grazie per
che tu scopra questa bellezza. Grazie per l'ispirazione e per la pelle d'oca.
Unisciti a noi su Facebook e In contatto con
Schema n. 1. Combinazione complementare
I colori complementari, o complementari, contrastanti sono colori che si trovano sui lati opposti della ruota dei colori di Itten. La loro combinazione sembra molto vivace ed energica, specialmente con la massima saturazione del colore.
Schema n. 2. Triade: una combinazione di 3 colori
Una combinazione di 3 colori equidistanti. Fornisce un contrasto elevato mantenendo l'armonia. Questa composizione sembra piuttosto vivace anche quando si usano colori pallidi e desaturati.
Schema n. 3. Una combinazione simile
Una combinazione da 2 a 5 colori uno accanto all'altro sulla ruota dei colori (idealmente 2-3 colori). Impressione: calma, invitante. Un esempio di una combinazione di colori tenui simili: giallo-arancio, giallo, giallo-verde, verde, blu-verde.
Schema n. 4. Combinazione separata-complementare
Una variante di una combinazione di colori complementari, vengono utilizzati solo i colori vicini invece del colore opposto. Una combinazione di un colore primario e due aggiuntivi. Questo schema sembra quasi altrettanto contrastante, ma non così intenso. Se non sei sicuro di poter utilizzare correttamente le combinazioni complementari, usa le combinazioni separate-complementari.
Schema n. 5. Quaderno - combinazione di 4 colori
Una combinazione di colori in cui un colore è il principale, due sono complementari e un altro enfatizza gli accenti. Esempio: blu-verde, blu-viola, rosso-arancio, giallo-arancio.
Schema n. 6. Quadrato
Combinazioni di singoli colori
- Bianco: sta bene con tutto. Migliore combinazione con blu, rosso e nero.
- Beige: con blu, marrone, smeraldo, nero, rosso, bianco.
- Grigio: con fucsia, rosso, viola, rosa, blu.
- Rosa: con marrone, bianco, verde menta, oliva, grigio, turchese, azzurro.
- Fucsia (rosa scuro): con colore grigio, marrone chiaro, lime, verde menta, marrone.
- Rosso: con giallo, bianco, marrone, verde, blu e nero.
- Rosso pomodoro: blu, verde menta, sabbia, bianco crema, grigio.
- Rosso ciliegia: azzurro, grigio, arancio chiaro, sabbia, giallo paglierino, beige.
- Rosso cremisi: bianco, nero, rosa damascena.
- Marrone: azzurro acceso, crema, rosa, fulvo, verde, beige.
- Marrone chiaro: giallo pallido, bianco crema, blu, verde, viola, rosso.
- Testa di moro: giallo limone, blu, verde menta, rosa violaceo, color lime.
- Marrone rossastro: rosa, marrone scuro, blu, verde, viola.
- Arancione: azzurro, blu, viola, viola, bianco, nero.
- Arancio chiaro: grigio, marrone, oliva.
- Arancio scuro: giallo pallido, oliva, marrone, ciliegia.
- Giallo: blu, viola, azzurro, viola, grigio, nero.
- Giallo limone: rosso ciliegia, marrone, blu, grigio.
- Giallo pallido: fucsia, grigio, marrone, sfumature di rosso, marrone giallastro, blu, viola.
- Giallo dorato: grigio, marrone, azzurro, rosso, nero.
- Oliva: arancione, marrone chiaro, marrone.
- Verde: marrone dorato, arancione, insalata, giallo, marrone, grigio, crema, nero, bianco crema.
- Colore della lattuga: marrone, marrone giallastro, fulvo, grigio, blu scuro, rosso, grigio.
- Turchese: fucsia, rosso ciliegia, giallo, marrone, crema, viola scuro.
- Un elettricista è bello in combinazione con giallo dorato, marrone, marrone chiaro, grigio o argento.
- Blu: rosso, grigio, marrone, arancione, rosa, bianco, giallo.
- Blu scuro: viola chiaro, azzurro, verde giallastro, marrone, grigio, giallo pallido, arancione, verde, rosso, bianco.
- Lilla: arancione, rosa, viola scuro, oliva, grigio, giallo, bianco.
- Viola scuro: marrone dorato, giallo pallido, grigio, turchese, verde menta, arancio chiaro.
- Il nero è versatile, elegante, si abbina a tutte le combinazioni, soprattutto con arancio, rosa, insalata, bianco, rosso, lilla o giallo.
Le persone stanno ancora discutendo sul fatto che il contenuto sia la cosa principale. Se me lo chiedi, sono completamente d'accordo con loro e la mia opinione si basa sulla mia esperienza. Indipendentemente dal fatto che sia dominante o meno, c'è qualcosa che è ugualmente importante! Cos'è questo, chiedi? So che tutti amano dire: "Non giudicare un libro dalla copertina". Ma in quale altro modo hai intenzione di attirare l'attenzione di qualcuno oltre alla copertina originale? Ovviamente, quando attiri l'attenzione di qualcuno, puoi dedicare il resto dei tuoi sforzi ai contenuti. Riguarderà i colori del web design e come gestirli.
Fai la prima impressione solo una volta.
C'è sempre un'azione specifica che vuoi costringere un visitatore al tuo sito. Questa è l'azione su cui metti più enfasi. Può essere un pulsante di iscrizione, un pulsante Avanti o un pulsante di acquisto.
Qualunque sia il pulsante, ricorda sempre che il fatto che venga cliccato o meno dipende da come si sente il visitatore quando si trova sul tuo sito.
In questo articolo imparerai a conoscere i 5 colori più popolari che renderanno il tuo sito web interessante e intrigante.
Pinterest usa una varietà di rossi
Senza dubbio, il rosso è considerato il colore più caldo. Se guardi la tavolozza dei colori di Pinterest, noterai immediatamente che il rosso è il loro colore primario.
Il rosso è spesso associato all'amore. È un colore forte e dinamico che può farti innamorare di tutto ciò che è vicino a quel colore.
Questo colore si vede spesso nella decorazione del magazzino, poiché la sua intensità crea un senso di urgenza.
Soprattutto, questo colore intenso può far sentire eccitati o gratificanti i visitatori del sito. Ma allo stesso tempo, può scoraggiare il desiderio di starci sopra, quindi devi sempre stare attento.
Usa il rosso per evidenziare il tuo web design. Si abbina bene con i colori bianco, grigio, azzurro o argento.
Un esempio pratico di utilizzo del rosso:
L'occhio umano vede rosso quando guarda la luce con una lunghezza d'onda compresa tra 630 e 700 nanometri. La luce al di sopra di questo intervallo è chiamata infrarossi e non è percepita dall'occhio umano, ma può essere identificata come calore. - Wikipedia
Uso più ampio della tavolozza dei colori rossi (di jimjim421):
10 associazioni con il rosso:
- sangue
- guerra
- fuoco
- mascolinità
- passione
- seduzione
- costrizione
- energia
- coraggio
Amazon ama l'arancia ricca:
L'arancione è un colore caldo e attivo, ma non così intenso come il rosso. L'arancione è caldo piuttosto che caldo.
Pieno di energia, questo colore vibrante incoraggia, piuttosto che costringere o costringere, le persone ad agire. L'arancione è percepito solo occasionalmente come intenso: richiede azioni come acquistare, iscriversi, vendere o seguire. Si consiglia di utilizzare l'arancione se dopo aver visitato il sito si desidera che l'ospite si senta motivato, gioioso, creativo ed entusiasta.
Un esempio pratico di utilizzo dell'arancione:
Aumento dell'uso della tavolozza arancione di manekineko:
10 associazioni con l'arancia:
- ottimismo
- definizione
- fuoco
- avvertimento
- autunno
- religione
- resistenza
- compassione
- Halloween
- organismo
Colore blu Facebook crea un senso di sicurezza:
Puoi trovare molti siti Web aziendali e aziendali che utilizzano il blu. Associamo questo colore a qualcosa di affidabile, sicuro, evoca una sensazione di fiducia ed esperienza. Pertanto, non sorprende che ogni uomo d'affari che si preoccupa delle impressioni che lascerà dal sito Web della sua azienda preferisce utilizzare il colore blu. Il blu crea sensazioni completamente opposte a quelle che lascia il rosso. Il blu ci tranquillizza e non dovremmo preoccuparcene troppo.
Un esempio pratico di utilizzo del blu:
Scommetto che non lo sapevi:
Un sondaggio, condotto in Germania e pubblicato nel 2009, ha dimostrato che il blu è il colore preferito dal 46 percento degli uomini intervistati e dal 44 percento delle donne. - Wikipedia
Uso più ampio della tavolozza dei colori blu da parte di entitydesigns:
10 associazioni con il blu:
- veridicità
- cordialità
- Magia
- ragazzi
- gratuità
- Polizia Stradale
La forza del verde acceso
Ti senti insolitamente ottimista in questo momento? Fammi indovinare: stavi guardando qualcosa di verde? Forse stavi solo guardando una pianta verde - questo, senza dubbio, ti ha calmato e ti ha fatto guardare le cose in modo più ottimista.
Chiunque sia in qualche modo connesso con l'ecologia ha più opportunità di utilizzare il verde nella creazione dei propri siti. Nota la banconota da $ 100. Qui prevale il colore verde! Siti come Groupon hanno anche molto verde nel loro marchio poiché trattano direttamente con il denaro. Il verde è molto rinfrescante e rilassante, e lascia alle persone un senso di equilibrio e ispirazione. Rappresenta l'equilibrio e l'armonia nel design.
Un esempio pratico di utilizzo del verde:
Scommetto che non lo sapevi:
In alcune lingue, tra cui il cinese antico, il tailandese, il giapponese antico e il vietnamita, la stessa parola può significare contemporaneamente blu e verde. Non ci sono fonti naturali di colorante alimentare verde che siano state approvate dalla Food and Drug Administration degli Stati Uniti. - Wikipedia
Uso più ampio del verde da parte di Skybluue2u:
10 associazioni con il verde:
- i soldi
- avidità
- invidia
- natura
- Primavera
- Salute
- gioventù
- erba
- speranza
Yahoo! e viola sul loro logo
Il colore viola è spesso associato a concetti come immaginazione, creatività, dignità, nobiltà e abbondanza. Le vivaci sfumature del viola sono associate in gran parte alla primavera e al romanticismo, mentre le tonalità più scure del viola sono associate al lusso e alla ricchezza. Il viola è usato in biancheria da letto carina e alla moda perché il viola è più rilassante di qualsiasi altro colore. È considerato più femminile e romantico che maschile. Quando guardi le cose viola, sembra chiaramente artificiale, questo perché questo colore è molto raro in natura. Proprio come il rosso, le persone trovano il viola troppo forte e brillante, li fa sentire obbligati a fare qualcosa, li spinge a compiere una certa azione. Pertanto, sarebbe efficace accoppiare questo colore con il nero o il bianco.
Un esempio pratico di utilizzo del viola:
Scommetto che non lo sapevi:
Nell'aprile 2007, gli scienziati hanno suggerito che i primi archaea potrebbero aver utilizzato un pigmento viola simile alla clorofilla per assorbire l'energia dal sole. Se fosse davvero così, vaste aree di oceani e coste sarebbero viola. Questa teoria è chiamata Ipotesi della Terra Viola. - Wikipedia
Aumento dell'uso del viola da
10 associazioni con il viola
- ricchezza
- generosità
- nobiltà
- raffinatezza
- romanza
- arte
- esotico
- spiritualità
- lusso
- femminilità
1WD utilizza i colori monocromatici in modo intelligente
Tipicamente i colori monocromatici come bianco, nero, grigio scuro e grigio chiaro dovrebbero essere usati come sfondo in un disegno, con colori di accento preesistenti e ben posizionati che sono più luminosi e più saturi. Dai un'occhiata al sito, 1stwebdesigner - 1WD. Usano anche l'arancione come colore di accento brillante, ma solo in una combinazione armoniosa con i toni del grigio scuro e del grigio chiaro. E, naturalmente, bianco (il colore di sfondo del sito). Il nero rappresenterà sempre modernità, mistero, eleganza e forza. Il grigio è un colore neutro che rappresenta qualcosa di calmo e quasi sconosciuto, come un'ombra. Poiché il grigio a volte può sembrare fangoso, il bianco creerà l'effetto opposto. Il bianco è sinonimo di pulizia, apertura, semplicità e minimalismo.
Un esempio pratico di utilizzo del colore monocromatico:
Scommetto che non lo sapevi:
La fotografia digitale monocromatica cattura solo le sfumature di nero percepite dal sensore della fotocamera. Nelle immagini a colori di post-elaborazione, è possibile trasformare la luminanza percepita combinando le metriche di più canali. - Wikipedia
Maggiore uso della tavolozza monocromatica da parte di munsteri
10 associazioni con i colori monocromatici
- potenza
- eleganza
- spazio
- morbidezza
- innocenza
- pessimismo
- depressione
- la noia
Qual è il tuo colore preferito? E quali sentimenti ed emozioni evoca in te?
Traduzione - Dovere
Dall'autore: un web designer ha nel suo arsenale molti strumenti per interagire con gli utenti usando il colore. La corrispondenza dei colori nel web design è uno strumento di marketing efficace, tuttavia, dovrebbe essere usato con molta attenzione in modo da non ottenere un design scavato che lasci gli utenti a disagio e inquieti.
Questo è, ovviamente, un esempio estremo. L'idea principale del mio articolo è che il design dovrebbe essere non solo funzionale e utile, ma anche emotivamente attraente. Per fare ciò, è necessario considerare con particolare attenzione la tavolozza dei colori del sito, che è un insieme di colori utilizzati nello sviluppo del web design.
Requisiti piuttosto seri sono imposti alla combinazione di colori del sito, poiché la combinazione di colori per il web design non solo determina l'aspetto della tua risorsa, ma sarà anche associata al tuo marchio su Internet. La maggior parte dei siti ha una tavolozza da 2 a 4 colori, senza contare il bianco e nero. Proviamo a capire come creare la combinazione di colori più attraente ed efficace nel design del tuo sito web.
Scelta del colore principale
Se hai già un logo già pronto, è meglio usare uno dei suoi colori come principale. Se è necessario selezionare da zero la tavolozza del sito, sarà necessario utilizzare un altro metodo. Analizza il pubblico di destinazione della tua risorsa in termini di preferenze di colore sociali o specifiche per età.
Prendi un sito web a tema matrimonio, per esempio. Le nostre spose indossano abiti bianchi, che simboleggiano l'innocenza e la purezza. In Cina, il bianco è considerato il colore del lutto, quindi le spose cinesi si vestono di rosso, poiché il rosso per i cinesi è un simbolo di amore, felicità e buona fortuna. Aggiungi più vernice gialla qui e ottieni il colore del potere e della ricchezza.
Con tutte queste sfumature culturali, è molto difficile trovare le combinazioni di colori perfette per il web design che si adattino davvero al tuo sito web e funzionino per questo. Pertanto, molte aziende che si rispettano realizzano versioni locali di siti per paesi e popoli diversi.
I colori più sicuri sono il viola e il blu. Il viola è considerato il colore della ricchezza, del potere e dell'alto status sociale ovunque tranne che in Thailandia (in Thailandia è un simbolo di dolore). Il blu è associato all'ottimismo, alla fiducia, alla felicità. È vero, in Giappone significa atrocità e in India significa tristezza.
Tipi di contrasti di colore
Contrasto di tono. Questo tipo di contrasto dovrebbe essere usato con attenzione, preferibilmente in combinazione con altri tipi di contrasto, e solo quando è giustificato. Il contrasto più pronunciato nel web design è la combinazione di tre colori: rosso, giallo e blu. Più i colori combinati sono nella ruota dei colori rispetto a questi tre, più debole è il contrasto di tono.
Contrasto di luce e buio. La coppia contrastante più rigorosa consiste, ovviamente, di bianco e nero. Tra i colori complementari, il contrasto di luminosità più basso è tra il verde e il rosso e il più grande tra il viola e il giallo.
La nostra visione è più sensibile non alle gradazioni di colore degli oggetti, ma alle sfumature della loro luminosità. Per un web designer, la capacità di disporre in modo armonioso i punti scuri e chiari nel design del sito è la chiave per un design efficace.
Freddo e caldo. Non sorprende che i toni freddi e caldi siano associati alla temperatura negli esseri umani. Ciò è dovuto al fatto che l'atmosfera terrestre colora gli oggetti distanti in toni bluastri.
Quindi, più un oggetto è lontano da noi, più lo immaginiamo freddo. Questa proprietà viene utilizzata attivamente sia da artisti che da web designer per evocare le emozioni desiderate nell'utente.
Corso di minimalismo
Oggi la tendenza sono tonalità luminose e dinamiche, minimalismo e schemi monocromatici che non distraggono dal contrasto tra i colori. Combinato con uno stile minimalista (utilizzando, ad esempio, pulsanti trasparenti o caratteri bianchi in grassetto), uno schema monocromatico è facile da incorporare in un sito Web e un piacere da guardare.
La maggior parte delle persone nel web design preferisce combinare gli stessi colori di sfondo con una tavolozza contrastante di altri elementi. Pertanto, sarebbe logico utilizzare una tavolozza di 1-2 colori per lo sfondo del sito e una tavolozza a contrasto per pulsanti e altri oggetti che invitano all'azione.
Probabilmente ti sei imbattuto almeno una volta nel servizio web Twitter e hai notato che la sua tavolozza di colori è composta da diverse sfumature di blu. Sai già che il blu è il colore più sicuro da usare sul web, quindi non sorprende che Twitter lo utilizzi, soprattutto se si considera la popolarità globale del servizio, il suo supporto per un numero enorme di lingue e, di conseguenza, culture .
Il colore come aiuto alla navigazione
Un altro modo vincente di utilizzare i colori di sfondo e di accento è creare una sorta di "gerarchia dei colori" che insegni all'utente che un particolare colore indica una particolare azione sul sito.
Riassumiamo. Il colore e la capacità di combinare i colori nel web design sono lo strumento più importante per un web designer. Se lo usi correttamente e non dimentichi l'usabilità del sito, puoi evidenziare proficuamente il contenuto, "indirizzando" delicatamente e in modo discreto il visitatore a eseguire determinate azioni.
Immagina che il tuo sito sarà visitato da migliaia e milioni di persone - ecco perché dovresti fare tutto il possibile per rendere il suo utilizzo il più semplice e confortevole possibile.
Spero che questo materiale ti sia stato utile. Iscriviti agli aggiornamenti del nostro blog per non perdere tutto il divertimento. Fino!
Tendenze e approcci moderni nello sviluppo web
Impara da zero l'algoritmo di crescita rapida nella costruzione del sito
La teoria del colore nel web design è un argomento vasto che richiede molta pratica per comprendere le specifiche della sua applicazione. La scelta del colore dipende anche dall'ambiente e dalle specificità del lavoro del web designer stesso, poiché guardiamo a colori e sfumature in modo leggermente diverso rispetto a illustratori e artisti.
Abbiamo già in parte dedicato i nostri materiali al colore nel web design e in Photoshop. Ma oggi vogliamo parlare e guardare un po' in generale i colori e le tavolozze dei colori, dove e come è più facile e conveniente selezionare le loro combinazioni, cosa cercare e altro ancora. In generale, abbiamo raccolto diverse risorse per la corrispondenza dei colori, trovato interessanti tavolozze già pronte e vogliamo anche approfondire alcuni punti della teoria del colore.
Teoria del colore in più paragrafi
Quando progettiamo un sito web, abbiamo 16,8 milioni di colori tra cui scegliere. E tutti devono essere combinati e selezionati, e se immagini quante varianti di tali combinazioni esistono, allora ... è quasi infinita. Ma i colori hanno un senso. Immagina di essere presentato con la tua cosa preferita. Sei contento, sei contento. Ora immagina che una cosa sia una cosa, ma il suo colore è il più odioso per te. Ad esempio, una sfumatura che mescola verde, giallo e grigio. Oh, sarai eccitato, sarai forte, ma la gioia svanirà.
I colori hanno un senso. Danno tono, influenzano emotivamente allo stesso modo in cui il carattere ha un enorme impatto sulla psicologia umana.
I colori primari sono i colori principali per le sfumature. L'occhio umano percepisce tre colori fondamentali: ciano, giallo e magenta. Qualsiasi colore che vedi di fronte a te ora consiste in una combinazione di questi tre, ma in diverse quantità di luminosità, sfumature e altro. Sì, sì, la stampa avviene in questi colori.
Al contrario, Internet utilizza RGB (rosso, verde, blu) ei suoi valori esadecimali.
RGB (59, 89, 145) o # 3b599b - Facebook blu
RGB (0, 0, 0) o # 000000 - nero
Ogni due caratteri nel codice a 16 cifre indicano il colore di base: rosso - 3b, verde - 59, blu - 9b.
Freddo caldo
Inoltre, i colori durano per le tonalità fredde (abbondanza di blu e verde) e calde (molti rossi e gialli). I colori caldi nel web design evocano sentimenti di calore, passione. Sono aggressivi e audaci, ma simboleggiano anche il fatto che alcune cose devono essere fermate, quindi vengono utilizzate per messaggi critici, icone e altro ancora.
I colori freddi portano freschezza, adatti a temi invernali, notturni, tristi o acqua. Portano in sé solitudine e freddo, paura. Ma nel frattempo, sono non aggressivi e calmanti.
Temperatura
Anche la temperatura delle immagini può essere modificata, determinando un cambiamento nel livello di colore arancione. Quindi, trasformiamo l'immagine in una più calda e gioiosa. Proprio come il mondo sembra più felice quando il sole gli proietta i suoi raggi giallo-arancio. Un abbassamento della temperatura, invece, rende l'immagine più fredda e meno attraente, come se trasmettesse la natura in una giornata nuvolosa.
Sfumature e ombre
Le tinte si ottengono aggiungendo il bianco al colore, allo stesso modo in cui si aggiunge il nero quando si crea un'ombra. Tinte e ombre ti consentono di creare colori e tavolozze monocromatiche aggiungendo diverse quantità di bianco e nero.
Ad esempio, prendiamo un colore di primo piano di # 8dbdd8 (azzurro). L'immagine sotto mostra una tavolozza monocromatica in cui le due tonalità a destra e a sinistra sono il risultato dell'aggiunta di diverse quantità di bianco e nero.
Saturazione, tono, luce
Inoltre, i colori sono distribuiti in base a saturazione, tonalità e luminosità. La saturazione rende il colore più ricco e più scuro. Quando diciamo azzurro o verde scuro, intendiamo saturazione.
La tonalità determina la differenza dal colore di base dell'arcobaleno (ce ne sono sette). Cioè, ad esempio, "blu verdastro". Né quello né quello, ma solo il tono.
La luminosità definisce un colore in relazione al bianco puro, quanto è brillante o opaco. Qualcosa di simile alla saturazione, ma dipende da un parametro diverso.
Combinazioni di colori
Se consideriamo le combinazioni di colori, ce ne sono solo quattro: monocromatiche (sfumature di un colore primario), complementari (di due colori che si trovano sui lati opposti della ruota dei colori), analogici (tre colori che si trovano accanto alla ruota dei colori ), triade o triadic (i tre colori che si trovano agli angoli del triangolo disegnato sopra la ruota dei colori).
Progettare un layout di fiori
Questa è una breve teoria e successivamente faremo semplicemente riferimento a questo materiale. Ma anche all'inizio dello studio del web design, questa teoria è importante, anche se spesso i tuoi occhi possono capire che qualcosa sembra completamente diverso da quanto descritto nei numeri. Tipo di blu, ma senti che non è abbastanza saturo. Queste sono le caratteristiche della natura dello sviluppo di ogni persona. Questo è il motivo per cui molti web designer si lanciano a capofitto nel design della tavolozza dei colori, proprio come alcune persone si dedicano allo studio della tipografia. Sperimentano diverse tonalità, saturazioni, temperature in combinazione con altre variazioni e vedono quando, cosa e come funziona.
Tuttavia, quando si tratta di colori web, esiste un concetto come "colori web sicuri". È apparso quando i display non erano ancora in grado di trasmettere 16 milioni di colori. Ma se ci sono colori così sicuri, perché altrimenti c'è qualcos'altro? Ma, vedi, è bello sapere perché esistono e come influiscono sulla scelta dei colori in generale.
Va inteso, poiché possiamo usare qualsiasi colore, i migliori progetti web si ottengono utilizzando il gruppo principale di colori. E sì, fidati dei tuoi occhi. Se non gli piace quello che vedono, prova a cambiare.
Quando serve aiuto
In caso di difficoltà di progettazione nella fase zero, è sempre possibile trovare idee per soluzioni cromatiche su Internet. Basta visitare il sito con le tavolozze dei colori e personalizzarlo, quindi raccogliere i colori desiderati e lavorarci sopra in Photoshop. Ad esempio, studia l'ispirazione per il webdesign o awwwards, ordina per colore e trova ispirazione.
Esploratore di colori
È una libreria e un laboratorio per creare una tavolozza di colori. La libreria contiene set di tavolozze per la stampa e il web. Puoi prendere un colore e vedere più sfumature e variazioni nei toni.
Сolor figlio th eweb
Seleziona tutti i colori e le sfumature per il colore specificato. Inoltre, la risorsa offre colori per combinazione e combinazione, tavolozza monocromatica, analogico, variazioni di saturazione, toni, luminosità e altro.
Copaso
Consente non solo di prelevare un colore operando con più parametri contemporaneamente, ma anche di assemblare una tavolozza in base a un determinato colore. Nella prima versione abbiamo creato un colore e nella seconda abbiamo creato una tavolozza e una gamma di sfumature e toni di colore.
olorotate
Questa è una delle poche applicazioni mobili che ti consente di lavorare con le tavolozze dei colori sul tuo smartphone o tablet. Ma esiste anche una versione per il browser del PC. Una caratteristica del progetto è lavorare con il colore in 3D. Ci viene offerto un cono di fiori. Ogni punto per la miscelazione di una tonalità si muove solo all'interno del proprio triangolo e il cono stesso può essere ruotato in modo conveniente.
Inoltre, ci sono set di tavolozze già pronte per Natale, monocromatiche, moderne, agrumi e altri.
lourlovers
Il sito è stato a lungo un catalogo di combinazioni di colori personalizzate. Di norma, include colori di design piatti, nonché numerosi modelli, trame, sfondi che sono disponibili gratuitamente.
Le tavolozze dei colori possono essere selezionate da fotografie e immagini. Abbiamo già parlato di questo e delle risorse anche per questo. L'idea nel suo insieme è interessante e molto utile, leggila a tuo piacimento.
Profili colore
Ma nel frattempo, la selezione della tavolozza è ancora metà del problema. L'argomento più scottante nel web design è la scelta dei profili colore. Abbiamo toccato questo argomento un po' prima (link all'inizio dell'articolo), ma ecco cosa vogliamo notare ora. Ogni monitor può essere calibrato per un profilo colore specifico. Questo viene fatto, ad esempio, in Windows 10 -> Pannello di controllo -> Gestione colore. Di conseguenza, alcuni colori possono apparire in modo diverso su monitor diversi.
L'argomento, come dicevamo, è confuso e quindi molti web designer non sono sempre sicuri di aver scelto il colore giusto. SRGB è consigliato più spesso, ma non necessario o assolutamente la soluzione e la scelta migliore. Questo vale anche per le immagini salvate con profili integrati e layout di siti Web. In altre parole, questo argomento può richiedere molto tempo per essere compreso.
Ma, nel frattempo, molti designer cercano di non pensarci affatto e lavorano con le impostazioni sul computer e in Photoshop per impostazione predefinita. E questo è anche vero, dal momento che anche se sei d'accordo sui colori con il cliente/cliente, non sarai comunque in grado di influenzare i colori sul monitor dell'utente finale.
Colori dell'interfaccia utente dei materiali
Google, quando ha creato le regole per il design dei materiali, ha anche dettagliato le disposizioni sul colore. Tuttavia, le regole sono così semplici in generale che possono essere facilmente applicate a qualsiasi interfaccia, che è ciò che le ha rese popolari.
Quando si tratta di scelte di colore, il design dei materiali segue uno stile simile al design piatto. Le costruzioni materiali per applicazioni e siti sono disponibili gratuitamente su Internet e quindi puoi vedere serie di colori con i tuoi occhi, creare tavolozze e molto altro.
Se decidi di lavorare solo con un set di colori di Google, ti consigliamo di testare entrambi gli strumenti per vedere come e come possono completarsi a vicenda. Quindi puoi anche utilizzare la risorsa da 0 a 255, per abbinare i colori in termini di luminosità e saturazione.
Conclusione
Il colore su Internet è per lo più semplice e non ci vogliono più di un paio di settimane per comprenderne i fondamenti e le teorie. Ma se decidi di approfondire questa stessa teoria del colore, imparerai molte, moltissime complessità, caratteristiche, modelli, influenze e soluzioni. Forse ad alcuni di voi girerà la testa per l'abbondanza di informazioni; qualcuno deciderà che” non ha bisogno di saperlo, ha bucato il logo con una pipetta e ha colorato il sito". Ma qualcuno deciderà di esaminare la teoria ancora e ancora; decide di addentrarsi nel "cesto di fiori" e sfumature, decide di iniziare a sperimentare.
Speriamo solo che i nostri materiali colorati ti aiutino un po' in futuro nel tuo lavoro sui tuoi progetti. Ti aiuteranno a trovare quel modo semplice per capire come funzionano i colori del web attraverso la pratica, la ripetizione, fidandosi dei tuoi occhi.
Ci sono molte risorse sulla selezione delle tavolozze dei colori, anche siti di ispirazione, ma quando ti siedi per "disegnare" il tuo progetto nella tua testa in qualche modo ... diventa vuoto. Ti siedi e pensi: " Che tipo di tonalità di blu prenderei ... un po 'più scuro o un po' più chiaro ... eh ... e il cliente non voleva pensare a tali sciocchezze ... per lui qualcosa che, ovviamente, ... piccole cose ... "
I giorni di Capodanno e il tempo libero sono un buon motivo per la creatività, la fantasia leggera per il proprio piacere, quando, ad esempio, non si hanno più le forze per uscire e divertirsi.
