Boja u web dizajnu: kako izazvati prave emocije kod korisnika

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

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 povijest, majstori slikari bili su univerzalno priznati po svojoj sposobnosti rada s bojom. U suvremenom 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 utjecaj na osobu.

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

Teorija boja

Temi boja može se posvetiti cijela knjiga, pa 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 "nemesis", koja čini najveći kontrast ovoj boji. Da biste pronašli takvu boju, možete koristiti kotačić 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 kotaču boja te 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, narančasta, žuta) pune čovjeka energijom, razbuđuju ga, a hladne tamne nijanse (zelena, plava, ljubičasta), naprotiv, opuštaju i smiruju.

Na primjer, koriste crvenu navigacijsku traku kako bi probudili čitatelja i povećali njegovo uzbuđenje. S obzirom na specifičnost stranice - senzacionalne vijesti - crvena izgleda kao logična odluka.

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

Emocionalna percepcija boje

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

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

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

Crvena

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

Na primjer, crvena boja vrlo je prikladna za stranicu čija je svrha upozoriti na uočene prijetnje.

Korištenje puno crvene boje na vrhu stranice je sjajno jer skreće pozornost na važne informacije u vašoj poruci. Istodobno, ljudi imaju tendenciju brzo napustiti crvenu "opasnu zonu" i pomaknuti se prema dolje. A to vam zauzvrat omogućuje 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. Želite li stvoriti opuštajuću atmosferu, pokušajte koristiti crvenu u umjerenim količinama i birajte svjetlije nijanse crvene.

naranča

Kao najmirniji od toplih tonova, narančasta je sposobna izazvati niz različitih emocija. Kao primarna boja može pobuditi zanimanje i okrijepiti, a kao sekundarna boja može zadržati ta svojstva, ali na nenametljiviji način.

Osim toga, naranča pomaže stvoriti osjećaj pokreta i energije. Na primjer, izgleda sjajno na web stranici tvrtke za crtane filmove, što sugerira mladost i pokret. Boja je povezana s kreativnošću, uz očuvanje poznatog brenda.

Žuta boja

Jedna je od najsvestranijih boja, a emocije koje izaziva više ovise o nijansi.

Svijetlo žuta daje energiju, ali bez oštrine i oštrine koja je prisutna u crvenoj boji. Srednje nijanse žute izazivaju osjećaj ugode, a ipak osnažuju. Tamne nijanse (uključujući i zlatne) pružaju osjećaj antike, ispunjavajući prostor bezvremenošću, mudrošću i znatiželjom.

Primjerice, na početnoj stranici agencije za web dizajn tamniji tonovi žute odišu energijom, znatiželjom i autoritetom. Ova boja je izvrsna za tvrtke koje zarađuju od savjetovanja i žele naglasiti 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 učinak plave, ali ima i malo energije od žute.

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

Plava boja

Kao i kod žute, učinak plave jako ovisi o nijansi. Sve nijanse plave su univerzalne u smislu opuštanja i sigurnosti, ali svijetli tonovi povezani su s prijateljstvom, a tamni s tugom.

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 izvrstan je primjer. Koristeći plavo cvijeće kao pozadinu, vizualno su nagovijestili svoje znanje i vještinu u cvjećarstvu, a stvarali su i osjećaj pouzdanosti i povjerenja.

To je od velike važnosti jer rade s događajima gdje je vizualno vrlo važno, kao što su vjenčanja.

Ljubičasta

Ljubičasta boja povijesno je povezana s kraljevskom veličinom, nagovješ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 marke).

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

Crno

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

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 stranica crna se koristi za stvaranje osjećaja sofisticiranosti. Kombinacija crne i bijele boje u minimalističkom dizajnu odaje dojam elegancije i stila, baš kao na web stranici BOSE.

Bijeli

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

Osim toga, niti jedna boja neće vam omogućiti da posvetite toliko pažnje drugim bojama kao bijela. Primjerice, za pobjednika Awwwardsa, Kloina Tosheva, svi njegovi radovi raspoređeni su na bijeloj pozadini, što samo ističe ilustracije i ostavlja dojam elegantne galerije.

Siva boja

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

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 tmurno, na primjer, na.

Bež

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

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

Na primjer, na web stranici restorana svijetlo bež boja oko imena i tamniji rubovi daju dojam da je restoran svježi pogled na tradicionalnu kuhinju.

Slonovače

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

Možete koristiti bjelokost umjesto bijele kako biste ublažili kontrast između nje i tamnijih boja. Na primjer, na stranici su smeđe-narančasti elementi postavljeni na pozadinu boje bjelokosti (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, korištenje ovih boja utječe na um i raspoloženje osobe uglavnom podsvjesno. Stoga ih pažljivo birajte.

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

Trijada (trostruki sklad, trokut)

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

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

Dvostruki komplementarni sustav

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

Provjerite kako izgleda sjajna stranica Florida Flourish na temelju ovog izgleda. Crvena i zelena boja su u kontrastu u biljkama i tekstualnim blokovima, dok plava pozadina i narančasta pustinja učinkovito nadopunjuju sliku.

Analogi (serijski sustav)

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

Primjerice, 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 učinak bit će pretjeran, tako da ne možete pogriješ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 se žuta boja koristila za isticanje važnih točaka.

Ovo su samo osnove teorije boja koje vam mogu pomoći u stvaranju impresivnih prilagođenih dizajna, a ne postoji ograničenje koliko daleko možete ići u pogledu boja na svojoj web stranici.

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 biste izradili vlastitu:

1. prije 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 izvrstan.
3. … Izvrstan alat za odabir boje korisničkog sučelja.

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

Izravan 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 utječe na njih. To se jednostavno događa podsvjesno.

Korisnik ima neke emocije, razvija stav prema web-mjestu ili brendu, izvodi određene radnje: pomiče se prema dolje, klika na gumbe koji izazivaju radnju ili ih, obrnuto, ne primjećuje. A boja igra veliku ulogu u svemu tome.

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