TEORIJABOJANAWEBU

Osnove web dizajna i kombinacija boja za sajt

Ne bi trebalo da birate kombinaciju boja po principu – ovo mi izgleda lepo. Bitno je da budu zadovoljene teorijske osnove web dizajna. Takođe, jako je važno uzeti u obzir tržišni segment kojem se taj sajt obraća

.

Iako zvuči jednostavno, izbor boja zahteva ozbiljan pristup. Vreme je bitanfaktor

Korisnici podsvesno donose sud o nečemu na osnovu prvog utiska,

Boje utiču i na emociju korisnika

Osnove web dizajna i kombinacija boja za sajt

Izbor i kombinacija boja nije samo stvar ukusa dizajnera, već se iza toga krije cela jedna nauka od teorije boja do psihologije boja.

Izbor boja utiče na poimanje vrednosti i stvaranje percepcije o samom brendu.

Teorija boja podrazumeva pravila za kombinovanje boja i vizualne efekte te za samu kombinaciju boja, što je neophodno znati.

Da biste odabrali prave boje za Vaš brend, treba poznavati i razumeti boje, te znati kako napraviti odgovarajuću kombinaciju boja.

Osnove web dizajna i kombinacija boja za sajt

Odabir pravih boja pri kreiranju web stranica je nešto štozahevapuno strpljenjai eksperimentiranja, uz neverovatanutrošak vremena.

Ljudska percepcija boja je u velikoj meri je subjektivna, patako i ne postoje jasna i stroga pravila upotrebe boja u webdizajniranju. dizajneri moraju biti oprezni i uzeti u obzirkulturne aspekte značenje i simboliku boja.

Osim boje, načitljivost utiče i veličina i izbor fontakojiolakšavajačitljivost i uočljivost samog teksta.

UVOD

Kada se priča o web dizajnu i bojama, misli se na pozadinu web sajta, navigaciju, logo, dugmad, banere, boje fontova i sve ostale elemente na koje korisnik nailazi u susretu s web sajtom.

Jedan od ključnih faktora pravilan je odabir boja, pozadine, teksta, naslova, linkova,....

Upravo zbog toga svaki dizajner treba da zna o ‘’psihologiji boja’’, jer su one usko povezane uz osećanja i percepciju.

Ako koristite previše boja, izlažete se većem riziku nego ako ih koristitepremalo. U slučaju korišćenja previše boja, stranica može izgledatipretrpano, pa se sadržaj koji želite istaknuti lako izgubi, i sam korisnik težepronalazi potrebne informacije.

UVOD

Mislite li da je slučajnost što su boje McDonald’s-a crvena i žuta?

Mislite li da je slučajnost što je boja Ferrari-ja crvena ?

Boje utiču na ljudsko ponašanje i raspoloženje. Ako znamo da odluci da nešto kupimo ili ne kumuju i faktori kao što su emocije i raspoloženje, onda postaje jasnije kako boje mogu da utiču na potrošačko ponašanje.

Pronalaženje pravih boja koje će ući u izgled svega što je važno za vaše poslovanje – od logoa do on line prodavnice – važan je zadatak i ne sme biti prepušten slučaju. Osim toga, ne postoji univerzalno primenljivo rešenje –nešto što važi za nekog drugog, pa se zato odnosi i na vas.

Opšta pravila postoje, ali ona samo postavljaju granice, dok ste u okviru tih granica slobodni da sami istražujete šta je ono što je optimalno za vaše poslovanje.

VEKTORSKI FORMAT

Dizajneri će od najčešće od klijenata uvek zahtevati logo u vektorskom formatu, da bi od nečeg krenuli jer često korisnici nisu sigurni šta žele. Specifikacija, specifikacija i specifikacija.

To znači da logo treba imati jednu od najčešćih extenzija: .(ai, .eps ili .cdr) da bi se mogao izdvojiti od pozadine i povećati na potrebnu veličinu bez da izgubi na kvaliteti.

Što će reći da Vi trebate kada vam neki grafički dizajner uradi logo, od njega uvek tražiti da vam da sirovi materijal u nekom od ovih formata kako bi kasnije po potrebi to mogli deliti web dizajnerima, štamparima. itd

UVOD

Kako izabrati pravu boju za Vaš veb sajt?

Ova odluka nije jednostavna i ne možemo se osloniti na boje koje mipreferiramo. Za ovu odluku treba uzeti u obzir nekoliko faktora: želje iočekivanja samog naručioca sajta, te same korisnike, psihologiju boja, izborkonkurentskihsajtova.

Trenutno se na web-u primećuje dominacija po nekimistraživanjim- kombinacijaplave boje i bele boje gde je plava boja primarn.

Voditi računa da Web boje nisu jednake kao i boje u štampanimmaterijalima.

Teorija boja je studija o tome kako različite boje mogu izazvati određenjeemocionalne iličakifizičke reakcije kod ljudi.

UVOD

Kako izabrati pravu boju za Vaš veb sajt?

Ukoliko niste dizajner, onda verovatno ne razmišljate o tomečesto-

Do koga želite da doprete i ko su vaši ciljni kupci? Proanalizirajte dobrovaš tržišni segment pre nego što se odlučite za paletu boja.

Odabir dobrih boja je važan za stvaranje vizuelnog identiteta i konzistentnostisajta. Na primer, upotreba svetlih boja u navigaciji i korišćenje drečavih boja usadržajuće učiniti opcije u navigacionommeniju teškimzačitanje.

Kada se pogledaju na primer društvene mreže kao što su Instragram, Facebook,Twitter, Linkedin, Google,Tumblr, na sajtovima koriste plavu boju jer on asocirana mir, opuštanje i sigurnost.

plava – poverenje, lojalnost, snaga; koriste je Facebook, Paypal, Dell

U nekimistraživanjima nekih autora oni tvde da je plava boja dobra za daltoniste

UVOD

Slika 1.0 Top 100 sajtova i njihove primarneboje

TeorijabojaKada želite da brendirate vaše proizvode, odabir boje koja se koristi u dizajnu je ključni faktor. Različite boje simbolizuju nešto drugo u svakoj zemlji i izazivaju različite emocije.

Krug boja zasnovan na primarnim bojama – crvenom, žutom i plavom je tradicionalan u oblasti umetnosti. Isak Njutn je 1666.godine razvio prvi kružni dijagram boja. I Gete je dao svoje viđenje.

Od toga vremena, naučnici i umetnici su proučavali i dizajnirali različite varijacije ovoga koncepta

Prikaz Geteovogtočka

Teorijaboja

Teorija boja obuhvata mnoštvo definicija i pojmova, međutim, postoje tri osnovna pravca koja posmatraju teoriju boja i daju jasnu definiciju iste:

•Točak boja (Color Wheel)

•Harmonija boja (Color Harmony)

•Kontekstna upotreba boja

Teorije boja stvaraju logičke strukture kojim se opravdava upotreba određenih boja na osnovu subjektivnog osećaja.

TeorijabojaTeorija boja je skup pravila po kojima se boje slažu i mešaju. Najlakši način učenja teorije boja je uz pomoć točka boja koji je osmislio Njutn.

T.

Tople boje se nalaze sa gornje strane točka boja. Oneuglavnom imaju uzbuljiv efekat, ne preporučuje sekorišćenje samo jedne tople boje jer mogu previšestimulisati korisnika i u krajnjem slučaju izazvati bes. Radibalansiranja preporučuje se dodavanje i boje koja pripadadrugoj grupi. Tople boje su one koje podgravaju i oživljavajuatmosferu. Tu spadaju žuta narandžasta i crvena

Hladne boje se nalaze sa donje stranje točka boja. Njihov glavniefekat je da mogu da umire posetioca. Kao i kod toplih boja ihladne se ne preporučuju kao jedini izbor pri odabiru boja jermogu izazvati utisak hladnoće i udaljenosti.

Hladne boje

Teorijaboja

Primarne boje: crvena, žuta i plava. U tradicionalnoj teoriji boja, primarne boje su tri pigmentne boje koje ne mogu biti izvedene ni jednom kombinacijom ostalih boja i sve ostale boje su izvedene iz osnovnih boja.

STočakboja

Teorijaboja

Sekundarne boje: zelena, naranžasta i ljubičasta. To su boje dobijene mešanjem osnovnih boja.

Tercijarne boje: žuto-narančasta, crveno-narančasta, crveno-ljubičasta, plavo-ljubičasta, plavo-zelena i žuto-zelena. Ovo su boje koje nastaju kada mešamo primarne i sekundarne boje, pa se zbog toga nijansa sastoji od dve reči, poput plavo-zelena ili crveno-ljubičasta.

Jedan od prilično često zastupljenih sistema boja je poznat i kaoRGB. Ovaj termin potiče od prvih slova reči kojima se uengleskomjeziku označavaju crvena, zelena i plava boja, to jestRed, Green i Blue.

Kada je u pitanju RGBsistem boja, reč je o takozvanomaditivnom sistemu mešanja boja. Zapravo se u tomslučajukombinje svetlost svake od ovih boja, a osnovna primenaovakvog načina mešanja boja je na prvommestu vezana zafinalizaciju određene fotografije ili drugog sadržaja, a kako bion bio prikazan na televizijskomekranu ili monitorukompjutera, tableta ili nekog drugog uređaja. Primenompravilaovog sistema, to jest kombinovanjemsvetlosti svake odnavedenih boja na različite načine se dobijaju različite nijansepomenutih, ali i mnoge druge boje.

Obzirom na to da je potrebno ukombinovati navedene tri boje,a kako bi se dobile sve ostale, to je i sasvim jasno da se njihovakoncentracija kreće u rasponu od 0 do 100 procenata, aprevedeno u računarski zapis to podrazumeva od 0 do 255

Što se tiče označavanja, recimo bela boja se označava kao255/255/255, dok je 0/0/0/ oznaka za crnu boju. Još jedanprimer jeste i dobijanje zlatne boje, a koja podrazumevakombinaciju crvene i zelene, dok plava nije uključena.Preciznije govoreći, odnos između crvene i zelene je u tomslučaju 255 prema 215, a tada plava ima oznaku 0, pa se i ovaboja beleži na sledeći način 255/215/0.

Spektar boja koji se dobija primenom RGB sistema je izuzetnoveliki, a znatno je veći od onoga koji omogućuje drugizastupljeni sistem, takozvani CMYK.

CMYKSkraćenica CMYK predstavlja opisne nazive boja: cyan, magenta, yellow, key.

Ukoliko proverite, videćete da i vaš štampač ima iste oznake na kartridžu, tako da možete lako da zaključite da se ovaj sistem koristi za štampane materijale kao najpribližnija kolorna šema. Za razliku od RGB-a, ovde je sistem takav da dodavanjem boja dolazite do čisto crne boje.

Vrednosti se kreću od 0 do 100, pri čemu je 100 sasvim crna, a 0 sasvim bela boja. Teorija je takva da se uklapa sa načinom štampe, odnosno –što više puta odštampate isto vizuelno rešenje na istom papiru, ono će postajati sve tamnije, dok potpuno ne pocrni.

Međutim, da bi se moglo pristupiti štampanju materijala bilo koje vrste prilikom čije obrade se koristi RGB sistem boja, mora se pre toga pristupiti i konvertovanju u CMYK sistem, jer se tako jedino može videti kako bi otprilike taj sadržaj trebalo da izgleda nakon što se odštampa.

Ovaj sistem boja se sprovodi na pozadini koja je crne boje na monitorima, a dobro je poznato da u toj boji nema svetla, pa tako praktično rečeno, nema ni boje. RGB sistem boja je, dakle baziran na takozvanim primarnim bojama, odnosno osnovnim, a što su u tom slučaju crvena, zelena i plava.

Zatim se iz njih dobija mnogo nijansi pomenutih boja, ali i one koje se smatraju sekundarnim.

Kada se u određenoj meri pomešaju zelena i crvena boja dobijajuse brojne nijanse žute, dok kada se izmešaju crvena i plavaprimetna je ljubičasta i veliki broj njenih nijansi. A ako se u istomprocentu budu pomešale sve tri boje koje RGB sistem bojauključuje, dobija se bela, to jest snop bele svetlosti

Posebna tehnika mešanja boja, CMYK se primenjuje prvenstvenou oblasti offset štampe, a kada je potrebno odštampati određenisadržaj na papiru, odnosno plastici ili tkanini, te metalu i ostalimmaterijalima koji su u upotrebi u tom slučaju. Inače, međuštamparima je primena ovakvog sistema za mešanje boja poznatapod nazivom full color, odnosno puni kolor, a što u velikoj merigovori i o kvalitetu štampe koji se postiže njegovom primenom.

Oznaka ovog pojma je zapravo skraćenica koja je sačinjena od početnih slova naziva za svaku pojedinačnu boju koja se u tom slučaju koristi, a gde C predstavlja Cyan, odnosno tirkiznu, dok je M početno slovo reči Magenta, a čime se označava ciklama. Slovo Y je uzeto od reči kojom se označava žuta boja, to jest Yellow, dok je K skraćeno od reči Key, a ovim pojmom se predstavlja crna boja.

To je suptraktivni metoda mešanja boja, uzevši u obzir da nije moguće dobiti belu boju ako bi se sve one pomešale, jer se do bele boje stiže isključivo procesom supstrakcije, to jest oduzimanja.

Svakako je ovde vrlo značajno naglasiti i da se CMYK tehnika mešanja boja primenjuje isključivo kada se štampanje mora izvršiti na beloj podlozi. Dakle, uopšteno i teorijski govoreći, kada se pomešaju tirkizna, ciklama i žuta, dobiće se crna boja, ali je ona svakako dodatno uvedena u ovaj princip mešanja boja, a sa ciljem da se dobiju mnogo intenzivniji tonovi crne, te da bi kvalitet štampe, odnosno otiska bio mnogo bolji i postojaniji.

U pojedinim slučajevima se prilikom offset štampe čak dodaje i specifična, peta boja koja nosi naziv Pantone i definiše se prema posebnoj skali.

Kako da izaberete boju ?Morate pre svega da definišete određeni kontekst boja, jer jednaista boja u različitim okruženjima može poprimiti potpunodrugačiju nijansu.

Zato uvek razmišljajte o kontrastu i trudite se da ga kreirate, štagod da pravite.

Pimera radi, ukoliko radite na info-grafiku koji ima tamnupozadinu, Vaši grafici verovatno neće biti crni, već ćete izabratineku svetliju nijansu, kojaće se najbolje istaći na takvomvizuelnomrešenju

Kako da izaberete boju ?Obratite pažnju i na konkurentske sajtove

Možete da naučite puno i od konkurenata iz vaše industrije (oblasti u kome se radi dati web sajt)

Sada možete da:

1. Iskoristite sličnu kombinaciju boja

2. Uradite nešto sasvim suprotno i napravite nešto što sada nijeviđeno u odnosu na konkurente.

Analogne i komplementarne bojeAnalogne bojesu boje koje se nalaze jedna pored drugeu krugu boja i obično se slažu jedna sa drugom, npr.analogne boje plavoj su zelena i ljubičasta, dok suzelenoj analogne žuto-zelena i žuta.

Komplementarne boje u krugu boja su one koje senalaze jedna nasuprot drugoj i kada se kombinuju dajukontrast i ističu se međusobno. To su na primer plava inaranžasta, crvena i zelena

Slika CMYKmodelSlika RGBmodel

Označavanje boja u webuTri osnovne boje koje emituju ekrani pripadaju aditivnommodelu a to su crvena,

zelena i plava (RGB– red, green,blue).

Boje u web-u se prikazuju u heksadecimalnoj notaciji i taj broj izgleda ovako#RRGGBB

Ovo je šestocifreni broj koji sadrži tri bajta, od kojih svaki predstavlja jednuboju.

Najniža vrednost jednog izvora svetlosti je 0 a najveća 255 iliheksadecimalnoFF.

Ako se slova ili brojevi u sve tri boje svaki za sebe ponavljaju na primer ovako#00FF00onda semožeskratiti zapo jednu vrednost i to bi izgledalo ovako#0F0.

I ovako bi to izgledalo uCSS-u.

p {color:#CCFF66;}

Slika Osvnovne boje sa heksadecimalnim i RGBvrednostima

Nazivi svih boja u webu mogu da se koriste umestoheksadecimalnih ili RGB vrednosti:

U CSS3 je uvedeno HSL i RGBAoznačavanjeboja.

HSL je akronim za Hue, Saturation, Light. (prikazano na slici dole)

Parametri su u procentima a prvi je boja, zatimidu zasićenost isvetlina, četvrti je i kod RGBAi HSL-a transparentnost i njegovavrednost sekreće od 0 do 1 sadva decimalnamesta.

Slika Plava boja i njene heksadecimalne, HSL i RGBa vrednosti

Web safe boje

Nekada kada su kompjuteri mogli da podrže samo 256 boja uveden je standard za web boje. Taj sistem danas NIJE RELEVANTAN jer sada svi i računari i browseri podržavaju preko 16 miliona boja.

Primer značenja bojaBoja Pozitivni efekti Negativni efekti

Crvena ljubav,energija, snaga,moć

bes,opasnost, upozorenje

Roze zdravlje,sreća, ženstvenost, saosećanje

slabost,nezrelost

Žuta sunce, energija, kreativnost, sreća

neodgovornostnestabilnost

Narandžasta hrabrost, samopouzdanje, uspeh

neznanje, tromost

Zlatna bogastvo, prosperitet, vrednost, tradicija

pohlepa,

Primer značenja bojaBoja Pozitivni efekti Negativni efekti

Plava mir, bezbednost, inteligencija, poverenje, lojalnost

hladnoća,strah

Zelena novac, rast, plodnost, svežina, zaceljenje

zavidnost, ljubomora, krivica

Ljubičasta plemstvo,ambicija, luksuz

misterija

Tirkizna zaceljenje,zaštita, sofisticiranost

zavist

Siva glamur, elegancija,gracioznost, visokatehnologija

neiskrenost

Neutralne bojeNeutralne boje se odlično slažu i sa hladnimi satoplimpaletama.

Odlične su za pozadine u dizajnu i mogu da smanjeizraženost ostalih boja.

Crna stvara tamnije senke dok bela stvara svetlijenijanse.

Razmisliti o osobama koji su slabovidi, kako oni videkontrast boje na primer crne i bele boje

Primer značenja bojaBoja Pozitivni efekti Negativni efekti

Braon prijateljska,boja zemlje, dugovečnost

dogmatska, konzervativna

Bež pouzdanost, fleksabilnost

tupa,dosadna, konzervativna

Siva sigurnost, odgovornost, inteligencija

sumorna, tužna, konzervativna

Crna zaštitna, dramatična,stilska, formalna

smrt, zlo

Bela dobrota, nevinost, čistota, svežina,mir

zima,hladnoća, udaljenost, sterilnost

Primer -CRVENE BOJEZnačenje ove boje i reakcije ljudi na nju su uglavnomistesvuda. Psiholozi i istraživači se slažu da crvena uzbuđuje i daima svojai pozitivna i negativnaznačenja.

Plava boja - primerZnačenje plave se uglavnompovezuje sa smirenošću. Simbolika boja ječesto kontradiktorna pa je to i ovde slučaj. Plava takođe može da izazove itugu i usamljenost. Istraživanja kod nekih autora pokazujuda je plavanajomiljenija boja posebno kod muškaraca.

Tamnije nijanse kao što je mornarska plava (navy blue) se smatra zaizrazito mušku boju. Povezujesesaautoritetom, uspehom.

Plava je osnovna boja što znači da se ne može dobiti mešanjemdrugedve boje.

KAKO ODABRATI BOJE ?U svetu su opšte prihvaćene sledeće strukture za odabir boja (formiranje šeme boja)

•Triadic Color Scheme (Triadična šema)

•Compound Color Scheme (Komplementarna šema)

•Analogous (Analogna šema)

Analogna šema se sastoji od boja koje su jedna do druge natočku boja. Generalno se slažu i stvaraju komforni dizajn.Analogne boje sečesto nalaze u prirodi i prijaju ljudskomvidu.

Obično se bira jedna boja koja će biti dominantna idruga koja je pomoćna.

SlikaAnalogna paleta natočku boja SAnalogne boje sakontrastnim pozadinama

KomplementarnaKomplementarna šema se sastoji od boja koje su na suprotnimstranama točka, na primer zelena i ljubičasta, plava i žuta, crvena icijan. Kod ovakvih kombinacija se javlja jak kontrast posebno kadje zasićenost boja na maksimumu. Treba biti oprezan kod ovakvihšemada bi boje bile uskladu.

Slika Komplementarnašema na točkuboja

Slika Komplementarne boje na crnoj i belojpozadini

Podeljena komplementarnapaleta

Paletučine dve boje koje su susedne i jedna koja se nalazi na suprotnojstrani. I ova šema ima snažan kontrast. Preporučuje se početnicima jer jeteško napraviti greškusaovomkombinacijom.

Prikaz ove palete na točkuboja Bojepodeljene komplementarne palete na crnoj i belojpozadini

Trostrana paletaU ovoj paleti boje su na jednakoj udaljenosti jedna od druge. Kao i kod prethodnih i ovde se preporučuje korišćenje jedne boje kao glavne dok su druge dve pomoćne i služe zanaglašavanje.

Slike 4.20 Boje trostrane palete na crnoj i belojpozadini

Slike 4.19 Tostrana paletana točku boja

Dvostruko komplementarnaOvu kombinaciju čine dve boje i njihovikomplementi.

Slike 4.21 Dvostruko komplementarna paleta na točku boja

Slike 4.22 Boje dvostruko komplementarne paletena crnoj i belojpozadini

Uloga boje u korišćenjusajtaWEB dizajn , koji istovremeno mora obaviti nekoliko zadataka:

1. Stranica mora izgledati dobro.

2. Korisniku se mora omogućiti laku i jednostavnu navigaciju.

3. Što duže zadržati pažnju korisnika

4. Lagano navoditi posetioca u smeru željene konverzacije.

Oodličan veb sajt je idealna kombinacija tipologije, dizajna i palete boja (color scheme).

Odabir prave palete boja igra vitalnu ulogu u dizajnu i funkcionalnosti sajta pošto se može koristiti u interakciji sa posetiocima.

Uloga boje u korišćenjusajta Zbog toga i nije neobičan podatak da boje korišćene na web stranici imaju gotovo najveći uticaj na komunikaciju sa posetiocem sajta.

Pravom kombinacijom boja kompanija može povećati broj konverzija, a to znači više posetioca pretvoriti u klijente ili povećati broj prodaja na on line prodavnici.

Osnovni princip boja na web sajtovima je praktičnost. Pre nego što uopšte počnete razmišljati o tome na koji će način boja psihološki uticati na posetioce, oni moraju da mogu pročitati tekst na Vašoj web stranici. Boja, kao i veličina i izbor fonta direktno utiču na čitljivost.

Izbor savršene kombinacije boja je jedna od obaveza na kojoj će web dizajneri najviše vremena utrošiti.

Kada birate boje za svoj web dizajn, birajte pažljivo!

Pogledati Web sajtove

http://flatuicolors.com/

https://kuler.adobe.com/

http://colorschemedesigner.com/

http://www.pictaculous.com/