Värv veebidisainis: kuidas kasutajas õigeid emotsioone esile kutsuda

2024 Autor: Malcolm Clapton | [email protected]. Viimati modifitseeritud: 2023-12-17 03:53

Värv määrab kasutaja emotsionaalse reaktsiooni saidile, isegi kui inimene ise sellest teadlik ei ole. Milliseid värve kasutada saidi tausta ja erinevate elementide jaoks, et tekitada teatud sensatsioone ning kuidas veebidisainis värve õigesti kombineerida, lugege allpool.

Läbi inimkonna ajaloo on maalikunstnikke üldiselt tunnustatud nende oskuse eest värvidega töötada. Kaasaegses maailmas tunnustatakse võrdselt spetsialiste, kes teavad, kuidas kombineerida värve ärilistel ja ärilistel eesmärkidel - reklaamis ja veebidisainis.

Värvide kasutamise oskust saab pumbata lõputult. See on inimese mõjutamise võimaluste tõeline kuristik.

Käsitleme värviteooria ja värvilahenduse põhitõdesid ning seejärel räägime teatud värvide emotsionaalsest mõjust.

Värvusteooria

Värviteemale saab pühendada terve raamatu, nii et me ei võta seda tervikuna, vaid piirdume ainult kasuliku teabega, mida saab kasutada liidese kujunduse väljatöötamisel.

Värvusteooria võib jagada kolmeks osaks:

Kontrast

Igal toonil on nii-öelda vastand, oma "neesis", mis on selle värviga kõige suurem kontrast. Sellise värvi leidmiseks võite kasutada värviratast. Valige lihtsalt värv ringi vastasküljelt.

Lisand

Need värvid ei ole alati üksteisega vastuolus. Täiendavad värvid rõhutavad üksteist, erinevalt kontrastsetest. Värviringis järgnevad need värvid üksteisele, näiteks sireli täiendavad värvid - sinine ja roosa.

Resonants

Iga värv tekitab teatud meeleolu. Erksad soojad värvid (punane, oranž, kollane) täidavad inimese energiaga, äratavad ta ja külmad tumedad toonid (roheline, sinine, lilla), vastupidi, lõdvestavad ja rahustavad.

Näiteks kasutavad nad punast navigeerimisriba lugeja äratamiseks ja erutuse suurendamiseks. Arvestades saidi eripära – sensatsioonilised uudised – tundub punane loogiline otsus.

Värviteooria veebidisainis on midagi enamat kui lihtsalt kaunistus. Värv võib muuta teie saidi ettekujutust ja mängida teie ettevõttes olulist rolli.

Emotsionaalne värvi tajumine

Keegi ei eita värvide ja emotsioonide tihedat koosmõju. Ja loomulikult soovib iga veebidisainer seda mõju kasutada, et luua iga saidi jaoks õige õhkkond.

Tuginedes mõnele uuringule – veebisaidile postitatud analüüsile ja postitusele värvide kohta – selgitame, kuidas värvid mõjutavad emotsioone ja aitavad luua UX-i disaini.

Oluline on meeles pidada, et erinevad kultuurid üle maailma tajuvad värve erinevalt. Kirjeldame emotsionaalseid assotsiatsioone, mis on ainulaadsed lääne kultuurile.

Punane

Kõige ergutavam värv, nii energeetiliselt laetud, et võib isegi vererõhku tõsta. Punane esindab kirge ja jõudu ning on kõige rohkem tähelepanu köitv värv, mistõttu kasutatakse seda sageli oluliste hoiatuste ja teadaannete jaoks.

Näiteks punane värv sobib väga hästi saidile, mille eesmärk on hoiatada tajutavate ohtude eest.

Kui kasutate lehe ülaosas palju punast, on see suurepärane, kuna see juhib tähelepanu teie sõnumis olevale olulisele teabele. Samas kiputakse punasest "ohutsoonist" kiiresti lahkuma ja alla kerima. Ja see omakorda võimaldab näidata kasutajale rohkem sisu.

Kuid see värv võib ka teie vastu töötada, kuna see võib põhjustada agressiooni või ülestimulatsiooni. Kui soovite luua lõõgastavamat õhkkonda, proovige punast kasutada mõõdukalt ja valige punase heledamad toonid.

Oranž

Soojadest toonidest kõige rahulikumana on oranž võimeline esile kutsuma erinevaid emotsioone. Põhivärvina võib see tekitada huvi ja turgutada ning sekundaarse värvina suudab need omadused säilitada, kuid märkamatult.

Lisaks aitab oranž luua liikumistunnet ja energiat. Näiteks näeb see suurepäraselt välja ettevõtte multifilmide veebisaidil, mis vihjab noorusele ja liikumisele. Värvi seostatakse loovusega, säilitades samas tuttava bränditunnetuse.

Kollane

See on üks mitmekülgsemaid värve ja selle tekitatavad emotsioonid sõltuvad rohkem varjust.

Erekollane lisab energiat, kuid ilma teravuse ja teravuseta, mis on punases. Kollased keskmised toonid tekitavad mugavustunde, kuid samas kosutavad. Tumedad toonid (sh kuldne) annavad antiikaja tunde, täites ruumi ajatuse, tarkuse ja uudishimuga.

Näiteks veebidisaini agentuuri kodulehel õhkub kollasetest tumedamatest toonidest energiat, uudishimu ja autoriteeti. See värv sobib suurepäraselt ettevõtetele, kes teenivad konsultatsioonist raha ja soovivad rõhutada oma professionaalsust.

Roheline värv

Roheline on sild soojade ja külmade toonide vahel, kuigi kipub olema pigem külm. See tähendab, et rohelisel on sinise lõõgastava toimega, kuid samas on ka kollasest veidi energiat.

Selle tulemusena loob see väga tasakaalustatud ja stabiilse atmosfääri. Rohelise tumedamad toonid jätavad mulje rikkusest ja küllusest, nagu ka veebilehel.

Sinine värv

Nagu kollase puhul, sõltub sinise mõju suuresti toonist. Kõik sinised toonid on lõõgastumise ja turvalisuse mõttes universaalsed, kuid heledad toonid seostuvad sõbralikkusega, tumedad aga kurbusega.

Sotsiaalvõrgustikud, nagu Twitter ja Facebook, kasutavad sinise heledamaid kuni keskmisi toone, samas kui ettevõtete saidid eelistavad tugevuse ja töökindluse tumedamaid toone.

Ürituste kujundamise agentuur on suurepärane näide. Taustaks siniseid lilli kasutades andsid nad visuaalselt mõista oma teadmisi ja oskusi lillekasvatuses ning tekitasid ka usaldusväärsuse ja usalduse tunde.

See on väga oluline, kuna nad töötavad sündmustega, kus visuaal on väga oluline, näiteks pulmad.

Lilla

Lillat värvi on ajalooliselt seostatud kuningliku suursugususega, vihjates luksusele. Lilla toonid peegeldavad suuremeelsust ja rikkust üldiselt, muutes need suurepäraseks valikuks moe- ja luksuskaupade jaoks (isegi šokolaadi jaoks nagu brändi värvivalik).

Heledamad toonid, nagu lavendel (lilla roosa varjundiga), tekitavad mõtteid romantikast, samas kui tumedamad toonid tunduvad šikimad ja salapärasemad.

Must

Neutraalsetest värvidest tugevaim must, ilmub peaaegu igal veebisaidil. See võib esile kutsuda erinevaid assotsiatsioone olenevalt sellega kaasnevatest värvidest või domineerida nende üle, kui seda kasutatakse liigselt.

Musta värvi tugevus ja neutraalsus muudab selle suurepäraseks valikuks suurte tekstiplokkide jaoks, kuid põhivärvina võib see tekitada närvilisust või olla isegi seotud kurjusega.

Enamiku saitide puhul kasutatakse musta värvi rafineerituse tunde loomiseks. Musta ja valge kombinatsioon minimalistlikus disainis jätab mulje elegantsusest ja stiilist, nagu BOSE veebilehel.

Valge

Lääne kultuuris seostatakse valget puhtuse, lahkuse ja süütusega. Seda värvi kasutatakse sageli minimalistlike ja lihtsate veebisaitide taustal.

Lisaks ei võimalda ükski värv teistele värvidele nii palju tähelepanu pöörata kui valge. Näiteks Awwwardsi võitja Kloin Toshevi jaoks on kõik tema tööd laotud valgele taustale, mis muudab illustratsioonid ainult silmapaistvaks ja jätab mulje elegantsest galeriist.

Hall värv

Hoolimata asjaolust, et mõnes olukorras võib hall luua sünge ja kurva atmosfääri, kasutavad seda siiski sageli professionaalsed disainerid.

Asi on varjundites: neid vaheldumisi tehes saad kätte kõik emotsioonid, mida nii must kui valge tekitab. Kokkuvõttes on hall võimas tööriist õigetes kätes.

Ja kombinatsioonis erksamate värvidega disainis tundub hall taust moodne, mitte näiteks sünge.

Beež

Beež ise on üsna tuhm ja ilmetu, kuid sellel on üks tähelepanuväärne omadus: beež omandab seda ümbritsevate lillede iseloomu. Seetõttu, kui see ei ole mõeldud vaoshoituseks, on beež taustaks või teiseks värviks.

Beeži tumedamad toonid loovad traditsiooni ja maalähedase tunde, annavad paberise tunde, heledamad aga mõjuvad värskemad ja moodsamad.

Näiteks restorani veebisaidil jätavad helebeeži värvi nime ümber ja tumedamad servad mulje, et restoran on traditsioonilise köögi värske lähenemine.

Elevandiluu

Elevandiluu ja ka kreem tekitavad peaaegu samasuguseid emotsioone kui valge. Elevandiluu on aga soojem (või vähem steriilne) kui valge, mis loob suurema mugavustunde, säilitades samas minimalismi.

Selle ja tumedamate värvide kontrasti pehmendamiseks võite kasutada valge asemel elevandiluud. Näiteks on saidil pruunikasoranžid elemendid asetatud elevandiluu taustale (mis näeb välja hallikas), et säilitada soojustunne.

Värvispekter

Igal saidil on värviskeem, mis kasutab suurema ruumi täitmiseks põhivärve. Nagu me varem ütlesime, mõjutab nende värvide kasutamine inimese meelt ja meeleolu peamiselt alateadlikult. Nii et vali need hoolikalt.

Kuigi värvide kombineerimiseks on palju võimalusi, keskendume kolmele kõige edukamale ja sagedamini kasutatavale.

Triaad (kolmekordne harmoonia, kolmnurk)

Triaad on põhiline ja kõige tasakaalustatum kolme värvi süsteem. See kasutab resonantsi ja värvikomplementi, kuid sellel pole keerukat kontrasti, mis muudab triaadi kõige usaldusväärsemaks vahemikku.

Valige 12-värvilisel rattal kolm 120-kraadist vahekaugust: üks esiplaani jaoks ning kaks sisu- ja navigeerimisriba jaoks.

Kahekordne komplementaarne süsteem

Seda valikut on keerulisem rakendada, kuid see võib olla tulus lahendus. Kasutatakse nelja värvi: kaks kontrastset ja kaks üksteist täiendavat.

Vaadake selle paigutuse põhjal, milline näeb välja suurepärane Florida Flourishi leht. Taimedes ja tekstiplokkides on kontrastsed punased ja rohelised värvid, samas kui sinine taust ja oranž kõrb täiendavad pilti tõhusalt.

Analoogid (jadasüsteem)

Sarnaste värvide valikus kasutatakse peamiselt täiendavaid toone. See võimaldab eriti selgelt rõhutada mõnda omadust ja tekitada teatud emotsioone.

Näiteks punase, oranži ja kollase värvi kombinatsioon rõhutab energiat ja elujõudu. Selliseid skaalasid on väga lihtne kasutada, kuid raske on valida, millised värvid kombinatsioonis kaasatakse. Nende mõju on liialdatud, nii et te ei saa eksida.

Näiteks sinise, türkiissinise ja rohelise värvi kasutamine veebisaidi kujunduses lõi rahuliku ja rahuliku atmosfääri. Pange tähele, kuidas kollast kasutati oluliste punktide esiletõstmiseks.

Need on vaid värviteooria põhitõed, mis aitavad teil luua muljetavaldavaid kohandatud kujundusi ja pole piiranguid, kui kaugele saate oma saidil värvide osas minna.

Värvivalija abitööriistad

Õnneks on saadaval mitmeid tööriistu, mis aitavad teil värviteooriat praktikas rakendada. Proovige neid palette, et te ei peaks oma loomiseks nullist alustama:

1. varem tuntud kui Adobe Kuler. See on üks kõige usaldusväärsemaid värvi valimise tööriistu.
2. … Kui soovite lihtsat tööriista värvi võimalikult kiireks valimiseks, on Paletton suurepärane.
3. … Suurepärane tööriist kasutajaliidese värvi valimiseks.

Ja kui need tööriistad teie jaoks ei tööta, on siin erinevad värvivalija tööriistad.

Otsene seos värvi ja emotsiooni vahel

Pidage meeles: kasutajad märkavad ja hindavad harva tausta värvi, navigeerimisriba, üksikuid detaile, kuid see ei tähenda, et värv neid ei mõjutaks. See juhtub lihtsalt alateadlikult.

Kasutajal on teatud emotsioonid, ta suhtub saidi või brändi, ta teeb teatud toiminguid: kerib alla, klõpsab tegevust esilekutsuvatel nuppudel või, vastupidi, ei märka neid. Ja värv mängib selles kõiges tohutut rolli.

Kui teil on näpunäiteid värvide kasutamiseks veebidisainis, jagage neid kommentaarides.