Kleur webontwerp in: hoe om die regte emosies by die gebruiker op te wek
Kleur webontwerp in: hoe om die regte emosies by die gebruiker op te wek
Anonim

Kleur bepaal die gebruiker se emosionele reaksie op die webwerf, selfs al is die persoon self nie daarvan bewus nie. Watter kleure om vir die agtergrond en verskillende elemente van die webwerf te gebruik om sekere sensasies op te wek, en hoe om kleure korrek in webontwerp te kombineer, lees hieronder.

Kleur webontwerp in: hoe om die regte emosies by die gebruiker op te wek
Kleur webontwerp in: hoe om die regte emosies by die gebruiker op te wek

Deur die menslike geskiedenis is meesterskilders universeel erken vir hul vermoë om met kleur te werk. In die moderne wêreld word spesialiste wat weet hoe om kleure vir kommersiële en besigheidsdoeleindes te kombineer – in advertensies en webontwerp – ewe erken.

Die vermoë om kleure te gebruik kan onbepaald gepomp word. Dit is 'n werklike afgrond van moontlikhede om 'n persoon te beïnvloed.

Ons sal die basiese beginsels van kleurteorie en kleurskema dek, en dan sal ons praat oor die emosionele impak van sekere kleure.

Kleurteorie

'n Hele boek kan gewy word aan die onderwerp van kleur, so ons sal dit nie in sy geheel neem nie, maar ons beperk ons slegs tot nuttige inligting wat gebruik kan word wanneer 'n koppelvlakontwerp ontwikkel word.

Kleurteorie kan in drie dele opgebreek word:

Kontras

Elke skakering het 'n teenoorgestelde, so te sê, sy "nemesis", wat die grootste kontras met hierdie kleur uitmaak. Om so 'n kleur te vind, kan jy die kleurwiel gebruik. Kies net 'n kleur aan die teenoorgestelde kant van die sirkel.

Kleurwiel
Kleurwiel

Byvoeging

Hierdie kleure bots nie altyd met mekaar nie. Komplementêre kleure beklemtoon mekaar, in teenstelling met kontrasterende kleure. In die kleurwiel volg hierdie kleure op mekaar, byvoorbeeld komplementêre kleure van lila - blou en pienk.

Resonansie

Elke kleur roep 'n sekere stemming op. Helder warm kleure (rooi, oranje, geel) vul 'n persoon met energie, maak hom wakker, en koue donker skakerings (groen, blou, pers), inteendeel, ontspan en kalmeer.

Hulle gebruik byvoorbeeld die rooi navigasiebalk om die leser wakker te maak en hul opwinding te verhoog. Met inagneming van die spesifisiteit van die webwerf - sensasionele nuus - lyk rooi na 'n logiese besluit.

BBC Nuus
BBC Nuus

Kleurteorie in webontwerp is meer as net versiering. Kleur kan die persepsie van jou werf verander en 'n kritieke rol in jou besigheid speel.

Emosionele persepsie van kleur

Niemand sal die noue wisselwerking van kleur en emosie ontken nie. En natuurlik wil enige webontwerper hierdie invloed gebruik om die regte atmosfeer vir elke webwerf te skep.

Gebaseer op 'n paar studies - analise geplaas op die webwerf en 'n plasing oor kleure in - sal ons verduidelik hoe kleure emosies beïnvloed en help om UX-ontwerp te skep.

Dit is belangrik om te onthou dat verskillende kulture regoor die wêreld kleure verskillend waarneem. Ons sal emosionele assosiasies beskryf wat uniek is aan die Westerse kultuur.

Rooi

Die mees stimulerende kleur, so energiek gelaai dat dit selfs bloeddruk kan verhoog. Rooi verteenwoordig passie en krag en is die kleur wat die meeste aandag trek, en daarom word dit dikwels vir belangrike waarskuwings en aankondigings gebruik.

Byvoorbeeld, die kleur rooi is baie geskik vir 'n webwerf wie se doel is om te waarsku teen waargenome bedreigings.

Skermskoot_2
Skermskoot_2

Om baie rooi aan die bokant van die bladsy te gebruik, is wonderlik aangesien dit die aandag vestig op belangrike inligting in jou boodskap. Terselfdertyd is mense geneig om vinnig die rooi "gevaarsone" te verlaat en af te blaai. En dit laat jou op sy beurt toe om die gebruiker meer inhoud te wys.

Maar hierdie kleur kan ook teen jou werk, aangesien dit aggressie of oorstimulasie kan veroorsaak. As jy’n meer ontspannende atmosfeer wil skep, probeer rooi in matigheid gebruik en kies ligter skakerings van rooi.

Oranje

As die kalmste van die warm kleure, is oranje in staat om 'n reeks uiteenlopende emosies te ontlok. As 'n primêre kleur kan dit belangstelling wek en verkwik, en as 'n sekondêre kleur kan dit hierdie eienskappe behou, maar op 'n meer onopvallende manier.

Fanta webwerf
Fanta webwerf

Daarbenewens help oranje om 'n gevoel van beweging en energie te skep. Dit lyk byvoorbeeld goed op die maatskappy se spotprentwebwerf, wat suggereer van jeug en beweging. Kleur word geassosieer met kreatiwiteit, terwyl dit 'n bekende handelsmerkgevoel behou.

Geel

Dit is een van die veelsydigste kleure, en die emosies wat dit ontlok, is meer afhanklik van die skakering.

Heldergeel voeg energie by, maar sonder die skerpte en skerpte wat in rooi teenwoordig is. Medium skakerings van geel wek 'n gevoel van gemak terwyl dit steeds verkwikkend is. Donker skakerings (insluitend goud) verskaf 'n gevoel van oudheid, vul die ruimte met tydloosheid, wysheid en nuuskierigheid.

Flash Media
Flash Media

Byvoorbeeld, op die tuisblad van 'n webontwerpagentskap straal donkerder kleure van geel energie, nuuskierigheid en gesag uit. Hierdie kleur is ideaal vir maatskappye wat geld maak uit konsultasie en hul professionaliteit wil beklemtoon.

Groen kleur

Groen is 'n brug tussen warm en koue skakerings, hoewel dit geneig is om meer koud te wees. Dit beteken dat groen die ontspannende effek van blou het, maar ook 'n bietjie energie van geel het.

Ameritrade
Ameritrade

As gevolg hiervan skep dit 'n baie gebalanseerde en stabiele atmosfeer. Donkerder skakerings van groen gee die indruk van rykdom en oorvloed, net soos die webwerf.

Blou kleur

Soos met geel, is die effek van blou baie afhanklik van die skakering. Alle skakerings van blou is universeel in terme van ontspanning en veiligheid, maar ligte skakerings word geassosieer met vriendelikheid, en donker kleure met hartseer.

Sosiale netwerke soos Twitter en Facebook gebruik ligter tot medium skakerings van blou, terwyl korporatiewe webwerwe donkerder skakerings van sterkte en betroubaarheid verkies.

'n Gebeurtenisontwerpagentskap is 'n goeie voorbeeld. Deur blou blomme as agtergrond te gebruik, het hulle visueel geskimp na hul kennis en vaardigheid in blomme, en ook 'n gevoel van betroubaarheid en vertroue geskep.

Van vliet & trap
Van vliet & trap

Dit is van groot belang aangesien hulle met geleenthede werk waar die visuele baie belangrik is, soos troues.

Pers

Die kleur pers word histories geassosieer met koninklike grootsheid, wat dui op luukse. Die skakerings van pers weerspieël vrygewigheid en rykdom in die algemeen, wat dit 'n goeie keuse maak vir mode en luukse goedere (selfs sjokolade soos die handelsmerk se kleurkeuse).

Beeld
Beeld

Ligter skakerings soos laventel (pers met 'n tikkie pienk) roep gedagtes van romanse op, terwyl donkerder skakerings meer sjiek en geheimsinnig lyk.

Swart

Die sterkste van die neutrale kleure, swart, verskyn op byna enige webwerf. Dit kan verskillende assosiasies oproep, afhangende van die kleure wat dit vergesel of dit oorheers as dit oormatig gebruik word.

Die sterkte en neutraliteit van swart maak dit 'n goeie keuse vir groot blokke teks, maar as 'n primêre kleur kan dit 'n gevoel van senuweeagtigheid skep of selfs met boosheid geassosieer word.

Vir die meeste webwerwe word swart gebruik om 'n gevoel van gesofistikeerdheid te skep. Die kombinasie van swart en wit in 'n minimalistiese ontwerp gee die indruk van elegansie en styl, net soos op die BOSE-webwerf.

Droom + Reik
Droom + Reik

Wit

In die Westerse kultuur word wit geassosieer met reinheid, vriendelikheid en onskuld. Hierdie kleur word dikwels gebruik vir die agtergrond van minimalistiese en eenvoudige webwerwe.

Webwerf met die werke van Kloin Toshev
Webwerf met die werke van Kloin Toshev

Daarbenewens sal geen enkele kleur jou toelaat om soveel aandag aan ander kleure as wit te gee nie. Byvoorbeeld, vir die wenner van Awwwards, Kloin Toshev, is al sy werke op 'n wit agtergrond uitgelê, wat net die illustrasies laat uitstaan en die indruk van 'n elegante galery gee.

Grys kleur

Ten spyte van die feit dat grys in sommige situasies 'n somber en hartseer atmosfeer kan skep, word dit steeds dikwels deur professionele ontwerpers gebruik.

Dit gaan alles oor die skakerings: deur hulle af te wissel, kan jy al die emosies kry wat deur beide swart en wit veroorsaak word. Al met al is grys 'n kragtige hulpmiddel in die regte hande.

Awwwards
Awwwards

En in kombinasie met helderder kleure in die ontwerp, lyk die grys agtergrond modern, en nie somber nie, byvoorbeeld op.

Roomkleurige

Beige self is taamlik dof en onuitdruklik, maar dit het een merkwaardige eienskap: beige neem die karakter aan van die blomme wat dit omring. Daarom, as dit nie bedoel is om selfbeheersing uit te druk nie, dien beige as 'n agtergrond of tweede kleur.

Donkerder skakerings van beige skep 'n gevoel van tradisie en aardsheid, gee 'n papieragtige gevoel, terwyl ligter skakerings varser en meer modern voorkom.

Dishoom
Dishoom

Byvoorbeeld, op 'n restaurantwebwerf, gee 'n ligte beige kleur rondom die naam en donkerder rande die indruk dat die restaurant 'n vars benadering van tradisionele kookkuns is.

Ivoor

Ivoor sowel as room wek amper dieselfde emosies as wit. Ivoor is egter warmer (of minder steriel) as wit, wat 'n groter gevoel van gemak skep terwyl minimalisme gehandhaaf word.

Jy kan ivoor in plaas van wit gebruik om die kontras tussen dit en donkerder kleure te versag. Byvoorbeeld, op die terrein word bruin-oranje elemente teen 'n ivoor agtergrond (wat grys lyk) geplaas om 'n gevoel van warmte te behou.

Kuns in my koffie
Kuns in my koffie

Kleurspektrum

Elke webwerf het 'n kleurskema wat primêre kleure gebruik om meer spasie in te vul. Soos ons vroeër gesê het, beïnvloed die gebruik van hierdie kleure die verstand en bui van 'n persoon hoofsaaklik onbewustelik. Kies hulle dus versigtig.

Alhoewel daar baie maniere is om kleure te kombineer, sal ons fokus op drie van die mees suksesvolle en algemeen gebruikte.

Triade (drievoudige harmonie, driehoek)

Drieklank
Drieklank

Die drieklank is die basiese en mees gebalanseerde stelsel van drie kleure. Dit gebruik resonansie en kleurkomplement, maar het nie komplekse kontras nie, wat die drieklank die mees betroubare spektrum maak.

Op 'n 12-kleurwiel, kies enige drie 120 grade uitmekaar: een vir die voorgrond en twee vir die inhoud en navigasiebalk.

Dubbele komplementêre stelsel

Dubbele komplementêre stelsel
Dubbele komplementêre stelsel

Hierdie reeks is moeiliker om te implementeer, maar dit kan 'n winsgewende oplossing wees. Vier kleure word gebruik: twee kontrasterende en twee komplementêre.

Kyk hoe lyk 'n wonderlike Florida Flourish-bladsy gebaseer op hierdie uitleg. Die rooi en groen kleure kontrasteer in die plante en teksblokke, terwyl die blou agtergrond en oranje woestyn die prentjie effektief komplementeer.

Blom
Blom

Analoë (seriestelsel)

Analoë
Analoë

Die reeks soortgelyke kleure gebruik hoofsaaklik komplementêre skakerings. Dit laat jou toe om sekere eienskappe veral duidelik te beklemtoon en sekere emosies op te wek.

Byvoorbeeld, die kombinasie van rooi, oranje en geel kleure beklemtoon energie en vitaliteit. Dit is baie eenvoudig om sulke skale te gebruik, maar dit is moeilik om te kies watter kleure by die kombinasie ingesluit sal word. Die effek van hulle sal oordrewe wees, so jy kan nie verkeerd wees nie.

Die gebruik van blou, turkoois en groen kleure in die webwerfontwerp het byvoorbeeld 'n atmosfeer van kalmte en kalmte geskep. Let op hoe geel gebruik is om belangrike punte uit te lig.

Blinksale
Blinksale

Dit is net die basiese beginsels van kleurteorie wat jou kan help om indrukwekkende pasgemaakte ontwerpe te skep, en daar is geen beperking op hoe ver jy kan gaan in terme van kleur op jou webwerf nie.

Kleurkieser-assistentnutsgoed

Gelukkig is daar verskeie hulpmiddels beskikbaar om jou te help om kleurteorie in die praktyk te bring. Probeer hierdie palette sodat jy nie van voor af hoef te begin om jou eie te skep nie:

  1. voorheen bekend as Adobe Kuler. Dit is een van die mees betroubare kleurkiesinstrumente.
  2. … As jy 'n eenvoudige hulpmiddel wil hê om 'n kleur so vinnig as moontlik te kies, is Paletton wonderlik.
  3. … 'N Goeie hulpmiddel om die kleur van die gebruikerskoppelvlak te kies.

En as hierdie gereedskap nie vir jou werk nie, hier is die verskillende kleurkiesergereedskap.

Direkte verband tussen kleur en emosie

Onthou: gebruikers let selde op en waardeer die kleur van die agtergrond, navigasiebalk, individuele besonderhede, maar dit beteken nie dat die kleur hulle nie beïnvloed nie. Dit gebeur net onbewustelik.

Die gebruiker het 'n paar emosies, ontwikkel 'n houding teenoor die webwerf of handelsmerk, hy voer sekere aksies uit: blaai af, klik op knoppies wat aksie veroorsaak, of, omgekeerd, sien dit nie raak nie. En kleur speel 'n groot rol in dit alles.

As jy enige wenke het vir die gebruik van kleur in webontwerp, deel asseblief in die kommentaar.

Aanbeveel: