Barve imajo neizmerno moč, da vplivajo na naše razpoloženje, čustva in misli. Raziskava, ki jo je izvedel Inštitut za raziskovanje barv (1), razkriva, da ljudje podzavestno presodijo izdelek v 90 sekundah po tem, ko so ga videli, in med 62 % in 90 % te ocene temelji samo na barvi.
Oblikovalci uporabniškega vmesnika (UI) pri izdelavi spletne strani imajo zahtevno nalogo, da v svoj vmesnik vključijo barvo na način, ki na ustrezen način sporoča vizualno identiteto blagovne znamke. Čeprav se morda zdi, da je barvna paleta spletnega mesta stvar naročnikovega osebnega okusa, se v resnici oblikovalci uporabniškega vmesnika zanašajo na okvir, imenovan barvna teorija: večplasten nabor smernic, ki informirajo uporabo barv v oblikovanju.
V prispevku boste izvedeli vse, kar morate vedeti o teoriji barv – od osnov barvnih odtenkov do izbire prave barvne kombinacije za vaš uporabniški vmesnik.
Začnimo pri osnovah: kaj je pravzaprav barvna teorija?
Barvna teorija je okvir, ki informira o uporabi barv v umetnosti in grafičnem oblikovanju, usmerja določanje barvnih palet in omogoča učinkovito komunikacijo oblikovalskega sporočila tako na estetski kot psihološki ravni.
Sodobna teorija barv v veliki meri temelji na barvnem krogu Isaaca Newtona, ki ga je ustvaril že leta 1666 (2). Osnovni barvni krog prikazuje tri kategorije barv: primarne barve, sekundarne barve in terciarne barve.
Na hitro osvežimo, kaj te barvne kategorije vključujejo:
Primarne barve so barve, ki jih ne morete ustvariti s kombinacijo dveh ali več drugih barv. Primarne barve so rdeča, modra in rumena.
Sekundarne barve so oranžna, vijolična in zelena – z drugimi besedami, barve, ki jih lahko ustvarite s kombiniranjem katerih koli dveh od treh primarnih barv.
Terciarne barve nastanejo z mešanjem primarne barve s sekundarno barvo. Terciarne barve so rdeče-vijolična, rdeče- oranžna, modro-zelena, rumeno-zelena, modro- vijolična in rumeno-oranžna barva.
Barvno kolo ne prikazuje samo vsake primarne, sekundarne in terciarne barve – prikazuje tudi njihove odtenke, sence, tone in nianse. Z vizualizacijo, kako se vsaka barva nanaša na barvo, ki je poleg nje na mavrični barvni lestvici, barvno kolo pomaga oblikovalcem ustvariti barvne kombinacije po meri, ki spodbujajo estetsko harmonijo. Poglejmo te barvne različice nekoliko globlje:
Odtenek
Odtenek se nanaša na čisti pigment barve, brez nianse ali sence. V tem pogledu si odtenek lahko razlagamo kot izvor barve. Katera koli od šestih primarnih in sekundarnih barv je odtenek.
Senca
Odtenek se nanaša na to, koliko črne barve je dodanega odtenku. Kot taka senca potemni barvo.
Niansa
Nasprotno od odtenka, odtenek se nanaša na to, koliko bele je dodane barvi. Barva kot taka posvetli barvo.
Ton
Ton je rezultat barve, ki sta ji dodani bela in črna. Z drugimi besedami, ton se nanaša na kateri koli odtenek, ki je bil spremenjen z dodatkom sive – dokler je siva povsem nevtralna (vsebuje le belo in črno).
Barvna temperatura
Tudi če ste samozavestni novinec v oblikovanju, ste verjetno že slišali izraze “toplo, hladno in nevtralno”, ki se uporabljajo v zvezi z barvo. To se imenuje barvna temperatura in je bistven dejavnik, ko gre za teorijo barv.
Tople barve vsebujejo odtenke rumene in rdeče; hladne barve imajo moder, zelen ali vijoličen odtenek; nevtralne barve vključujejo rjavo, sivo, črno in belo. Temperatura barve pomembno vpliva na naš čustveni odziv nanjo. V psihologiji barv na primer tople barve kažejo navdušenje, optimizem in ustvarjalnost, medtem ko hladne barve simbolizirajo mir, umirjenost in harmonijo. O barvni psihologiji bomo več zapisali v nadaljevanju.
Najverjetneje najpomembnejši vidik barvne teorije, barvna harmonija pomeni, kako uporabljate barvne kombinacije, ki so vizualno prijetne za človeško oko. Barvne kombinacije oz. palete lahko spodbujajo kontrast ali sozvočje, vendar dokler so skupaj smiselne, lahko še vedno povzročijo vizualno zadovoljiv učinek.
Ko gre za oblikovanje uporabniškega vmesnika, si vsi oblikovalci prizadevajo doseči barvno harmonijo. Na podlagi psihološke potrebe po ravnovesju barvna harmonija pritegne gledalca in vzpostavi občutek reda. Pomanjkanje harmonije v barvni paleti lahko povzroči, da je vmesnik premalo spodbuden (dolgočasen) ali preveč spodbuden (kaotičen in neurejen).
Zdaj, ko smo obdelali barvne različice, lahko nadaljujemo z dodajanjem in odvzemanjem barve. Barva ima dve različni naravi: otipljive barve, ki jih lahko vidimo na površini predmetov, in barve, ki jih proizvaja svetloba. Ti dve vrsti barv sta znani kot aditivni in subtraktivni barvni modeli. Oglejmo si podrobneje, kaj pomenijo.
Aditivni barvni model (RGB)
RGB pomeni rdečo, zeleno in modro ter temelji na aditivnem barvnem modelu svetlobnih valov, ki narekuje, da več barve kot dodate, bližje je barva beli. Barvni model RGB je osnova vseh elektronskih zaslonov in posledično model, ki ga oblikovalci uporabniškega vmesnika najpogosteje uporabljajo.
Subtraktivni barvni model (CMYK)
Po drugi strani pa je CMYK znan kot subtraktivni barvni model, ki barve pridobiva z odštevanjem svetlobe. CMYK pomeni cian, magenta, rumena in črna in se večinoma uporablja pri fizičnem tiskanju.
Doslej smo raziskali različne oblike, ki jih lahko ima barva, in se seznanili z barvnim modelom, ki ga boste uporabljali kot oblikovalec uporabniškega vmesnika. Zdaj pa se poglobimo v zabavni del: barvne palete!
Barvne palete so barvne kombinacije, ki jih oblikovalci uporabniškega vmesnika uporabljajo pri oblikovanju vmesnika. Ob pravilni uporabi barvne palete tvorijo vizualni temelj vaše blagovne znamke, pomagajo ohranjati doslednost in naredijo vaš uporabniški vmesnik estetsko prijeten in prijeten za uporabo.
Medtem ko barvne palete segajo tisoče let nazaj, se barvne palete običajno uporabljajo v digitalnem oblikovanju in so predstavljene kot kombinacija HEX kod. HEX kode sporočajo računalniku, katero barvo želite prikazati z uporabo šestnajstiških vrednosti. V 90ih letih je večina digitalnih barvnih palet vključevala samo osem barv. Zdaj imajo oblikovalci na voljo nešteto odtenkov in barv iz barvnega kolesa.
V nadaljevanju se bomo naučili, kako izbrati in interpretirati barvno paleto, da zagotovite, da ustvarite najboljši možni vmesnik za svoje uporabnike.
Barve je mogoče kombinirati v eno od petih barvnih palet, ki jih običajno uporabljajo oblikovalci spletnih strani. Pojdimo skozi njih skupaj.
Enobarvna
Enobarvne barvne kombinacije oz. sheme, ki so priljubljena izbira oblikovalcev, so oblikovane z uporabo različnih tonov in odtenkov ene same barve.
Analogna (mehka)
Analogna barvna shema je sestavljena iz treh barv, ki se nahajajo ena poleg druge na barvnem kolesu. Analogne barvne palete se običajno uporabljajo, kadar kontrast ni potreben – na primer na ozadju spletnih strani ali pasic.
Komplementarna
Komplementarne barvne palete so sestavljene iz barv, ki so postavljene ena pred drugo na barvnem kolesu. Čeprav ime morda pove drugače, so komplementarne barvne palete pravzaprav nasprotje analognih in monokromatskih barvnih palet, saj želijo ustvariti kontrast. Na primer, rdeči gumb na modrem ozadju bo izstopal na katerem koli vmesniku.
Razdvojena komplementarna
Razdeljena komplementarna barvna paleta se od komplementarne barvne palete razlikuje le po tem, da uporablja večje število barv. Na primer, če izberete modro barvo, boste morali vzeti dve barvi, ki mejita na njeno nasprotno barvo, kar bi v tem primeru bili rumena in rdeča.
Triadna
Triadna barvna shema temelji na treh ločenih barvah, ki so enako oddaljene na barvnem kolesu. Večina oblikovalcev uporablja triadno barvno shemo z izbiro ene prevladujoče barve in uporabo drugih dveh barv kot poudarkov.
Pravokotna
Pravokotna barvna shema, ki jo običajno uporabljajo bolj izkušeni oblikovalci, uporablja dva sklopa komplementarnih parov – skupaj štiri barve iz barvnega kroga, ki naj bi, ko so povezane, tvorile pravokotnik. Čeprav ga je nekoliko težje uravnotežiti, poskrbi za vizualno osupljiv končni učinek!
Zdaj, ko smo osvojili osnove teorije barv, poglejmo, kako lahko to novo pridobljeno znanje uporabite za izbiro barvne palete, ki pripoveduje zgodbo vaše blagovne znamke in odmeva pri vašem občinstvu.
Ko izbirate barvno paleto za svoj uporabniški vmesnik, morate upoštevati nekaj stvari:
Čustveni odzivi na barve so lahko odvisni od vrste osebnih dejavnikov, vključno s spolom, kulturnimi izkušnjami in starostjo. Preden začnete z izbiro barvne kombinacije, se prepričajte, da poznate vašo ciljno skupino. Katere so njihove skupne lastnosti in kakšna so njihova pričakovanja? Katere blagovne znamke, povezane z vašo, so priljubljene med vašo ciljno publiko – in kako lahko presežete njihove modele?
Temeljita raziskava o vaši ciljni publiki vam ne bo le pomagala izpopolniti zgodbe, ki jo želite sporočiti, ampak vam bo pomagala tudi preprečiti morebitno katastrofalno napako načrtovanja.
Ko je vaša ciljna skupina opredeljena, je čas, da pogledate psihologijo, ki stoji za vašimi potencialnimi barvami blagovne znamke. Psihologija barv je veja psihologije, ki se ukvarja z vplivom barv na človeško razpoloženje in vedenje. Glede na psihologijo barv človeški um podzavestno reagira in razlaga barve na način, ki vpliva na naša dejanja.
Če želite ustvariti barvno paleto, ki pritegne vašo ciljno publiko in natančno pove zgodbo vaše blagovne znamke, je bistveno, da imate osnovno razumevanje barvne psihologije. Da bi se seznanili s tem, si spodaj oglejmo nekaj najpogostejših povezav barv:
Običajno so barvne kombinacije oz. palete sestavljene iz šestih barv. Te barve morajo vsebovati eno prevladujočo barvo, štiri poudarjene barve in eno standardno barvo za vaše besedilo (ki je običajno črna ali siva). Vaša prevladujoča barva je tista, ki jo bodo vaši kupci za vedno povezovali z blagovno znamko, zato bodite zelo previdni, ko razmišljate o tem, kakšna naj bo ta barva. Vzemite si čas za navdih, imejte v mislih barvne asociacije in izvedite nekaj uporabniških testiranj, če je treba.
Opomba: lahko dodate več ali manj barv, odvisno od osebnosti vaše blagovne znamke in estetike, ki jo želite doseči. Izbira monokromatskih, analognih ali komplementarnih barv vam bo pomagala doseči poenostavljeno barvno paleto. Ne pozabite: tukaj je cilj barvna harmonija!
Barvni kontrast je jedro vsakega vmesnika, saj naredi vsak element uporabniškega vmesnika opazen in razločen. Uporabniški vmesniki, ki vsebujejo le odtenke iz iste barvne družine, verjetno ne bodo pritegnili pozornosti uporabnikov – poleg tega pa tvegate, da bo navigacija povzročila popoln glavobol. Po drugi strani pa lahko besedilo postane nečitljivo, če si barve besedila in ozadja preveč nasprotujejo.
Oblikovalci nadzirajo raven kontrasta glede na to, kaj želi vmesnik doseči. Izkušeni oblikovalci si prizadevajo ustvariti blago stopnjo kontrasta in uporabljajo visoko kontrastne barve samo za elemente, ki naj bi izstopali – kot so pozivi k dejanju.
Ko delate z barvami, vas zlahka prevzame estetika namesto praktičnosti. Seveda mora biti vaš vmesnik vizualno prijeten, vendar mora biti tudi dostopen, enostaven za krmarjenje in prijeten za uporabo. Seveda je super, da eksperimentirate vendar lahko zahtevna oblikovalska pravila z “ostrim” dizajnom zmedejo vaše uporabnike in jih prisilijo, da delajo več, kot bi morali.
Običajna barvna pravila za oblikovanje uporabniškega vmesnika v praksi vključujejo:
Če se boste držali teh pravil, boste zmanjšali kognitivno obremenitev vaših uporabnikov in jim omogočili intuitivno krmarjenje po vmesniku.
Želite vedeti, ali vaša barvna paleta deluje? Izvedite nekaj uporabniških testiranj! Barvne palete nikoli ne smejo biti stvar osebnih preferenc, ne glede na to, kako zelo obožujete barve, ki ste jih izbrali. Kot smo videli pri poglavju o barvnih asociacijah, čustvenega odziva, ki ga barva lahko izzove, ne gre jemati zlahka. Le-ta lahko v veliki meri izboljša ali prekine odnos, ki ga ima blagovna znamka s svojo bazo strank.
Če prejmete povratne informacije uporabnikov, boste zagotovili ustvarjanje vmesnika z barvami, ki bodo všeč vašim uporabnikom.
Ko pride do dejanske naloge izbire barvne palete za vaš vmesnik, imate včasih občutek, kot da nimate pojma, kje začeti. Na srečo je trenutno na voljo nešteto uporabnih orodij in spletnih generatorjev barvnih palet, ki vam dajo zadostno mero navdiha in vam pomagajo izbrati barvno paleto za vaš dizajn.
Spodaj smo zbrali tri najboljša orodja za ustvarjanje spletnih barvnih kombinacij oz. palet.
Adobe Color (3)
Adobe Color, ki je pripravljen kot vir »kruha in masla« za vse digitalne ustvarjalce, ponuja skoraj vse barvne palete. V primerjavi z drugimi generatorji barvnih shem je Adobe Color veliko bolj obsežen – zato naj vam ne bo všeč, če želite nekaj hitrega in preprostega. Med ključnimi funkcijami Adobe Colors je generator barvne palete, ki črpa barve iz slik, ki jih naložite.
Coolors (4)
Coolors je uporaben in začetnikom prijazen generator barvne palete, popoln za spopadanje s HEX kodami. Lahko klikate po naključnih vnaprej izdelanih barvnih paletah, se poigrate z odtenki in odtenki ter shranite svoje najljubše barve, da ustvarite svojo lastno paleto po meri. A še bolj zabavno se je igrati z njihovim generatorjem. Ko najdete barvo, ki vam je všeč, jo preprosto kopirajte in prilepite v katero koli zunanjo aplikacijo in začnite oblikovati!
Adobe Illustrator barvni vodnik (5)
Adobe Illustrator Color Guide se izstopa s svojo priljubljeno funkcijo ‘color guide’. Ko izberete barvo, bo barvni vodnik za vas ustvaril petbarvno paleto. Zagotovil vam bo tudi vrsto nians in odtenkov za vsako barvo in paleti. Če zamenjate svojo glavno barvo, bo barvni vodnik samodejno osvežil ustrezne barve, da zagotovi, da se poudarjene barve dopolnjujejo.
Ni vam treba postati strokovnjak za teorijo barv, da bi bili uspešen oblikovalec uporabniškega vmesnika. Teorija barv je namreč izjemno kompleksna veda, ki ji mnogi posvečajo vse življenje. Že spoznavanje osnov vam bo pomagalo razumeti psihologijo, ki stoji za izbiro popolne barvne palete za vaše spletno mesto ali aplikacijo. Ostalo pa prinese praksa 🙂
2024 © Majda Rogelj. Vse pravice pridržane
