Colore nel web design: come provocare l'emozione utente desiderato
Consigli / / December 19, 2019
Nel corso della storia umana, i maestri-artisti hanno ricevuto il riconoscimento universale grazie alla capacità di lavorare con il colore. Nel mondo di oggi non ricevono gli specialisti di riconoscimento meno, che sono in grado di combinare i colori negli scopi commerciali e di business - nella pubblicità e web design.
La possibilità di utilizzare i colori può essere pompato fino all'infinito. E 'una vera profondità di opportunità per l'esposizione umana.
Vi diremo i fondamenti della teoria del colore e colori, e poi parlare l'impatto emotivo di alcuni colori.
teoria del colore
tema di colore, è possibile dedicare un intero libro, in modo da non prendere del tutto, e limitarci a informazioni utili, che possono essere utilizzati per lo sviluppo del design di interfaccia.
Può essere diviso in teoria dei colori in tre parti:
contrasto
Ogni ombra è l'opposto, per così dire, del suo "nemico giurato", che è il più grande contrasto con questo colore. Per trovare un colore, è possibile utilizzare la ruota dei colori. È sufficiente selezionare il colore sul lato opposto del cerchio.
aggiunta
Questi colori non sempre in conflitto tra loro. I colori complementari enfatizzano l'un l'altro, a differenza del contrasto. Nella ruota dei colori, questi colori sono gli uni agli altri, come ad esempio i colori complementari viola - blu e rosa.
risonanza
Ogni colore è un certo stato d'animo. vivaci colori caldi (rosso, arancione, giallo) pieno di energia umana, risvegliarla, colori scuri freddi (verde, blu, viola), al contrario, si rilassano e lenire.
Ad esempio, BBC News Utilizzare la barra di navigazione rossa, per risvegliare il lettore, per rafforzare il suo stato eccitato. Data la specificità del sito - una notizia sensazionale - il rosso è una soluzione logica.
teoria del colore nel web design - è più di una semplice decorazione. Il colore può cambiare la percezione del tuo sito, e giocare un ruolo cruciale nel vostro business.
percezione emotiva del colore
Nessuno negherà la stretta interazione di colore e di emozione. E, naturalmente, qualsiasi web designer vuole utilizzare questo effetto per creare una certa atmosfera per ogni sito.
Sulla base di numerosi studi - l'analisi, pubblicata sul sito web vandelay designE inviare circa i colori nella Smash Magazine - spieghiamo come colori influenzano le emozioni e contribuire a creare UX-design.
E 'importante ricordare che le diverse culture di tutto il mondo hanno diverse percezioni di colore. Descriveremo le associazioni emotive che sono unici per la cultura occidentale.
rosso
Le emozioni e le associazioni: il potere, l'importanza, la gioventù.
Il colore più stimolante, con tanta energia a carico, può anche aumentare la pressione sanguigna. Il rosso rappresenta la passione e il potere, più di altri colori attirare l'attenzione, in modo spesso utilizzato per importanti avvisi e annunci.
Ad esempio, il rosso è il sito molto adatto No Way NSAIl cui scopo - per evitare che le presunte minacce.
Utilizzare un sacco di rosso nella parte superiore della pagina - questa è una grande soluzione perché richiama l'attenzione su importanti informazioni nel messaggio. Allo stesso tempo, le persone tendono a lasciare in fretta la "zona di pericolo" di colore rosso e scorrere verso il basso. Questo, a sua volta, permette all'utente di visualizzare più contenuti.
Ma questo colore può lavorare contro di voi, perché può causare aggressione o eccesso di stimolazione. Se si desidera creare un'atmosfera più rilassata, provate a utilizzare Red moderatamente e scegliere tonalità più chiare di rosso.
arancione
Le emozioni e le associazioni: cordialità, di energia e di unicità.
Come il più silenzioso di toni caldi, arancione può causare l'intero spettro delle diverse emozioni. Come colore di base, può essere di interesse e del tutore, e come secondario - preservare queste proprietà, ma in modo non intrusivo.
Inoltre, Arancione contribuisce a creare un senso di movimento e di energia. Ad esempio, sembra grande sul sito web dei cartoni animati FantaChe è indicativa di giovani e di movimento. Il colore è associato con la creatività, pur mantenendo un senso del marchio familiare.
giallo
Le emozioni e le associazioni: la felicità, l'entusiasmo, l'arcaismo (colori più scuri).
Questo è uno dei più versatili i colori e le emozioni che essa provoca, dipendono l'ombra in misura maggiore.
Colore giallo brillante aggiunge energia, ma senza la severità e durezza, che è presente in rosso. tonalità medio di colori giallo evocano un senso di comfort, anche se ancora vigoroso. tonalità scure (compreso l'oro) fornire un senso di antichità, riempire lo spazio senza tempo, la saggezza e la curiosità.
Ad esempio, nella pagina principale del agenzia di web design Flash media giallo scuro tono energia trasudano, la curiosità e l'autorità. Questo colore è ideale per le aziende che guadagnano loro consultazioni e che vogliono sottolineare la loro professionalità.
verde
Le emozioni e le associazioni: la crescita, la stabilità, gli argomenti di finanza che circondano il tema dell'ambiente.
Verde - un ponte tra il caldo e tonalità fredde, ma si appoggia più al freddo. Questo significa che il verde ha un effetto rilassante colore blu, ma ha anche un po 'di vigore dal giallo.
Di conseguenza, si crea un ambiente molto equilibrato e stabile. Più scure tonalità di verde creano l'impressione di ricchezza e abbondanza, sia online Ameritrade.
blu
Emozioni e associazioni: la pace della mente, la sicurezza, l'apertura (tonalità più chiare), affidabilità (tonalità più scure).
Come nel caso del colore giallo, l'effetto è fortemente dipendente dalla tonalità blu. Tutte le sfumature di blu sono versatili in termini di relax e sicurezza, ma i colori vivaci associati con cordialità, e buio - con tristezza.
I social network come Twitter e Facebook sono usati toni più leggeri e medi di blu, e siti aziendali preferiscono più scure tonalità di resistenza e affidabilità.
Un grande esempio - agenzia di design evento Van Vliet e Trappola. Uso del colore azzurro come sfondo, sono visivamente accennati loro conoscenze e competenze nel disegno floreale, ma ha anche creato un senso di affidabilità e fiducia.
Questo è di grande importanza, che lavorano con gli eventi, che è importante per parte visiva, ad esempio con matrimoni.
porpora
Le emozioni e le associazioni: Lusso, Romanticismo (toni chiari), il misticismo e mistero (colori scuri).
Colore viola è stato storicamente associato alla grandezza reale, accenni al lusso. sfumature viola riflettono la generosità e la ricchezza nel suo insieme, che li rende una scelta eccellente per moda e del lusso (anche il cioccolato, per esempio, CadburyChi ha scelto il suo colore di marca).
tonalità più chiare come la lavanda (rosa viola con l'aggiunta) evocano pensieri di romanticismo, mentre i colori scuri appaiono più elegante e misterioso.
nero
Le emozioni e le associazioni: potenza, raffinatezza, nervosismo.
Il più potente dei colori neutri - nero - appare praticamente su qualsiasi sito web. Può causare diverse associazioni a seconda del colore accompagna o dominarli, se utilizzato eccessivamente.
La forza e la neutralità del nero lo rende una scelta eccellente per i grandi blocchi di testo, ma il colore principale è possibile creare una sensazione di nervosismo o anche essere associati con il male.
Per la maggior parte dei siti, il nero viene utilizzato per creare un senso di eleganza. La combinazione di bianco e nero design minimalista dà l'impressione di eleganza e stile, sia sul sito Sogno e Reach Società BOSE.
bianco
Le emozioni e le associazioni: la purezza, la semplicità, la bontà.
Nella cultura occidentale, bianco è associato con la purezza, la bontà e innocenza. Questo colore è spesso utilizzato per lo sfondo di siti minimalista e semplice.
Inoltre, nessuno dei colori non permetterà di richiamare così tanta attenzione agli altri colori come il bianco. Ad esempio, in sito web vincitore Awwwards Kloina Toshev tutte le sue opere sono disposte su uno sfondo bianco, che assegna solo illustrazioni e crea l'impressione di una galleria elegante.
grigio
Le emozioni e le associazioni: neutralità, formalità, malinconia.
Nonostante il fatto che in alcune situazioni il grigio può creare un'atmosfera cupa e malinconica, è ancora spesso utilizzato da designer professionisti.
La cosa nelle tonalità: alternandoli, è possibile ottenere tutte le emozioni causate da sia in bianco e nero. In generale, il grigio - è un potente strumento nelle mani giuste.
Ma in combinazione con altri colori vivaci a sfondo grigio disegno sembra moderno ma non squallido, come ad esempio Awwwards.
beige
Le emozioni e le associazioni: trasmette il carattere degli altri colori.
Di per sé, beige piuttosto noioso e privo di espressione, ma ha una notevole proprietà: beige assume il carattere di colori che la circondano. Pertanto, se esso è destinato a non esprimere moderazione beige serve come sfondo o il secondo colore.
Più scure tonalità di beige creano un senso di tradizione e mondano, dare un senso della trama di carta e tonalità più chiare sembrare più fresco e più moderno.
Ad esempio, un ristorante in loco Dishoom luce di colore beige intorno i nomi e gli scuri bordi dare l'impressione che questo ristorante - una nuova prospettiva sulla cucina tradizionale.
avorio
Le emozioni e le associazioni: comfort, eleganza, semplicità.
Avorio e crema producono quasi le stesse emozioni come il bianco. Tuttavia più caldo avorio (o meno sterile) che bianco, che crea una maggiore sensazione di comfort, pur mantenendo il minimalismo.
È possibile utilizzare l'avorio al posto del bianco per ammorbidire il contrasto tra essa ed i colori più scuri. Ad esempio, il sito Arte nel mio caffè Elementi marrone-arancio sono posti su fondo avorio (che sembra grigio) che conserva una sensazione di calore.
spettro dei colori
Ogni sito ha una gamma di colori, in cui i colori primari utilizzati per riempire uno spazio più grande. Come abbiamo detto prima, l'uso di questi colori colpisce la mente e l'umore per lo più inconsciamente. In modo da scegliere con attenzione.
Nonostante il fatto che ci sono molti modi di combinare i colori, ci concentreremo sui tre di maggior successo e di uso comune.
Triade (triplo armonia triangolo)
Triad - il sistema principale e più equilibrato dei tre colori. Esso utilizza la risonanza e l'aggiunta di colori, ma v'è un contrasto complessa, a causa di ciò che la triade è la gamma più affidabile.
Su una ruota colore di 12 colori, scegliere una qualsiasi di tre, che si trova in 120 gradi l'uno dall'altro: un colore per lo sfondo principale e due per i contenuti e la barra di navigazione.
doppio sistema complementare
Questo intervallo è più difficile da implementare, ma può essere conveniente soluzione. Ha usato quattro colori: due contrastanti e due supplementari.
Vedere come la pagina sembra molto Florida Flourish, sulla base di un tale regime. Rosso e verde contrasto di colore delle piante e blocchi di testo e sfondo blu e arancione deserto completano efficacemente il quadro.
Analoghi (sistema sequenziale)
Gamma colori simili utilizza principalmente colori complementari. Questo permette più chiaramente sottolineare alcune qualità e causare certe emozioni.
Ad esempio, una combinazione di rosso, arancio e riflessi gialli il vigore e la vitalità. L'utilizzo di tale scala è molto semplice, ma è difficile scegliere quale colore sarà incluso nella combinazione. Il loro effetto sarà esagerato, quindi non può essere sbagliato.
Ad esempio, l'uso del blu, turchese e verde nella progettazione del sito Blinksale Ha creato un clima di pace e tranquillità. Notate come il colore giallo utilizzato per enfatizzare i punti importanti.
Questo è solo le basi della teoria del colore, che possono contribuire a creare un impressionante design personalizzato, e non c'è limite a quanto si può andare in termini di colori sul tuo sito.
Strumenti di supporto per selezionare un colore
Fortunatamente, ci sono diversi strumenti che aiutano a portare la teoria del colore in pratica. Prova queste palette di non dover ripartire da zero nella creazione del suo:
- Adobe Color CC, Precedentemente noto come Adobe Kuler. Questo è uno degli strumenti più affidabili in scelta dei colori.
- Paletton. Se avete bisogno di un semplice strumento per la selezione del colore rapida, Paletton è perfetto.
- Piatto UI Color Picker. Lo strumento perfetto per selezionare i colori dell'interfaccia utente.
E se questi strumenti non sono adatti a te, ecco un altro 28 siti con tavolozze e strumenti diversi per la selezione del colore.
Un rapporto diretto tra colore ed emozioni
Ricordate, gli utenti raramente preavviso e apprezzare il colore dello sfondo, barra di navigazione, singole parti, ma non vuol dire che il colore non sia influenzato da essi. Proprio questo accade inconsciamente.
L'esperienza dell'utente ogni emozione, è il rapporto con il sito o marchio, si fa determinate azioni: scorrere verso il basso per fare clic sui pulsanti che pronta per l'azione, o, al contrario, non notarli. E il colore gioca in tutto questo un ruolo enorme.
Se avete il vostro consiglio su l'uso del colore nel web design, si prega di quota nei commenti.