O teoriji boja i njenom značenju napisano je mnogo članaka. Boja igra važnu ulogu u dizajnu i ponekad može uticati na ponašanje ljudi. Svaki web dizajner zna da prava shema boja za web lokaciju može uticati na njenu popularnost, jer web stranice dizajnirane prema teoriji boja ostavljaju dobar utisak na korisnike.
Međutim, mnogi dizajneri, radeći na odabiru kombinacija boja, često zaboravljaju da svi ljudi ne percipiraju boje na isti način. Postoji mali broj ljudi koji su slijepi za daltoniste, tako da kada dizajnirate svoju web stranicu, morate voditi računa o korisnicima koji su slijepi za boje. Zaista, ponekad vrlo lijepo dizajnirana stranica možda jednostavno neće raditi za ovu kategoriju korisnika, jer neće moći njome da se kreću. I ovo je zaista problem: među muškarcima postotak daltonista može doseći 8%, a među ženama - oko 1%. Zato je bolje ne riskirati gubitak 9% publike i odabrati shemu boja stranice tako da je normalno percipiraju svi ljudi, uključujući i daltoniste.
TEORIJA BOJA MOŽE POBOLJŠATI DOSTUPNOST SAJTA
Pristupačnost sajta je od velike važnosti, jer direktno utiče na njegovu popularnost. Kada je riječ o pristupačnosti, to obično znači jednostavno i jasan interfejs. Ali shema boja također utiče na korisničko iskustvo. A ako kreirate dizajn koji ne uzima u obzir potrebe ljudi s različitim oštećenjima vida, tada će ovo iskustvo biti negativno, što je neprihvatljivo. Postoji mnogo razloga zašto biste trebali pažljivo poraditi na dostupnosti boja na stranici:
- Prava shema boja može biti konkurentska prednost. Ako je dizajn stranice prilagođen daltonistima, a ne postoji stranica konkurenta, tada možete privući dodatnu publiku na svoju stranu
- Web stranice sa dostupnim bojama mogu se rangirati više u pretraživačima
- U nekim zemljama, loš dizajn stranice može dovesti do pravnog postupka, jer takva stranica ne pruža jednake mogućnosti osobama sa oštećenjem vida
- Važna je i etička tačka: daltonisti ne mogu u potpunosti koristiti neke stranice i to im je veliki problem. Stoga, uvijek treba imati na umu UX
Unatoč svemu navedenom, učiniti web stranicu dostupnom ljudima koji ne mogu razlikovati određene boje nije tako teško. Samo trebate pravilno koristiti teoriju boja i ne zaboravite na kontrast važnih elemenata.
KAKO KREIRATI VEB STRANICU VISOKE DOSTUPNOSTI
Naravno, izrada web stranice koja će biti pogodna za apsolutno sve kategorije korisnika je nemoguć zadatak. I prije svega zato što je teško točno odrediti kako daltonisti vide ovu ili onu boju. Ali to nije sve: ljudi koji nisu daltonisti također vide boje malo drugačije. Urađeno je mnogo istraživanja kako bi se tačno otkrilo kako ljudi razlikuju boje različite vrste daltonizam. Ali ove studije nisu dale nikakve tačne rezultate, tako da je i dalje otvoreno pitanje kako tačno daltonista vidi.
Započinjući rad na dizajnu stranice, morate odmah voditi računa o vidljivosti boja navigacijskih elemenata i sadržaja. Postoji mnogo načina da to učinite, a prvi je korištenje kontrastnih boja za pozadinu i važne elemente dizajna. Na primjer, korištenje crnog teksta na bijeloj pozadini učinit će sadržaj dostupnim svim korisnicima. Ali crna i bijela nisu sve "sigurne" boje - ima ih mnogo više. Vi samo trebate biti sigurni da su veze, dugmad i drugi elementi dizajna vidljivi i da se ističu iz pozadine.
KOJE BOJE DA KORISTIM?
Prvi korak u kreiranju web-stranice pristupačne daltonistima je odabir palete boja. Zadatak dizajnera u ovom slučaju je odabrati uspješne kombinacije boja koje će uključivati kontrastne nijanse i osigurati hijerarhiju boja.
U ovom slučaju morate biti oprezni i pokušati ne koristiti neke nijanse. Većina daltonista ima problema s razlikovanjem kombinacije crvene/zelene i žuto/plave. Evo još opasnijih kombinacija boja:
- smeđa/zelena
- zeleno/plavo
- ljubičasta/plava
- sivo/plavo
- zeleno/sivo
- crno zelena
- žuta/svetlo zelena
Kao što vidite, ove kombinacije boja nisu baš kontrastne i stoga mogu postati nerazlučive za osobe sa oštećenjem vida. Stoga je bolje ne koristiti nijanse u dizajnu koje su preblizu jedna drugoj na kotaču boja. Na primjer, zagasito žuta i plava, koje se vrlo slabo razlikuju.
Uvijek se mora imati na umu da osobe s daltonizmom uvijek trebaju dobro razlikovati boje, i nije važno koje boje vide - samo treba da daltonistima bude jasno šta vidi drugačije boje. Također morate obratiti pažnju na činjenicu da daltonisti bolje percipiraju svijetle boje i gotovo ne vide razliku između tamnih nijansi.
GRATIS NIJE
Komplementarne nijanse koje su jedna naspram druge na kotaču boja pružaju bolji kontrast i povećavaju pristupačnost dizajnu. Treba napomenuti da unatoč činjenici da su zelena i crvena komplementarne nijanse, ovu kombinaciju treba koristiti vrlo pažljivo, jer upravo te boje slabo razlikuju daltonisti.
Kao što znate, neke nijanse su tople, a neke hladne. Ovo se također može koristiti pri odabiru sheme boja. Kontrastirajući tople boje sa hladnim bojama, možete stvoriti atraktivan i istovremeno pristupačan dizajn. Međutim, pri odabiru boja ne zaboravite na kontrast: na primjer, možete koristiti tamnu hladnu nijansu u kombinaciji sa svjetlijom toplom bojom.
MONOCROM PALETTE
Kada radite na dostupnoj shemi boja, uvijek morate biti sigurni da se elementi iz neuspješnih parova boja ne koriste u blizini. A da biste stvorili sigurnu stranicu prilagođenu slijepim za boje, najbolje je koristiti jednobojnu paletu. Nije bitno kako će korisnik percipirati boju - fokusirat će se samo na kontrast. Osim toga, jednobojna je danas u modi, takve se palete danas vrlo često koriste na stranicama s minimalističkim dizajnom.
ALATI ZA IZBOR PALETE BOJA
Vischeck je simulator s kojim možete testirati dostupnost web stranica sljepocima za boje. Pomoću ovog alata možete naučiti kako osobe s različitim vrstama sljepoće za boje vide određenu stranicu i, ako je potrebno, brzo unose promjene u dizajn.
veliki i veoma koristan resurs, koji sadrži mnoge važna informacija o prirodi sljepoće za boje, njenim vrstama i karakteristikama. Stranica također ima testove za daltoniste i alate za provjeru boja stranice.
Još jedan alat za online provjeru pristupačnosti daltonistima na web stranicama. Možete provjeriti kako paletu od 216 boja percipiraju osobe s različitim vrstama sljepoće za boje.
ZAKLJUČAK
Naravno, pristupačnost stranice ne zavisi samo od šeme boja. Da, stranica bi trebala biti dostupna osobama sa oštećenim vidom, ali što je najvažnije, trebala bi biti dostupna što većem broju ljudi. više korisnika. Ali uvijek treba imati na umu boju i stalno provjeravati da li paleta boja ne sadrži problematične kombinacije boja.
Od autora: Boja je najvažniji element u web dizajnu. Ovo je mali trik koji će korisnika ne samo zadržati na vašoj web stranici, već ga i usmjeriti da izvrši određene radnje. Činjenica je da različite boje u web dizajnu na podsvjesnom nivou mogu izazvati različite emocije, a ovi algoritmi su nastali u davna vremena kao rezultat interakcije čovjeka s prirodom.
Mnogi programeri troše puno vremena na kreiranje jezičke podrške za web stranicu. Međutim, malo ljudi razmišlja o ulozi boja u našim životima. Ipak, više od 90% naših odluka da odaberemo proizvod, kliknemo na vezu, kliknemo na dugme itd. se zasniva samo na boji. Web dizajn aktivno koristi ovaj alat kako bi privukao pažnju korisnika i potaknuo ga na interakciju.
Zato je toliko važno poznavati osnovne principe i trendove boja u web dizajnu, koje ćemo pokriti u našem današnjem članku. I počećemo sa briljantnom, po mom mišljenju, jednačinom boja.
Johannes Itten Equation
Švicarski umjetnik Johannes Itten poznat je u naučnim krugovima kao najveći stručnjak za principe boje u klasičnoj i savremenoj umjetnosti. Dugo je proučavao paletu boja raznih prirodnih objekata, kao i umjetnička djela svih vremena i naroda.
Jednačina boja Johannesa Ittena izgleda ovako:
Referentne tačke ili boje prvog reda ovog dvanaestodelnog kruga su crvena, žuta i plava. U krug je upisan trokut boja prvog reda, na osnovu kojeg je izgrađen šesterokut. Svaka boja drugog reda dobija se kombinovanjem dve boje prvog nivoa. Dakle, dobijamo:
Narandžasta = žuta + crvena
Zelena = plava + žuta
Ljubičasta = plava + crvena
Boja trećeg nivoa može se dobiti mešanjem tonova prvog i drugog reda. Dakle, u paleti boja vlada jasna hijerarhija.
Kontrast i poređenje
Mozak i oči su u stanju da jasno razlikuju nijanse boja samo kontrastom i poređenjem. Nije tajna da crni kvadrat na bijeloj pozadini izgleda manje od istog kvadrata na crnoj pozadini. Dakle, crna boja smanjuje veličinu, dok je bijela u mogućnosti da se proširi i prevaziđe.
Također je vrijedno obratiti pažnju na sedam vrsta poređenja kontrasta. Naravno crno i bijele boje imaju najizraženiji kontrast tamnog i svijetlog. Međutim, plava, crvena i žuta također čine jake kontrastne parove.
Ekspresivni potencijal svakog para boja za web dizajn manifestuje se na različite načine. Više o vrstama kontrasta boja govorit ćemo u članku „Kombiniranje boja u web dizajnu kao efikasan alat Marketing".
Savremeni trendovi i pristupi u web razvoju
Naučite algoritam za brzi rast od nule u izgradnji web stranica
Prigušivanje boja uz kontrast
Po mom mišljenju, kontrastne web boje najbolje funkcioniraju u minimalističkom dizajnu. Na primjer, web stranica Studio Stylistik koristi tirkizne elemente na crnoj pozadini. Svaki tirkizni element (logotip, tekst, slika), koji se primjetno ističe na crnoj pozadini, značajno pojačava grafiku, čineći je odlučujućom.
Izvanredan tekst
Uz pomoć svijetle boje u web dizajnu mogu se istaknuti određene riječi. Ovo je posebno istinito na tamnoj pozadini. Svijetli odabir teksta utječe na percepciju poruke, dodaje joj određeni naglasak.
U sljedećem primjeru, riječ “Ljubav” je vizuelno naglašena, što je dobar poziv na akciju, u kombinaciji sa istom bojom dugmeta “Prijavi se odmah!”.
Tako, koristeći jarke kontrastne boje, možete stvoriti umjetnu interakciju između gumba i drugih elemenata stranice, skrenuti pažnju korisnika na gumb i općenito poboljšati upotrebljivost.
U ovom primjeru, neupadljiva boja pozadine stapa se s bojom proizvoda kako bi istakla narandžasto dugme i učinila radnju privlačnijom za korisnika.
Povoljne kombinacije boja
Da biste odredili najbolju boju u web dizajnu vaše stranice, prije svega trebate analizirati ciljnu publiku, a kao drugo, prilagoditi se njenim mogućim preferencijama. Ako je vaša publika rasprostranjena po cijelom svijetu, pokušajte napraviti lokalne stranice.
Koje su tajne kombinacija boja? Uzmimo, na primjer, berzu. U Japanu, Velikoj Britaniji i SAD-u, negativan indikator kotrljajućeg grafikona je crven, a pozitivan je plavi ili zeleni.
Ali u Koreji i Tajvanu preferencije boja su direktno suprotne. To je zbog činjenice da tamo crvena boja simbolizira sreću i prosperitet.
Stoga, prilikom odabira sheme boja, treba se usredotočiti na karakteristike različitih kultura. Da biste to učinili, morate proučiti čak i najsitnije detalje percepcije boja od strane jednog ili drugog naroda, grupe korisnika, određene osobe.
Boja je emocija
Percepcija boja je daleko od univerzalnog jezika, međutim, postoje neke boje web dizajna čiji se utjecaj može predvidjeti.
Jeste li se ikada zapitali zašto je bolničko osoblje obučeno u neutralne bijele ili prigušene pastelne uniforme?
Takav izbor se ne može nazvati slučajnim. Nežni zeleni, plavi, lila tonovi umiruju, opuštaju i umiruju pacijente. Uzmimo, na primjer, web stranicu medicinskog fakulteta. Pogledajte četiri opcije boja na ovoj stranici. Koji ti se najviše sviđa?
Općenito, crna boja podrazumijeva strogost i profesionalnost, međutim, u medicinskom kontekstu, povezuje se sa smrću. Crvena je boja krvi, pa ni za medicinsko mjesto nije baš prikladna, nagoveštavajući ozljede, a ne rehabilitaciju. Zelena i plava mogu dobro funkcionirati. Ali plava je, vidite, ovdje više „na temu“, zelena je, na kraju krajeva, previše svijetla za ovu temu.
Konačno
Ukoliko sebe smatrate kastom web dizajnera početnika, a još uvijek nemate odgovarajuće iskustvo i ukus u pogledu odabira boja, savjetujem vam da pogledate odgovarajuće video kurseve, koji su na razumljivom jeziku, na stvarni primjeri, reći će vam kako odabrati skladnu shemu boja, kao i upravljati ljudskom pažnjom uz pomoć boja i drugih komponenti web dizajna.
Na ovome ću se oprostiti. Pretplatite se na ažuriranja našeg bloga i budite u toku sa svim novostima iz oblasti web dizajna i web razvoja. Do ponovnog susreta, prijatelji!
Savremeni trendovi i pristupi u web razvoju
Naučite algoritam za brzi rast od nule u izgradnji web stranica
Boja je svakako važan izvor emocija. Boje mogu postaviti pravi ton i prenijeti potrebne emocije posjetiteljima, mogu uzbuditi, izazvati mnogo osjećaja i podstaći akciju. To je izuzetno snažan faktor utjecaja na korisnika.
Prilikom odabira sheme boja za web stranicu, važno je to učiniti ispravno, vodeći se osnovnim principima teorije boja. U članku se razmatraju najznačajniji aspekti pri odabiru, osnovni principi kombinacije, svrha boje u web dizajnu i njeno simboličko značenje. Osim toga, vidjet ćete nekoliko dobri primjeri u skladu sa preovlađujućim bojama, kao i upoznati se sa nekima korisni savjeti da efikasno koristite boje prilikom kreiranja web stranice.
Dakle, hajde da se upoznamo sa magijom boja ...
Teorija boja: osnovni principi. Mogućnost usklađivanja boja
Dobro je kada imate osećaj ukusa i lako možete da izaberete šemu boja sajta. Ne mogu svi ljudi ovo lako da urade. Za one koji nisu sigurni kako pravilno kombinirati boje prilikom izrade web stranice, preporučio bih da se upoznaju s osnovama teorije boja.Uzmite u obzir točak boja.
malo istorije: Točak boja izumio je Isaac Newton. Potkrijepivši teoriju svjetla i boja 1666. Upravo je ona stvorila osnovu za formiranje i razvoj moderne optike, čiji je mali i sastavni dio web dizajn. Njutn je pomoću triedarske staklene prizme razložio bijelu svjetlost na sedam boja (u spektar), čime je dokazao njenu složenost (fenomen disperzije), otkrio kromatsku aberaciju.
Točak boja je neizostavan atribut mnogih dizajnera i umjetnika širom svijeta. Ovo je savršen dokaz teorije da je genijalno uvijek jednostavno. Krug vam omogućava da odaberete boje koje bi se međusobno uskladile. Sastoji se od 6 osnovnih boja: crvene, narandžaste, žute, zelene, plave, ljubičaste i sekundarnih boja.
Da biste pronašli ispravnu shemu boja, trebate koristiti bilo koje dvije boje jedna nasuprot drugoj, bilo koje tri boje na jednakoj udaljenosti kada formirate trokut ili bilo koju od četiri boje koje formiraju pravougaonik (dva para boja jedna naspram druge). Šeme boja ostaju ispravne bez obzira na ugao rotacije.
Primarne boje
Postoje tri osnovne boje: crvena (#ff0000 u HTML-u ili #F00 u CSS-u), žuta (#FFFF00 u HTML-u ili #ff0 u CSS-u) i cijan (#0000FF u HTML-u ili #00f u CSS-u). Ne mogu se dobiti miješanjem drugih boja. Kombinacijom ove tri boje mogu se formirati komplementarne boje.
Kompozitne boje
Postoje i tri glavna: narandžasta (#ff9900 u HTML-u ili #F90 u CSS-u), zelena (#00FF00 u HTML-u ili #0f0 u CSS-u) i ljubičasta (#FF00FF u HTML-u ili #f0f u CSS-u). Možete ih dobiti miješanjem crvene i žute (narandžaste), žute i plave (zelene), te plave i crvene (ljubičaste).
Tercijarne boje
Da biste dobili jednu od tercijarnih boja, morate pomiješati jednu primarnu boju i jednu sekundarnu boju. Mogućnosti za tercijarne boje su beskrajne.
Dodatne boje
Komplementarne boje se nalaze direktno jedna naspram druge na krugu boja: crvena i zelena, plava i narandžasta, ljubičasta i žuta. U kombinaciji jedni s drugima čine upečatljiv kontrast. Takve kombinacije se obično koriste za isticanje određenih elemenata na web stranici.
Slične boje
Ove boje se nalaze jedna pored druge na krugu boja. Obično izgledaju veoma dobro zajedno. Upotreba ovakvih kombinacija boja izaziva osjećaj ugode kod posjetitelja vaše stranice.
Boje u različitim kulturama: simbolika
Kada birate gama za svoju web lokaciju, morate uzeti u obzir činjenicu da boja može imati razna značenja u različitim kulturama. Kulturni aspekt simbolike boja može biti vrlo jak, tako da morate biti svjesni koja je publika stranice.Hajde da saznamo šta boje znače u različitim kulturama:
- Kina: boja mladenke, sretno, slavlja
- Indija: čistoća
- Južna Afrika: boje žalosti
- Istok: radost (u kombinaciji sa bijelom)
- Zapad: uzbuđenje, ljubav, strast
- SAD: Božić (sa zelenom), Valentinovo (sa bijelom)
- Hebrejski: žrtva, grijeh
- Japan: život
- Hrišćanstvo: žrtva, strast, ljubav
- Feng Shui: Jang, vatra, sreća, poštovanje, zaštita, vitalnost, novac, priznanje
- Evropa: mirno
- Iran: žalost, boja neba i duhovnost
- Kina: besmrtnost
- Hinduizam: boja Krišne
- Judaizam: Svetost
- Hrišćanstvo: Hristova boja
- Katolicizam: boje Marijine odjeće
- Bliski istok: zaštita
- U svijetu: boja sigurnosti
- Feng Shui: Jin, voda, spokoj, ljubav, iscjeljenje, opuštanje, povjerenje, avantura
- Zapad: tuga, depresija
- Evropa: sreća, nada, radost, kukavičluk u opasnosti, slabost
- Azija: boja carstva
- Egipat: žalost
- Japan: Hrabrost
- Indija: trgovci
- Budizam: mudrost
- Feng Shui: Jang, Zemlja, povoljno, sunčeve zrake, toplota, kretanje
- Evropa: jesen, žetva, kreativnost
- Irska: protestanti (religiozni)
- SAD: Noć vještica (sa crnom), jeftina roba
- Hinduizam: šafran (narandžasta breskva) sveta boja
- Feng Shui: Jang, Zemlja, ciljevi, povećava koncentraciju
Brown
- Kolumbija: prepreka prodaji
- Australski Aboridžini: boje zemlje, svečani oker
- Feng Shui: Jang, Zemlja, industrija
Zeleno
- Japan: život
- Islam: nada, vrlina
- Irska: simbol cijele zemlje
- Evropa / SAD: proljeće, novo rođenje, dan sv. Patrika, Božić (sa crvenom bojom)
- SAD: novac
- Indija: Islam
- Feng Shui: Jin, drvo, liječenje, zdravlje, umirivanje
Violet
- Tajland: žalost (udovice)
- Katolicizam: smrt, žalost, raspeće
- Feng Shui: Jin, boja fizičkog i mentalnog iscjeljenja
Bijelo
- Evropa: brak, anđeli, doktori, bolnica, mir
- Japan: žalost, bijeli karanfil simbolizira smrt
- Kina: žalost, smrt,
- Indija: nesreća
- Istok: sahrana
- Feng Shui: Jang, Metal, Smrt, Duhovi, Tuga, Ravnoteža, Samopouzdanje
Crna
- Evropa: žalost, sahrana, smrt, pobuna, spokoj
- Tajland: nesreća, zlo
- Judaizam: nesreća, zlo
- Australski aboridžini: boja ljudi
- Feng Shui: Jin, voda, novac, uspjeh u karijeri, prihod, stabilnost, emocionalna zaštita, snaga
Značenje boja
Pogledajmo kako se svaka boja osjeća i pogledajmo neka gotova rješenja.Uglavnom povezan sa strašću, hrabrošću i željom. Crvena je boja ljubavi, snage, energije, vodstva i uzbuđenja. Ovo je jaka boja i trebali biste biti svjesni nekih njenih negativnih emocija: opasnosti, tjeskobe.
Strpljenje, mir, smirenost, pouzdanost, ljubav, stabilnost. Jedna od najomiljenijih boja, posebno za muškarce. Povezan je sa stabilnošću i dubinom, profesionalnošću, povjerenjem.
Boja se najčešće povezuje sa živahnošću. Energičan, daje osećaj sreće. Osim toga, povezuje se sa radoznalošću, zabavom, radošću, inteligencijom, oprezom.
Vedrina i kreativnost. Povezan sa prijateljstvom, samopouzdanjem, razigranošću, hrabrošću, snagom.
Violet
Tradicionalno povezan sa moći, plemstvom i bogatstvom. Mudrost, nezavisnost, plemenitost, luksuz, ambicija, dostojanstvo, magija i tajne.Boje igraju veliku ulogu u web dizajnu. Da biste pravilno odabrali shemu boja za web lokaciju, postoje posebne usluge. Siguran sam da svaki web dizajner ima barem jedan u svojim bookmarkovima.
Ponekad sjedite i razmišljate o tome koju nijansu plave odabrati kao glavnu za stranicu, malo svjetliju ili malo svjetliju, ili možda tamniju ... I još uvijek trebate pokupiti dodatne za nju. Naravno, možete to učiniti na oko, ali bolje je koristiti neku od posebnih usluga.
Neću govoriti o teoriji boja (ovo je preobimna informacija), već ću jednostavno ovdje objaviti usluge koje imam u svojim bookmarkovima i koje koristim.
Prijatelj sam sa ovim instrumentom dugi niz godina. Najprikladniji alat za biranje boja (po mom mišljenju). Ima mnogo dodatne funkcije. Na primjer, možete vidjeti primjer svijetle i tamne stranice s odabranim bojama.
Moguće je procijeniti kako će osobe s daltonizmom i drugim oštećenjima vida vidjeti vašu shemu boja. Možete odabrati boje sigurne na webu.
Adobe Kuler je drugi web alat koji često koristim. Izbor šeme boja je skoro isti kao na prethodnoj stranici, ali mi se ne sviđa zbog toga. Osim što možete sami da kreirate šeme boja, možete pregledati i koristiti šeme koje su kreirali drugi ljudi.
Da biste to uradili, kliknite na dugme u gornjem levom meniju "Gledanje". I vidjet ćete galeriju svih vrsta kombinacija boja.
Ovaj alat je malo sličan Colorschemeu, ali ima manje mogućnosti, ali je moguće vidjeti kako će blokovi boja izgledati.
Jedva koristim ovu stranicu, ali pošto je već imam u svojim bookmarkovima, odlučio sam da je dodam.
Sljedeće dvije stranice generiraju paletu od slike po vašem izboru. to je magija :)
Vi odaberete bilo koju sliku čije boje volite, servis je analizira i daje vam paletu boja. Ove dvije stranice se razlikuju samo po tome kako im pružiti sliku.
Ova stranica treba skinuti sliku sa vašeg računara.
Veoma zgodan birač boja. Zasnovan na principu "Sviđa mi se - Ne sviđa mi se".
Kao što naziv govori, ovdje možete odabrati boje za sada trendi, ravni dizajn. Stranica je zanimljiva po tome što je odabirom palete možete preuzeti za programe Corel i Photoshop.
Drugi modni trend je dizajn materijala. Ova stranica pomaže u odabiru kombinacija boja za UI (korisnički interfejs). Osim toga, stranica ima veliki skup ikona.
18.08.16. 28.2KZadatak odabira sheme boja za web mjesto može se činiti nemogućim, pogotovo ako ne razumijete i niste baš dobri u kombinacijama boja:
Ako sve prođe kako treba, vaša stranica će izgledati skladno. Ako ne, dobićete sliku u stilu horor filma!
Ako uopće ne koristite boju na svojoj web stranici, ona će izgledati neprivlačno i brzo zaboravljena. Ako pretjerate s bojom, stranica će izgledati prefinjeno.
Morate odabrati pravi predložak i paletu boja za buduću stranicu. Ova dva zadatka mogu biti možda najteža prilikom kreiranja sajta.
Poznavanje samo nekoliko pravila neće učiniti odabir boja tako teškim.
Nakon čitanja ovog članka naučit ćete kako:
- Odaberite najprikladniju boju za stranicu i lični brend;
- Kako kombinirati tonove da biste postigli skladnu shemu boja;
- Odaberite najbolju boju pozadine;
- Koristite akcente u boji samo tamo gdje je potrebno.
Kako boja utiče na percepciju vaše web stranice i brenda?
Ako vas zamolim da razmislite o Coca-Coli, šta vam prvo padne na pamet? Najvjerovatnije će se crveni logo Coca-Cole pojaviti u vašoj mašti:
Prilično je teško zamisliti ovo piće i ne povezati ga s crvenom bojom. Crvena je toliko snažno povezana sa brendom da je važna kao i samo poznato piće.
Crvena u šemi boja nosi dvije važne poruke:
- Jarko crvene naljepnice zaista se ističu od ostalih na pultovima sa sodom.
- Svaka boja izaziva određene emocije. Kada vidimo crvenu boju, imamo podsvesni osećaj uzbuđenja, ljubavi i strasti. Ovo su osjećaji koje Coca-Cola želi da izazove svojim pićima:
85% kupaca priznaje da je glavni razlog kupovine proizvoda bila njegova boja.
Svijest o brendu se povećava za 80% kada se koristi boja.
3 koraka do pravilne upotrebe boja na vašoj web stranici
Prilikom izrade dizajna web stranice potrebno vam je:
- Odaberite prevladavajuću boju za svoj brend;
- Odaberite nekoliko akcentnih nijansi da biste stvorili shemu boja;
- Odaberite boju pozadine da dovršite svoj dizajn.
1. Odabir dominantne boje
Da li je dominantna boja vašeg brenda crvena, poput Coca-Cole? Pomoći će u izazivanju potrebnih emocija kod posjetitelja resursa, izaziva osjećaj uzbuđenja, ljubavi i strasti kod ljudi.
Ova boja je prva stvar na koju bi ljudi trebali pomisliti kada pomisle na vašu kompaniju. Ako već imate logo, pobrinite se da sadrži glavnu boju vašeg brenda.
Kako odabrati pravu boju
Velike kompanije ne biraju slučajno jednu ili drugu shemu boja za stranicu. Ovo je svjestan izbor koji je dio brendiranja i marketinga.
Svaka boja privlači različitu grupu kupaca, a može čak i uticati na njihov izbor.:
Crveno-narandžasta, crna i jarko plava privlače impulzivne kupce. Takve sheme boja često se mogu naći u lancima brze hrane, trgovinama odjeće i poklonima.
Tamnoplava i tirkizna privlače kupce s ograničenom količinom novca. Ove boje se mogu naći u bankama i velikim robnim kućama.
Grimizna, azurna i ružičasta privlače klasične kupce. Uobičajeno u prodavnicama odeće.
Koristite kombinacije različitih boja kako biste privukli kupce koji su vam potrebni.
Posebno smo kreirali infografiku vizualnih shema boja kako bismo vam olakšali odabir dominantne boje za vaš brend:
Koju boju koristiti za svoju web stranicu?
Zelena predstavlja bogatstvo, zdravlje, mir i prirodu. Oči najlakše percipiraju ovu boju i kao rezultat toga se opušta. Zelena je druga najomiljenija boja i za muškarce i za žene.
Žuta je simbol mladosti, optimizma i vedrine. Često se koristi za privlačenje pažnje. Žuta također može uzrokovati napetost, pa je koristite u malim količinama.
Narandžasta je povezana sa prijateljstvom, oduševljenjem i kreativnošću. Stimuliše aktivnost kod ljudi. Na primjer, potiče vas da kupite proizvod ili se pretplatite na bilten. Ova boja privlači impulzivne kupce.
Crvena simbolizira strast, uzbuđenje, energiju i opasnost. Često se koristi za stvaranje hitne potrebe za kupovinom u percepciji ljudi. Izaziva jake emocionalne reakcije. Koristi se u restoranima za povećanje apetita.
Ružičasta je ženstvena, slatka, nevina i romantična. Često se koristi za pružanje privatnih usluga i robe djevojkama i ženama.
Ljubičasta je simbol veličine, bogatstva, uspjeha i mudrosti. Često prisutan u kozmetici. Deluje smirujuće na ljude.
Plava je pokazatelj pouzdanosti, sigurnosti, stabilnosti, mira i spokoja. Često ga koriste banke i velike kompanije. Plava boja je najprijatnija i za muškarce i za žene.
Siva u shemi boja predstavlja neutralnost, jednostavnost, smirenost i logiku. Povezuje se s tehnologijom, proizvodnjom, preciznošću, kontrolom, kompetencijom, pa čak i iskustvom.
Crna je boja uticaja, luksuza, iskustva i elegancije. Često se koristi za promociju luksuzne robe i povezuje se s profesionalnošću, snagom i preciznošću.
Da li su vaša ciljna publika mladi i energični kupci? Ili iskusniji ljudi sa solidnom zaradom? Da li je vaš proizvod (usluga) više namijenjen muškarcima ili ženama? Da li je pogodan samo za određenu starosnu grupu?
Nije svaka boja prikladna za predstavljanje vašeg poslovanja. Na primjer, ako prodajete prostirke za jogu, ljubičaste ( bogatstvo i veličanstvenost) i crna (snaga i luksuz) - ne najviše najbolje opcije. Zelena ti pristaje zdravlje, mir), siva ( jednostavnost, spokoj), plava ( mir, spokoj), ili možda čak i crvena ( strast, energija).
Razlika u percepciji boja između muškaraca i žena
Kome je vaša stranica uglavnom namijenjena, muškarcima ili ženama? Ili možda oboje?
Svijetle i prigušene sheme boja za web lokaciju
Muškarci preferiraju jarke boje, dok žene preferiraju prigušene.
Eksperiment je pokazao da općenito muškarci i žene jednako reagiraju na svijetle i tamne nijanse. Ali pokazalo se da žene više gravitiraju prigušenim nijansama, a muškarci svijetlim.
ahromatske boje
Po pravilu, muškarci više vole ahromatske boje nego žene. Ahromatske boje su bijela, crna i sve nijanse sive.
Svijetle i tamne nijanse
Žene preferiraju svijetle boje. Razlog tome je njihova pojačana percepcija određenih boja.
Žene
Plava, ljubičasta, zelena.
Narandžasta, smeđa, siva.
Muškarci
Najpoželjnije boje: plava, zelena, crna.
Najmanje preferirane boje: braon, narandžasta, ljubičasta.
Kombinacijom i upotrebom boja koje više vole muškarci, žene ili oboje, može se utjecati na njihovu podsvjesnu percepciju brenda.
Prema istraživanju sheme boja, i muškarci i žene vole zelenu i plavu. I jedni i drugi ne vole narandžastu i smeđu. Ako želite privući pažnju i muškaraca i žena, morate koristiti plavu ili zelenu kao glavnu boju.
Izbor boje za vaš brend ili proizvod također može ovisiti o utisku koje vaši kupci žele ostaviti na druge.
Ljudi često kupuju određenu robu ili usluge kako bi ostavili određeni utisak na druge.
Mnoge odluke su odraz onoga što osoba misli o sebi i kako želi da se pojavi u očima drugih. Ovo će drugi ljudi pomisliti kada razmišljaju o ovoj osobi:
Dakle, ako želite da ljudi koji vole prirodu kupe vaš proizvod, koristite zelenu u HTML shemi boja. Želite li privući ljude koji se osjećaju mlado i samopouzdano? Koristite žutu. Ako vas zanimaju ljudi koji žele izgledati solidno i bogato, koristite crnu.
Je li sada jasno?
Zamislite idealnog predstavnika ciljana publika. Kako želi da se pojavi drugim ljudima?
Da, utiče na psihologiju. Ali ovo morate razumjeti kako biste stvorili uspješan brend.
Kako koristiti glavnu boju na vašoj web lokaciji
Sada kada ste se odlučili za glavnu boju svoje stranice, morate razumjeti kako je pravilno koristiti. Boja privlači veliku pažnju, stoga ne pokušavajte da je koristite svuda gdje možete.
Preovlađujuću boju koristite samo na onim mjestima na koja želite skrenuti pažnju korisnika ili ih potaknuti na određenu radnju.
Na primjer, nazovite broj telefona, popunite formular, pretplatite se na ažuriranja itd.
Dominantna boja bi trebala biti privlačna, naglašavajući detalje na koje želite da korisnici obrate pažnju:
Gdje koristiti preovlađujuću boju na stranici?
- Logo;
- Kartice menija;
- dugme "Pozovi";
- Važna informacija;
- Naslovi i naslovi;
- Dugmad.
2. Izbor akcentnih boja
Da biste svoj dizajn učinili zanimljivijim i profesionalnijim, morate koristiti gotove akcentne sheme boja za web lokaciju. Oni mogu istaknuti dijelove vaše stranice koji su vrijedni pažnje: citate, dugmad ili podnaslove.
Mnogi ljudi se boje koristiti nekoliko boja odjednom, jer nije uvijek intuitivno jasno da li se dobro kombiniraju. Ljudi misle da da bi naučili kako ih kombinirati, potrebno je ne samo temeljito proučiti teoriju boja, već i napraviti mnogo grešaka.
Postoji lakši način koji je dostupan svima. Ovo je program za usklađivanje boja koji će vam pomoći da uskladite sheme boja baš kao što to rade profesionalci!
Kako koristiti program za odabir akcentnih boja
Nakon što se odlučite za dominantnu boju, nema ništa lakše nego odabrati akcentne boje pomoću programa kao što je Adobe Color CC Tool:
Evo kratkog vodiča koji će vam pokazati kako kreirati shemu boja na jedan od dva načina:
- Na osnovu dominantne boje
Korak 1. Prvo saznajte kod za vašu dominantnu boju. Na primjer, na web stranici ColorPicker.com. Šifra boja je naznačena u pravougaoniku direktno iznad kvadrata sa paletom boja.
Nakon kopiranja koda sa ColorPicker.com, zalijepite ga u " NE X» alat Adobe Color . Obavezno zalijepite kod u srednju kolonu:
Zalijepite preovlađujući kôd boje vaše web stranice u okvir U SREDINU.
Jednom kada odredite boju, Adobe Color je prikazuje na ekranu zajedno sa drugim komplementarnim bojama.
Korak 2. Na gornjoj lijevoj strani vidjet ćete pravougaonik sa sljedećim shemama boja:
- Sequential;
- jednobojni;
- trokutast;
- komplementarni;
- kompozitni;
- Sjenila.
Eksperimentirajte s različitim shemama boja da vidite koja je prava za vas. Sve boje koje predlaže program su dobro kombinovane jedna s drugom.
Korak 3 Još više poboljšajte šemu boja pomicanjem jednog od birača boja.
Važno je da ne pomerate kratki pokazivač koji se nalazi u sredini tako da vaša dominantna boja ostane konstantna:
CMS i graditelji web stranica vam omogućavaju da ubacite kodove boja ( HEX) da istaknete bilo koji dio vaše stranice:
Kopirajte kodove boja ( HEX) za šemu boja vaše web stranice.
- Na osnovu fotografije koja vam se sviđa
Ponekad je lakše potražiti rješenja u boji na internetu i biti inspirirani njima.
Možete postaviti bilo koju fotografiju koju želite u Adobe Color i program će automatski generirati shemu boja na osnovu nje.
Korak 1. Otpremite fotografiju:
Kliknite na ikonu kamere da otpremite sliku.
Korak 2. Odaberite jednu od pet ugođaja boja:
- raznobojan;
- Svijetao;
- prigušeno;
- Zasićen;
- Dark.
Eksperimentirajte s raspoloženjima u boji da vidite koja vam je bliža:
Odaberite raspoloženje u boji.
Korak 3. Učinite shemu boja još promišljenijom pomicanjem jednog od birača boja oko slike:
Pomjerite pokazivače ako želite odabrati druge komplementarne boje.
Korak 4. Predložena paleta boja nalazi se ispod slike. Evo kako odabrati shemu boja za svoj web dizajn.
Da vidite kodove ( HEX) boje, kliknite na točak boja koji se nalazi u gornjem desnom uglu:
Kliknite na točak boja da vidite kodove boja:
Kopirajte kodove boja ( HEX) za vašu šemu boja.
Gdje postaviti sekundarne boje
Detalji lokacije istaknuti pomoćnim bojama nisu glavni akcenti. Ali i dalje se ističu. Na primjer, pomoćne boje se mogu koristiti za isticanje podnaslova, dodatnih dugmadi, dijaloških okvira, popunjavanje pozadine itd.
Odaberite jednu ili dvije komplementarne boje. Ako ih ima više, korisnicima će biti teško da se fokusiraju na jednu stvar:
Gdje koristiti sekundarne boje na vašoj web lokaciji?
- Aktivno dugme menija;
- titlovi;
- Odvajanje sekundarnih informacija.
- Odabir boje pozadine
Da li ste ikada morali da farbate zidove u svojoj kući?
Ako da, onda imate iskustva i znate da odabir sheme boja nije lak zadatak.
Boja treba da bude dovoljno mirna da možete satima biti u prostoriji i boja vas ne pritiska. Istovremeno, ne želite da boja bude dosadna i da soba izgleda kao bolnica.
Odabir boje pozadine za vašu web stranicu ne razlikuje se mnogo od odabira boje za svoju sobu!
Kako odabrati pravu boju pozadine
Da birate boju za modernu prodavnicu odjeće i seosku kuću, da li biste odabrali istu boju?
Očigledno ne. Ove dvije prostorije služe različitim namjenama.
Na primjer, za trgovinu odjećom, bolje je koristiti svijetle boje kako biste privukli pažnju kupaca na police za odjeću. Neophodno je da boja zidova bude u suprotnosti sa bojom polica sa odjećom, a kupci po ulasku u radnju odmah shvate na šta treba obratiti pažnju.
I za poređenje: kada dođete u svoju seosku kuću, vjerovatno planirate da se opustite. Želite da boja zidova i uređenje vašeg doma djeluju umirujuće i opuštajuće.
Boja pozadine vašeg sajta zavisi od toga na šta želite da korisnici obrate pažnju.
Jednostavno rečeno, boja pozadine direktno zavisi od cilja koji težite kreiranju sajta.
Tip 1 – Resursi s puno sadržaja ili online trgovina
Jeste li primijetili da informativni resursi i online trgovine često koriste bijele ili neutralne sheme boja za web stranicu?
To je zato što je svrha ovih resursa promicanje ideja ili proizvoda.
U takvim slučajevima, fokus bi trebao biti na proizvodima ili uslugama, a ne na dizajnu stranice. Boja pozadine je samo osnova da sadržaj učini vidljivijim i čitljivijim.
Za informativne resurse i online trgovinu najbolje je koristiti svijetlu pozadinu, svijetle dominantne i sekundarne boje. Svjetlina preovlađujućih i akcentnih boja garantuje jedinstvenost stranice i omogućava vam da istaknete detalje. U isto vrijeme, neutralna shema boja pozadine za prodajnu stranicu pomaže korisniku da se fokusira samo na sadržaj ili proizvode.
Tip 2 - Korporativne stranice i usluge
Tokom stvaranja korporativni resurs jedan cilj je promocija robe ili usluga.
U zavisnosti od toga koja je svrha vaše stranice, boja pozadine bi trebala biti različita.
Promocija brenda
Ako želite stvoriti nezaboravan imidž kompanije, koristite različite nijanse dominantne boje ili boje brenda za pozadinu.
To je zato što boja direktno utječe na svijest o brendu ( Sjećate li se primjera Coca-Cole?) Kada koristite različite nijanse boje vašeg brenda kao pozadinu, poboljšavate je i činite je nezaboravnijim za kupce.
Ako je dominantna boja vaše web stranice provokativna, onda korištenje nje kao pozadine može negativno utjecati na percepciju korisnika. U takvim slučajevima koristite nijanse najnižeg intenziteta:
Promocija usluge
Ako vam je cilj skrenuti pažnju na uslugu ili portfolio vašeg rada, koristite bijelu ili neutralnu boju pozadine.
Kao iu slučaju sa informacionih resursa, ne morate preopteretiti stranicu i odvratiti korisnike od sadržaja koji želite prenijeti. Koristeći bijelu ili svijetlu shemu boja pozadine za svoju web stranicu, privući ćete pažnju na sadržaj:
Tip 3 – Elegantne i kreativne stranice s puno grafike
Ako ćete napraviti web stranicu vezanu za kreativnost ( moda, dizajn, restoran, ljepota, itd.), za vas nema ograničenja.
Za ovu vrstu sajta ne postoje pravila za korišćenje boje pozadine. Traku menija možete učiniti crnom da dodate dramu. Ili kreirajte pozadinu koristeći sve dugine boje kako biste razveselili posjetitelje stranice:
Pokušajte se uvijek držati jednog pravila: nikada ne birajte boju pozadine koja otežava čitanje teksta na njoj.
Savršena boja pozadine omogućava da se sadržaj istakne i da se skladno stapa s primarnim i sekundarnim bojama. Prava boja pozadine čini korisničko iskustvo na stranici ugodnim.
Kada ste u nedoumici, koristite bijelu ili svijetlosivu pozadinu. Možda nisu najinspirativniji, ali ćete osigurati da vaš sadržaj bude jasno vidljiv.
Zaključak i rezultati
Nemojte se voditi ličnim preferencijama ili njuhom prilikom odabira sheme boja za web lokaciju.
Koristite boje koje se sviđaju vašoj potencijalnoj publici i tada će resurs dugo ostati u pamćenju ljudi. Ovo će vas izdvojiti od vaših konkurenata.
Izbor palete boja nikako ne bi trebao biti slučajan. Ovo je skup radnji koje treba poduzeti:
- Odaberite pravu dominantnu boju za stranicu;
- Odaberite ispravne sekundarne boje za dominantnu boju;
- Odaberite odgovarajuću boju pozadine.
Ova publikacija je prijevod članka " Kako odabrati dobru shemu boja za svoju web stranicu» pripremio prijateljski projektni tim
Dobro loše
Učitavanje...