Kleur in web design: hoe de gebruiker gewenste emotie veroorzaken
Tips / / December 19, 2019
Doorheen de menselijke geschiedenis, kreeg de meester-kunstenaars universele erkenning als gevolg van de mogelijkheid om te werken met kleur. In de wereld van vandaag niet krijgen minder specialisten erkenning, die in staat zijn om kleuren te combineren in het commerciële en zakelijke doeleinden - in de reclame en web design.
De mogelijkheid om gebruik te maken kleuren kunnen worden opgepompt tot in het oneindige. Het is een echte diepte van mogelijkheden voor blootstelling van de mens.
Wij zullen u vertellen over de basisprincipes van kleur theorie en kleurenschema, en dan praten over de emotionele impact van bepaalde kleuren.
kleur theorie
kleurenthema, kunt u een heel boek te wijden, dus we zullen het niet geheel te nemen en beperken we ons tot nuttige informatie, die kan worden gebruikt bij de ontwikkeling van de interface design.
Het kan in kleur theorie bestaat uit drie delen:
contrast
Elke schaduw is het tegenovergestelde, om zo te zeggen, van haar "gezworen vijand", wat is het grootste contrast met deze kleur. Om een kleur te vinden, kunt u de kleur wiel te gebruiken. Selecteer gewoon de kleur aan de andere kant van de cirkel.
toevoeging
Deze kleuren niet altijd in strijd met elkaar. Complementaire kleuren benadrukken elkaar, in tegenstelling tot het contrast. In het kleurenwiel, zoals kleuren zijn aan elkaar, zoals de complementaire kleuren van paars - blauw en roze.
resonantie
Elke kleur is een bepaalde stemming. Heldere, warme kleuren (rood, oranje, geel), gevuld met menselijke energie, wakker het, koude donkere kleuren (groen, blauw, paars), integendeel, te ontspannen en kalmeren.
Bijvoorbeeld, BBC News Gebruik de rode navigatiebalk, om de lezer te wekken, om zijn aangeslagen toestand te versterken. Gezien het specifieke karakter van de site - een sensationele nieuws - rood is een logische oplossing.
theorie van kleur in web design - is meer dan alleen decoratie. Kleur kan de perceptie van uw site te wijzigen, en spelen een cruciale rol in uw bedrijf.
Emotionele beleving van kleur
Niemand zal de nauwe interactie van kleur en emotie te ontkennen. En, natuurlijk, een web designer wil dit effect gebruiken om een bepaalde sfeer te creëren voor elke site.
Op basis van een aantal studies - analyse, gepubliceerd op de website Vandelay OntwerpEn post over de kleuren in de Smash Magazine - we uitleggen hoe kleuren invloed op emoties en het helpen creëren UX-design.
Het is belangrijk te onthouden dat verschillende culturen over de hele wereld hebben verschillende percepties van kleur. We zullen de emotionele associaties die uniek zijn voor de westerse cultuur zijn te beschrijven.
rood
Emoties en verenigingen: de kracht, het belang, de jeugd.
De meest stimulerende kleur, zodat energetisch geladen, het kan zelfs de bloeddruk verhogen. Rood staat voor passie en kracht, het meer dan andere kleuren trekken de aandacht, zo vaak gebruikt voor belangrijke waarschuwingen en aankondigingen.
Bijvoorbeeld, rood is zeer geschikte plaats No Way NSAWaarvan het doel - de vermeende bedreigingen te voorkomen.
Gebruik veel rood in de top van de pagina - dit is een geweldige oplossing, want het vraagt aandacht voor belangrijke informatie in het bericht. Tegelijkertijd hebben mensen de neiging om snel de "gevarenzone" van rode kleur te verlaten en scroll naar beneden. Dit op zijn beurt, kan de gebruiker meer inhoud weer te geven.
Maar deze kleur kan tegen je werken, omdat deze agressie of overstimulatie kan veroorzaken. Wilt u een meer ontspannen sfeer te creëren, proberen tot matig rood gebruiken en kies lichtere tinten van rood.
oranje
Emoties en verenigingen: vriendelijkheid, energie en uniciteit.
Als de stilste van warme tinten, kan oranje het hele spectrum van uiteenlopende emoties veroorzaken. Zoals de basiskleur, kan het van belang en de brace, en als secundaire - het behoud van deze eigenschappen, maar in een niet-indringende wijze.
Daarnaast Oranje helpt bij het creëren van een gevoel van beweging en energie. Bijvoorbeeld, het ziet er geweldig uit op de cartoon website FantaDat is suggestief van de jeugd en beweging. De kleur wordt geassocieerd met creativiteit, met behoud van een gevoel van het vertrouwde merk.
geel
Emoties en verenigingen: geluk, enthousiasme, archaism (donkere kleuren).
Dit is één van de meest veelzijdige kleuren en de emoties die het veroorzaakt, zijn afhankelijk van de schaduw in grotere mate.
Heldere gele kleur geeft energie, maar zonder de ernst en hardheid, die aanwezig is in het rood is. Medium tinten van geel kleuren roepen een gevoel van comfort, maar nog steeds krachtig. Donkere tinten (inclusief goud) zorgen voor een gevoel van de oudheid, de ruimte vullen tijdloosheid, wijsheid en nieuwsgierigheid.
Bijvoorbeeld, op de hoofdpagina van het webdesign bureau Flash Media donkerder gele tint uitstralen energie, nieuwsgierigheid en gezag. Deze kleur is ideaal voor bedrijven die hun overleg te verdienen en ze willen hun professionaliteit te benadrukken.
groen
Emoties en verenigingen: groei, stabiliteit, financiën onderwerpen rondom het thema van het milieu.
Green - een brug tussen de warme en koele tinten, maar leunt meer aan de kou. Dit betekent dat groene heeft een ontspannende effect blauwe kleur, maar heeft ook een beetje kracht uit geel.
Als gevolg hiervan ontstaat er een zeer evenwichtige en stabiele atmosfeer. Donkere tinten van groen wekken de indruk van rijkdom en overvloed, zowel online Ameritrade.
blauw
Emoties en verenigingen: gemoedsrust, veiligheid, openheid (lichtere tinten), betrouwbaarheid (donkere tinten).
Zoals in het geval van de gele kleur, het effect is sterk afhankelijk van de blauwe tint. Alle tinten blauw zijn veelzijdig in termen van ontspanning en veiligheid, maar de felle kleuren geassocieerd met vriendelijkheid, en donker - met verdriet.
Sociale netwerken zoals Twitter en Facebook worden gebruikt meer lichte en middelzware kleuren blauw en corporate sites de voorkeur aan donkere tinten van kracht en betrouwbaarheid.
Een goed voorbeeld - event design agency Van Vliet & Trap. Met behulp van blauwe kleur als de achtergrond, zijn ze visueel gezinspeeld op hun kennis en vaardigheden in bloemdessin, maar ook een gevoel van betrouwbaarheid en vertrouwen.
Dit is van groot belang, aangezien ze met de gebeurtenissen, die belangrijk is voor visuele gedeelte, bijvoorbeeld met bruiloften.
purper
Emoties en verenigingen: luxe, romantiek (lichte tinten), mystiek en mysterie (donkere kleuren).
Paarse kleur is in het verleden in verband gebracht met de koninklijke grandeur, zinspeelt op luxe. Paarse tinten weerspiegelen de vrijgevigheid en rijkdom als een geheel, waardoor ze een uitstekende keuze voor mode en luxe goederen (zelfs chocolade maakt, bijvoorbeeld, CadburyWie koos voor zijn merk kleur).
Lichtere tinten zoals lavendel (paars roze met toevoeging) roepen gedachten over romantiek, terwijl de donkere tinten lijken meer elegant en mysterieus.
zwart
Emoties en verenigingen: macht, verfijning, nervositeit.
De meest krachtige van de neutrale kleuren - zwart - verschijnt op vrijwel elke website. Het kan leiden tot verschillende verenigingen afhankelijk van de bijbehorende kleur of hen te overheersen, bij overmatig gebruik.
De kracht en de neutraliteit van zwart maakt het een uitstekende keuze voor grote blokken tekst, maar de belangrijkste kleur kan een gevoel van nervositeit te maken of zelfs in verband worden gebracht met het kwaad.
Voor de meeste sites, wordt zwart gebruikt om een gevoel van elegantie te creëren. De combinatie van zwart en wit minimalistisch design geeft de indruk van elegantie en stijl, zowel op het terrein Dream en Reach Company BOSE.
wit
Emoties en verenigingen: zuiverheid, eenvoud, goedheid.
In de westerse cultuur wordt wit geassocieerd met zuiverheid, goedheid en onschuld. Deze kleur wordt vaak gebruikt voor de achtergrond van minimalistische en eenvoudige sites.
Daarnaast zal geen van de kleuren niet toe om zoveel aandacht te vestigen op de andere kleuren zoals wit. Bijvoorbeeld, in website Awwwards Kloina winnaar Toshev al zijn werken zijn vastgelegd op een witte achtergrond, die alleen toewijst illustraties, en wekt de indruk van een elegante galerie.
grijs
Emoties en verenigingen: neutraliteit, formaliteit, melancholie.
Ondanks het feit dat in sommige situaties de grijze kan een sombere en melancholische sfeer te creëren, is het nog steeds vaak gebruikt door professionele ontwerpers.
Het ding in de kleuren: ze afwisselend, kunt u alle emoties veroorzaakt door zowel in zwart-wit te krijgen. In het algemeen is het grijs - is een krachtig instrument in de juiste handen.
Maar in combinatie met meer levendige kleuren in grijze achtergrond ontwerp lijkt modern, maar niet somber, zoals Awwwards.
beige
Emoties en verenigingen: hij brengt het karakter van de andere kleuren.
Op zichzelf, beige nogal saai en uitdrukkingsloos, maar hij heeft een opmerkelijke eigenschap: beige neemt het karakter van de kleuren die het omringen. Daarom, als het niet de bedoeling om terughoudendheid beige drukken dient als een achtergrond of de tweede kleur.
Donkere tinten van beige creëren een gevoel van traditie en alledaagse, geven een gevoel van de textuur van papier en lichtere tinten lijken frisser en moderner.
Bijvoorbeeld, on-site restaurant Dishoom licht beige kleur rond de namen en donkere hoeken geven de indruk dat dit restaurant - een frisse kijk op de traditionele keuken.
ivoor
Emoties en verenigingen: comfort, elegantie, eenvoud.
Ivoor en room produceren bijna dezelfde emoties als de witte. Echter ivoor warmer (of minder steriel) dan wit, die een grotere gevoel van comfort ontstaat, met behoud van minimalisme.
U kunt ivoor in plaats van wit gebruiken om het contrast tussen haar en de donkere kleuren te verzachten. Bijvoorbeeld, de site Kunst in Mijn Koffie bruin-oranje elementen worden geplaatst op een ivoren achtergrond (die grijsachtige uitziet), die een gevoel van warmte vasthoudt.
kleurenspectrum
Elke site heeft een waaier van kleuren, waarbij de primaire kleuren gebruikt om een grotere ruimte te vullen. Zoals al eerder gezegd, het gebruik van deze kleuren van invloed op de geest en de sfeer meestal onbewust. Dus kiezen ze zorgvuldig.
Ondanks het feit dat er vele manieren om de kleuren te combineren, zullen we ons richten op de drie meest succesvolle en meest gebruikte.
Triad (triple harmonie driehoek)
Drietal - de belangrijkste en meest evenwichtig systeem van de drie kleuren. Het maakt gebruik van resonantie en de toevoeging van kleuren, maar er is een complex contrast, als gevolg van wat de triade is de meest betrouwbare bereik.
Op een kleurenwiel van 12 kleuren, kiezen voor een drie, gevestigd in 120 graden van elkaar: één kleur voor de belangrijkste achtergrond en twee voor de inhoud en navigatiebalk.
Double aanvullende stelsel
Dit bereik is moeilijker te implementeren, maar kan kosteneffectieve oplossing. Vroeger was het vier kleuren: twee contrasterende en twee extra.
Zie hoe de pagina ziet er opvallend Florida bloei, op basis van een dergelijke regeling. Rode en groene kleurcontrast in planten en tekstblokken, en blauwe achtergrond en oranje woestijn effectief maken het plaatje compleet.
Analogen (sequentieel systeem)
Gamma gelijkaardige kleuren maakt voornamelijk gebruik van complementaire kleuren. Dit maakt het mogelijk het duidelijkst te benadrukken aantal kwaliteiten en zorgen ervoor dat bepaalde emoties.
Bijvoorbeeld, een combinatie van rood, oranje en geel hoogtepunten van de kracht en vitaliteit. Het gebruik van dergelijke omvang is heel eenvoudig, maar het is moeilijk om te kiezen welke kleur wordt opgenomen in de combinatie. Hun effect zal overdreven zijn, zodat het niet verkeerd kan zijn.
Bijvoorbeeld, het gebruik van blauw, turkoois en groene kleuren in het ontwerp van de site Blinksale Het creëerde een sfeer van vrede en rust. Merk op hoe de gele kleur die wordt gebruikt om te benadrukken belangrijke punten.
Dit is slechts de basis van kleur theorie, die kunnen helpen om een indrukwekkend ontwerp op maat te maken, en er is geen limiet aan hoe ver je kunt gaan in termen van de kleuren op uw site.
Gereedschap helper om een kleur te kiezen
Gelukkig zijn er verschillende tools die helpen brengen kleur theorie in de praktijk. Probeer deze paletten om niet te beginnen vanaf nul in de creatie van zijn:
- Adobe Color CC, Voorheen bekend als Adobe Kuler. Dit is een van de meest betrouwbare instrumenten in het kiezen van kleuren.
- Paletton. Als u eenvoudige tools waarmee snel kleurkeuze nodig, Paletton is perfect.
- Flat UI Color Picker. Het perfecte hulpmiddel om de gebruikersinterface kleuren te selecteren.
En als deze instrumenten niet geschikt voor u, hier is een andere 28 sites met paletten en verschillende gereedschappen voor kleur selectie.
Een directe relatie tussen kleur en emoties
Vergeet niet, gebruikers zelden kennisgeving en waarderen de kleur van de achtergrond, navigatiebalk, afzonderlijke onderdelen, maar het betekent niet dat de kleur niet wordt beïnvloed door hen. Net gebeurt dit onbewust.
User Experience enige emotie, is de relatie met de site of merk, het maakt bepaalde acties: scroll naar beneden om te klikken op knoppen die handeling moet worden uitgevoerd, of, omgekeerd, niet Ze vallen. En kleur speelt bij dit alles een grote rol.
Als u uw advies over het gebruik van kleur in web design, dan kunt u delen in de commentaren.