Boja u web dizajnu: kako izazvati prave emocije kod korisnika

2024 Autor: Malcolm Clapton | [email protected]. Zadnja izmjena: 2023-12-17 03:49

Boja određuje emocionalnu reakciju korisnika na stranicu, čak i ako sama osoba toga nije svjesna. Koje boje koristiti za pozadinu i različite elemente stranice da izazovu određene senzacije, te kako pravilno kombinirati boje u web dizajnu, pročitajte u nastavku.

Kroz ljudsku istoriju, majstori slikari su bili univerzalno priznati po svojoj sposobnosti da rade sa bojom. U modernom svijetu podjednako su priznati stručnjaci koji znaju kombinirati boje u komercijalne i poslovne svrhe – u reklamiranju i web dizajnu.

Mogućnost korištenja boja može se pumpati neograničeno. Ovo je pravi ponor mogućnosti za uticaj na osobu.

Pokriti ćemo osnove teorije boja i sheme boja, a zatim ćemo razgovarati o emocionalnom utjecaju određenih boja.

Teorija boja

Temi boja može se posvetiti cijela knjiga, tako da je nećemo uzimati u cijelosti, već se ograničimo samo na korisne informacije koje se mogu koristiti pri razvoju dizajna sučelja.

Teorija boja može se podijeliti na tri dijela:

Kontrast

Svaka nijansa ima suprotnu, da tako kažemo, svoju "nemezisu", koja čini najveći kontrast ovoj boji. Da biste pronašli takvu boju, možete koristiti krug boja. Samo odaberite boju na suprotnoj strani kruga.

Dodatak

Ove boje nisu uvijek u sukobu jedna s drugom. Komplementarne boje naglašavaju jedna drugu, za razliku od kontrastnih. U krugu boja ove boje slijede jedna drugu, na primjer, komplementarne boje lila - plava i ružičasta.

Rezonancija

Svaka boja izaziva određeno raspoloženje. Svijetle tople boje (crvena, narandžasta, žuta) pune čovjeka energijom, bude ga, a hladne tamne nijanse (zelena, plava, ljubičasta), naprotiv, opuštaju i smiruju.

Na primjer, koriste crvenu navigacijsku traku da razbude čitaoca i pojačaju njegovo uzbuđenje. S obzirom na specifičnost stranice - senzacionalne vijesti - crvena izgleda kao logična odluka.

Teorija boja u web dizajnu je više od dekoracije. Boja može promijeniti percepciju vaše stranice i igrati ključnu ulogu u vašem poslovanju.

Emocionalna percepcija boja

Niko neće poreći blisku interakciju boja i emocija. I, naravno, svaki web dizajner želi iskoristiti ovaj utjecaj kako bi stvorio pravu vibraciju za svaku stranicu.

Na osnovu nekoliko studija – analize objavljene na web stranici i objave o bojama – objasnit ćemo kako boje utječu na emocije i pomoći u kreiranju UX dizajna.

Važno je zapamtiti da različite kulture širom svijeta različito percipiraju boje. Opisat ćemo emocionalne asocijacije koje su jedinstvene za zapadnu kulturu.

Crveni

Najstimulativnija boja, toliko energetski nabijena da može čak i povećati krvni pritisak. Crvena predstavlja strast i moć i boja koja najviše privlači pažnju, zbog čega se često koristi za važna upozorenja i najave.

Na primjer, crvena boja je vrlo pogodna za web lokaciju čija je svrha da upozori na uočene prijetnje.

Upotreba puno crvene boje na vrhu stranice je sjajna jer skreće pažnju na važne informacije u vašoj poruci. Istovremeno, ljudi imaju tendenciju da brzo napuste crvenu "opasnu zonu" i skroluju dole. A to vam zauzvrat omogućava da korisniku pokažete više sadržaja.

Ali ova boja može djelovati i protiv vas, jer može izazvati agresiju ili pretjeranu stimulaciju. Ako želite stvoriti opuštajuću atmosferu, pokušajte koristiti crvenu u umjerenim količinama i birajte svjetlije nijanse crvene.

Narandžasta

Kao najmirniji od toplih tonova, narandžasta je sposobna da izazove niz različitih emocija. Kao primarna boja može pobuditi zanimanje i osvježiti, a kao sekundarna boja može zadržati ova svojstva, ali na nenametljiviji način.

Osim toga, narandža pomaže u stvaranju osjećaja pokreta i energije. Na primjer, izgleda sjajno na web stranici kompanije za crtane filmove, što ukazuje na mladost i pokret. Boja je povezana s kreativnošću, uz očuvanje poznatog brenda.

Žuta

To je jedna od najsvestranijih boja, a emocije koje izaziva više zavise od nijanse.

Jarko žuta daje energiju, ali bez oštrine i oštrine koja je prisutna u crvenoj. Srednje nijanse žute izazivaju osjećaj udobnosti, a istovremeno osnažuju. Tamne nijanse (uključujući i zlatne) pružaju osjećaj starine, ispunjavajući prostor bezvremenošću, mudrošću i radoznalošću.

Na primjer, na početnoj stranici agencije za web dizajn, tamniji tonovi žute odišu energijom, radoznalošću i autoritetom. Ova boja je odlična za kompanije koje zarađuju od konsaltinga i žele da istaknu svoju profesionalnost.

Zelena boja

Zelena je most između toplih i hladnih nijansi, iako ima tendenciju da bude hladnija. To znači da zelena ima opuštajući efekat plave, ali ima i malo energije od žute.

Kao rezultat, stvara se vrlo uravnotežena i stabilna atmosfera. Tamnije nijanse zelene ostavljaju utisak bogatstva i izobilja, baš kao i web stranica.

Plava boja

Kao i kod žute, efekat plave u velikoj meri zavisi od nijanse. Sve nijanse plave su univerzalne u smislu opuštanja i sigurnosti, ali svijetli tonovi asociraju na prijateljstvo, a tamni tonovi na tugu.

Društvene mreže poput Twittera i Facebooka koriste svjetlije do srednje nijanse plave, dok korporativne stranice preferiraju tamnije nijanse snage i pouzdanosti.

Agencija za dizajn događaja odličan je primjer. Koristeći plavo cvijeće kao pozadinu, vizualno su nagovijestili svoje znanje i vještine u cvjećarstvu, a stvarali su i osjećaj pouzdanosti i povjerenja.

Ovo je od velike važnosti jer rade sa događajima gde je vizuelno veoma važno, kao što su venčanja.

Ljubičasta

Ljubičasta boja je istorijski povezana sa kraljevskom veličinom, nagoveštavajući luksuz. Nijanse ljubičaste odražavaju velikodušnost i bogatstvo općenito, što ih čini odličnim izborom za modnu i luksuznu robu (čak i čokoladu kao što je odabir boja brenda).

Svjetlije nijanse poput lavande (ljubičasta s dozom ružičaste) pobuđuju misli o romantici, dok tamnije nijanse djeluju šik i misterioznije.

Crna

Najjača od neutralnih boja, crna, pojavljuje se na gotovo svakoj web stranici. Može izazvati različite asocijacije ovisno o bojama koje ga prate ili dominirati njima ako se koristi pretjerano.

Snaga i neutralnost crne čini je odličnim izborom za velike blokove teksta, ali kao primarna boja može stvoriti osjećaj nervoze ili čak biti povezana sa zlom.

Za većinu web lokacija, crna se koristi za stvaranje osjećaja sofisticiranosti. Kombinacija crne i bijele u minimalističkom dizajnu odaje dojam elegancije i stila, baš kao na BOSE web stranici.

Bijelo

U zapadnoj kulturi, bijela je povezana s čistoćom, ljubaznošću i nevinošću. Ova boja se često koristi za pozadinu minimalističkih i jednostavnih web stranica.

Osim toga, nijedna boja vam neće omogućiti da posvetite toliko pažnje drugim bojama kao bijela. Na primjer, za pobjednika Awwwardsa, Kloina Tosheva, svi njegovi radovi su postavljeni na bijelu podlogu, što samo ističe ilustracije i ostavlja utisak elegantne galerije.

Siva boja

Unatoč činjenici da u nekim situacijama siva može stvoriti tmurnu i tužnu atmosferu, profesionalni dizajneri je još uvijek često koriste.

Sve je u nijansama: izmjenjujući ih, možete dobiti sve emocije koje izazivaju i crna i bijela. Sve u svemu, siva je moćan alat u pravim rukama.

A u kombinaciji sa svjetlijim bojama u dizajnu, siva pozadina djeluje moderno, a ne sumorno, na primjer, na.

Bež

Sama bež je prilično dosadna i neizražajna, ali ima jedno izvanredno svojstvo: bež poprima karakter cvijeća koje je okružuje. Stoga, ako nije namijenjena izražavanju suzdržanosti, bež služi kao pozadina ili druga boja.

Tamnije nijanse bež stvaraju osjećaj tradicije i zemljanosti, daju osjećaj papira, dok svjetlije nijanse djeluju svježije i modernije.

Na primjer, na web stranici restorana svijetlo bež boja oko imena i tamniji rubovi daju utisak da je restoran svjež pristup tradicionalnoj kuhinji.

Ivory

Slonovača kao i krem izazivaju gotovo iste emocije kao i bijela. Međutim, slonovača je toplija (ili manje sterilna) od bijele, što stvara veći osjećaj udobnosti uz zadržavanje minimalizma.

Možete koristiti slonovaču umjesto bijele kako biste ublažili kontrast između nje i tamnijih boja. Na primjer, na stranici su smeđe-narandžasti elementi postavljeni na pozadinu boje slonovače (koja izgleda sivkasto) kako bi se održao osjećaj topline.

Spektar boja

Svaka stranica ima shemu boja koja koristi primarne boje kako bi popunila više prostora. Kao što smo ranije rekli, upotreba ovih boja utječe na um i raspoloženje osobe uglavnom podsvjesno. Zato ih pažljivo birajte.

Iako postoji mnogo načina za kombiniranje boja, fokusirat ćemo se na tri najuspješnija i najčešće korištena.

Trijada (trostruki sklad, trougao)

Trijada je osnovni i najizbalansiraniji sistem tri boje. Koristi rezonanciju i komplement boja, ali nema složen kontrast, što čini trijadu najpouzdanijim rasponom.

Na kotaču od 12 boja odaberite bilo koja tri razmaknuta od 120 stepeni: jedan za prednji plan i dva za traku za sadržaj i navigaciju.

Dvostruki komplementarni sistem

Ovaj raspon je teže implementirati, ali može biti isplativo rješenje. Koriste se četiri boje: dvije kontrastne i dvije komplementarne.

Pogledajte kako izgleda sjajna stranica Florida Flourish na osnovu ovog izgleda. Crvena i zelena boja su u kontrastu u biljkama i tekstualnim blokovima, dok plava pozadina i narandžasta pustinja efektno dopunjuju sliku.

Analogi (serijski sistem)

Raspon sličnih boja uglavnom koristi komplementarne nijanse. To vam omogućava da posebno jasno naglasite neke kvalitete i izazovete određene emocije.

Na primjer, kombinacija crvene, narančaste i žute boje naglašava energiju i vitalnost. Vrlo je jednostavno koristiti takve vage, ali je teško odabrati koje će boje biti uključene u kombinaciju. Njihov efekat će biti preuveličan, tako da ne možete pogrešiti.

Na primjer, korištenje plave, tirkizne i zelene boje u dizajnu web stranice stvorilo je atmosferu mira i spokoja. Obratite pažnju na to kako je žuta korišćena za isticanje važnih tačaka.

Ovo su samo osnove teorije boja koje vam mogu pomoći da kreirate impresivne prilagođene dizajne i ne postoji ograničenje koliko daleko možete ići u pogledu boja na vašoj web lokaciji.

Alati pomoćnika za odabir boja

Srećom, postoji nekoliko dostupnih alata koji će vam pomoći da teoriju boja provedete u praksi. Isprobajte ove palete kako ne biste morali početi od nule da kreirate vlastitu:

1. ranije poznat kao Adobe Kuler. To je jedan od najpouzdanijih alata za odabir boja.
2. … Ako želite jednostavan alat za odabir boje što je brže moguće, Paletton je odličan.
3. … Odličan alat za odabir boje korisničkog interfejsa.

A ako vam ovi alati ne rade, evo različitih alata za odabir boja.

Direktan odnos boje i emocija

Zapamtite: korisnici rijetko primjećuju i cijene boju pozadine, navigacijske trake, pojedinačne detalje, ali to ne znači da boja ne utiče na njih. To se jednostavno dešava podsvjesno.

Korisnik ima neke emocije, razvija stav prema sajtu ili brendu, izvodi određene radnje: skroluje nadole, klikće na dugmad koji izazivaju akciju ili ih, obrnuto, ne primećuje. A boja igra veliku ulogu u svemu tome.

Ako imate savjete za korištenje boja u web dizajnu, podijelite ih u komentarima.