Free Web space and hosting from dzaba.com
Search the Web

SveZaWeb : Web Dizajn : Bojom o bojama -> Upotreba boja na Web-u [ Svetlost : Boje : Kolorne sema : Psihologija boja : Boje za Web ]
SveZaWeb SveZaWeb SveZaWeb SveZaWeb SveZaWeb
SveZaWeb SveZaWeb SveZaWeb Web Design + Development Tutorials and Articles SveZaWeb EMail | Pretraga | Rečnik    
SveZaWeb
SveZaWeb SveZaWeb Razvoj SveZaWeb SveZaWeb Dizajn SveZaWeb SveZaWeb Kreiranje SveZaWeb SveZaWeb Panorama SveZaWeb SveZaWeb Usluge SveZaWeb Poslednja izmena: 10.03.2003. g.
SveZaWeb  Osnove Dizajna | ProjektovanjeSadržaj | Upotreba slika | Boje | Redizajn
Web Design + Development Tutorials and Articles SveZaWeb Početna strana : Dizajn
Bojom o bojama
   
SveZaWeb SveZaWeb SveZaWeb SveZaWeb SveZaWeb

Sadržaj:

 


Web je živ medij koji pokušava na sve načine da privuče pažnju, boje predstavljaju muziku za naše oči, reflektuju naša osećanja. Kao u životu tako i u Web dizajnu, potrebno je usaglasiti boje Web prezentacije sa osećanjima koje treba da proizvedemo. One treba da reflektuju sam cilj Web prezentacije. Potrebno je dobro isbalansirati boje i raspored strane sa ostalim elementima radi kreiranje jedistvenog izgleda.

Svetlost

Sve oko nas koristi svetlost, ona sama predstavlja jednu formu elektromagnetnog spektra. Elektromagnetni spektar predstavlja kolekciju svih energija organizovanih u različite kategorije zasnovane na dužini talasa za svaki tip energije. Svaka forma elektromagnetnog talasa kreće se od jednog mesta ka drugom kao talas. Ovi talasi su slični talasima na vodi, samo što su mnogo, mnogo manji. 

Elektromagnetni talasi definisani su sa mnogo osobina, među koji je i dužina talasa. Dužina talasa predstavlja odstojanje od jedne tačke talasa do iste takve tačke talasa do njega. 

SveZaWeb
Slika1: Dužina talasa

Druga osobina talasa je frekvencija. Broj talasnih dužina koji prođu kroz neku tačku u prostoru u toku jedne sekunde naziva se frekvencija a jedinica je Herz (Hz).

Elektromagnetni talas putuje brzino od 300,000 km/sec. Svaka forma elektromagnetnog spektra ima jedinstvenu talasnu dužinu kao i frekvenciju. Vidljiva svetlost pokriva samo mali deo elektromagentnog spektra. 

Elektromagnetni spektar
Slika2 : Elektromagnetni spektar [25 kb]

Svetlosni talas dolazi u mnogo frekvencija. Različite frekvencije vidljive svetlosti mi uočavamo kao boje. Vidljiva svetlost se kreće od 430 triliona Hreza, koju vidimo kao crvenu do 750 triliona Hz koju vidimo kao ljubičastu. Ovaj opseg nazivamo spektar boja.

Boje

Vidljiva svetlost je svetlost koje ljudsko oko može da uoči. Kada pogledama u sunce, ono nam se čini bezbojno, tj. belo. Bela svetlost nije svetlost jedne boje ili frekvenicje, već je sastvljena od mnogih frekvencija boja. Kominacijom bilo kojih boja u vidljivom spektru proizvodi svetlost koja je obojena ili bela. 

Da bi videli crvenu boju objekta, mora postojati izvor svetlosti npr. sunce. Objekat kada primi svetlosni talas on emituje svetlosni talas crvene boje, ili upija spektar plave i zelene boje a reflektuje spektar crvene boje gde je u našim očima prepoznajemo.

Aditivan model formiranja boja
Slika3: Adativan model formiranja boja.

Crvena, Plava i Žuta se nazivaju osnovnim bojama zato što zajedno proizvode belu svetlost. Ovaj model formiranja boja u fizici se naziva aditivan model

Bela i crna nisu boje, jer u odsustvu bilo kakve svetlosti bela postaje crna i to je razlog zbog čega u mraku nevidimo ništa. Naše oko registruje svetlost i maksimalni osvetljaj jednakim intezitetom sve tri komponente (crvena , zelena i plava) kao belo. Odsustvo bilo kakve svetlosti oko registruje kao crno, a sve međuvrednosti svetla, jednakog intenziteta osnovnih komponenti registruje kao sivo. Kao što se sa slike vidi kombinacijom ove tri boje možemo dobiti bilo koju boju iz spektra boja. Tako gde se preklapaju plava i zelena dobijamo cijan, a kada se preklope plava i crvena dobijamo magentu a kod preklapljanja crvene i zelene dobijamo žutu.

RGB model

 

RGB model
Slika4: RGB model

RGB je skraćenica početnih slova osnovnih boja na engleskom tj. od reči Red, Green i Blue,a predstavlja aditvni kolorni model koji se koristi kod monitora i televizora.

Kod televizora i monitora (kao i kod novina) slike su podeljen na veliki broj mali obojenih tačaka koje imaju mogućnost da ljudskom mozgu saopšte kopletnu sliku. Kod monitora te tačke se nazivaju pikseli (pixel). Standardna rezolucija kod današnih korisnika Interneta je oko 800x600 piksela. 

Jedan piksel se sastoji iz tri dela, jedna je crvena tačka ili fosfor, druga je zelen fosfor i plavi fosfor. Crveni piksel se dobija uključivanje crvenog fosfora dok ostala dva bivaju isključeni. Međutim nije potrebno samo uključivati i isključivati fosfore u pisklu da bi se dobila boja. Potrebno je i intezitet svake komponente, na taj način dobijamo osvetljenje. 

U sledećem primeru vidimo sa desne strane samo crvenu boju, svaka druga boja je dobijana umanjenjem osvetljenja za deset posto od pretodne boje.

                   
 100%  90%  80%  70%  60%  50%  40%  30%  20%  10%
Umanjenje osvetljenja

Različiti inteziteti ova tri dela u pikselu proizvode različite boje. Kompjuteri mogu da generišu po 256 zasebnih nivoa crvene boje, tako i zelene i plave. Ljudsko oko nije u stanju da razlikuje susedne nivo koji su mnogo bilizu jedan drugog.

U zavisnosti od grafičkog adaptera u vašem računaru i mogućnosti monitora određuje se broj boja koje mogu biti prikazene. Broj boja u SVGA modu iznosi 16,777,216 boja ili 16.8 miliona boja. Zato što se svaki piksel može predstaviti sa 24 bita. 

Broj boja zavisi od broja bita kojom se predstavlja boja ukoliko je to 24-bitna paleta tzv. true color, zato što proizvodi 10,000,000 boja koje ljudsko oko može da uoči a kod koga se svaka od primarnih boja crvena, zelena i plava predstavlja sa 8 bita. 

24 bitna paleta boja
Slika5: 24 bitna paleta boja

Drugi prirodni model formiranja boja naziva se suptraktivni tj. boje mogu da kreiraju upijanjem (absorbovanjem) jedne od frekvenicija svetlosti tj. odvajanje te frekvencije od kombinacija frekvencija bele svetlosti. Tu absorbovanu boju vi nećete videti. Crna boja je specijalan slučaj kada su sve boje absorbovane, tj. frekvencija vidljive svetlosti ne dopire našim očima. I ovde imamo tri osnovne boje to su žuta, cijan i magenta, mešanjem ovih komonenti dobijamo druge boje, kao što vidimo na slici.

CMYK model

CMYK model
Slika5: CMYK model

Mešanjem cijana sa žutom proizvodi plavu itd. Povećanjem količine svake komponente krećemo se u pravcu crne, dok odsustvo svih komponenata stvara belu. 

CMYK model koristi se kod štampanje. Mešanjem tri primarne boje cijan, magenta i žuta ne proizvodi se puna crna boja pa je ovom modelu dodata i crna kao četvrta boja. Npr. da bi dobili ljubičastu unećete  5% cijana, 56% magente, 0% žute, i 39% crne boje.

Zbog tehničkih razlika u uređajima za predstavljanje boje kao što su skeneri, štampači i monitori, postoje različito definsani tkz. gamut, tj. opseg boja koje mogu da se proizvedu na tim uređajima sa običnim izvormo svetlosti. Kod RGB boja gamut iznosi oko 70% svih boja. Kod CMYK modela gamut je mnogo manji oko 20%.

HSV model

HSV je skraćenica od prvih slova engleskih reči Hue, Saturation, i Value, a koriste se za opisivanje boja. Ovaj sistem je poznat kao Munsell Color System, koji nazvan po američkom slikaru Albert H. Munsell, ( 1858-1918) koji radio u timu od pet umetnika na organizovanju sistema boja za njihovo bolje razumevanje. Munsell Color System usvojen je od strane američkog odseka za standarde i poznat je kao Inter-Society Color Council-National Bureau of standards (ISCC NBS) system. Ovaj model se koristi kod većine grafičkih programa. 

U HSV sistemu svaka boja rastavlja se po tri ose: 

HSV modelHue - nijansa se može opisati kao predstavljanje pozicije boje u točku boja, u kome su osnovne , sekundarne boje i njihove kombinacije. To su boje iz spektra boja kao što su crvena, plava, zelena, žuta itd. - čista dugina boja sa točka boja. Heksadecimalna vrednost boje na HSV točku boja predstavlja istu boju u heksadecimalnom formatu za RGB sistem boja.

Saturation - predstavlja intezitet boje, tj. odnosi se na dominaciju nijanse u boji takoreći zasićenost - odnos čiste boje i bezbojne sive.

Value - govori nam koliko će boja biti tamna ili svetla tj. intezitet osvetljenja tj. ukupna svetloća boje. Da bi podesili svetlu boju, pomišaćete boju sa belom (TINT) a ako želite tamnu pomešate boju sa crnom (SHADE). Boja pomešana i sa crnom i sa belom prpoznajemo kao ton. Bela, crna i siva su neutralne boje.

Da bi bili umogućnosti da kreirate boje morate poći od osnovnih boja tj. crvene, plave i žute. Mešanjem osnovnih boja dobijamo SEKUNDARNE BOJE: 

 Osnovna    Osnovna    Sekundarna
    +     =  
 crvena  žuta    narandžasta
   +    =  
 crvena    plava    ljubičasta
         
 plava  +  žuta  =  zelena

Mešanjem osnovnih sa sekunardnim dobijamo nove boje i tako dalje i tako dalje.  

Kolorne šeme za Web

Kolorne šeme predstavljaju način da se organizuju boje. Nema absolutnog pravila koje boje idu zajedno a koje ne, uvek je to stvar ličnog ukusa.

Prvi korak pri izradi kolorne šeme na sajtu odnosi se na određivanje Vaše ciljne grupu sa kojom želite da se identifikujete. Ukoliko su to mladi ljudi onda koristite žarke boje, ukoliko prodajete koristićete prirodne boje kao što su zelena i plava. 

Znači potrebno je da izaberete jednu nijansu boje kojom će te naglašavati raspored strane. Potom izaberete drugu boju koja je komplement prve boje, i da je koristite za naslove i podnaslove. 

Najčešće korišćene šeme:

Tople boje - to su boje koje se kreću od crvno-ljubičaste do žute boje. Ove boje proizvode odličan kontrast.

           
#D50BFC #FC0404 #FD5305 #FB9505 #F8BB12 #FCFC04

Hladne boje - boje od ljubičaste do zeleno-žute. Ove boje predstavljaju pravi izbor za naznačivanje teksta.

           
#9B05FC #5404FB #0303FB #038384 #038405 #4CB405

Komplementarne bojeKomplementarne boje - boje koje su u direktnoj suprotnosti na točku boja. Ove boje treba koristiti sa oprezom, pošto su u direktnoj opoziciji, a obezbeđuju odličan kontrast. Naprimer crvena boja je komplement zelenoj na točku boja, itd. Kada se koriste komplementarne boje i to jedna do druge ostvaruju se vibracije koje kreiraju odlično osećanje i jako privlače pažnju. 

Analogne boje - bilo koja tri uzastopna kolorna segmenta na točku boja. Ove boje proizvode dovoljno diferenciranje elemenata a da ne odstupate od unije elemenata.

Monohromatske boje - Sve varijacije kolornih segmenata na točku boja. Ove boje možete koristiti bez ikakvog straha, jer predstavlaju varijaciju jedne boje ali kontrast je zato slab. One obezbeđuju harmoniju zato što svi elementi imaju nešto zajedničko.

             
#490D0C #850909 #C10806 #FB0605 #FC4444 #FE8483 #FDC0BF

Tradicionalne bojeTradicionalne boje - Bilo koje tri boje koje se nalaze pod uglom od 120 stepeni, jedna u odnosu na drugu (Ako je kolorni točak kao sat plava boja bi bila na 12 sati, zelena bi na 4 i crvena na 8 sati). Ovakva šeme sajtu daju dobar balans boja. 

 


Napomena: Zampamtite da je svaki deseti Vaš posetilac ne razlikuje boje, pa obezbedite dovoljan kontrast za diferenciranje elemenata.


I na kraju izaberite druge varijacije vaših boja za linkove, dugmiće i itd. Možete se držati jedne nijanse boje i koristeći različite intezitete boje i osvetljenja, ili, da koristite kontrastnu šemu, ali pazite, mnogo boja stvara konfuziju prilikom čitanja.

Psihologija boja

Boje imaju direktan i snažan uticaj na ljude. U velikoj meri od njih zavise naše akcije i reakcije. Svetlije boje npr. proizvode više emocionalni odziv. Kada je BLACKFRIAR most u Londonu ofarban u zeleno za 34% smanjili su se samoubilački skokovi sa tog mosta.

Ljudsko oko može da vidi oko 7 miliona boja. Kada se naše oči kreću od jedne boje do druge, one se adaptiraju prema promeni boja. U zavisnosti od te adaptacije registrujemo tkz. vizualni efekat.

Svetlije boje reflektuju više svetlosti koje na naše oči deluju stimulativno. Ljudsko oko prvo primeti svetlu boju. U osnovi žuta boja se prva primeti.

Veliki kontrast između boja zaslepljuje ljudsko oko pa je velike kontraste teško pogledati.

Značenje boja u velikoj meri zavise od kulture u kojoj smo odrasli. npr. crvena boja nije ista u Americi i u Kini, pomislite samo zašto. Takođe zančenje zavisi od naše starosti i pola. Npr. žene najviše vole boje od crvene do plave, dok muškarci više suprotno od plave do crvene. Stariji ljudi nevole svetilije boje preko tamnijih. 

Plava je jedna od najpopularnijih boja - reflektuje mir, harmoniju, povernje i sigurnost. Svetlo plave predstavljaju odlične boje za sajtove koji prenose zančajne poruke. S druge strane ona ne bi trebala da se pojvljuje na Web prezentacijama koji se bave hranom. (Da li plava hrana utiče na Vaš apetit?) Plava boja se odlično slaže sa ostalim pastelnim bojama i savršen je komplement prirodnim bojama (siva,zelena..) ali zato se ne slaže sa narandžastom. 

Crna je montona, teška boja ali u pravom kontekstu ona je jeako sofisticirana. Svi će vam reći da crna pozadina umanjuje čitljivost ali mnogi sajtovi su uspeli pokušajte da je kombinujete kontraste (bela, neonska zelana). Crna svako nije boja ako je Web prezentacija namanjen manjem uzrastu, ali ako je galerija fotografija, ili ako se prezentira tehnički sadržaj, crna je idealna. 

Braon je još jedna boja koja se odnosi na komfor, stabilnost i jednostvnost. Slaže se sa zelenom i plavom ili crvenom i narandžastom. Ukoliko je sajt metfora za kuću ili spoljašnje aktivnosti, odlučite se za ovu boju. 

Zelena je boja koja se koristi sa izrazitom negom, zato što proizvodi kako pozitvna tako i negativna osećanja. U svakom slučaju ona reprezentuje lojalnost i inteligenciju a predstavlja odličan izbor za finansijske sajtove. Ukoliko koristite ovu boju, nikako je ne kombinujte sa crvenom, zato što su te boje u potpunoj suprotnosti.

Siva najviše asocira na senke a reprezentuje praktičnost, tugu, sigurnost i pouzdanost. Ukoliko se koristi skladno sa hladnijm tonovima plave ili purpurne boje, uspeh je zagarantovan.

Ljubičasta proizvodi jaka osećanja. Koristi se da proizvede romansu, nostalgija ali i kretivnost, razliku i neobičajenost. Koristi se zajedno sa drugim pastelnim bojama tj. hladnim tonovima plave, zelene pa čak i sive. Ova boja je omiljena za žensku populaciju tako da joj treba obratiti punu pažnju zbog osećanja koje proizvodi. Boja slična ljubičastoj je purpurna boja a ona donosi misterije i duhovnost a podstiče kreativnost.

Narandžasta je topla boja proizvodi entuzijazam, vibracije i proširivost. Ako želite pažnju, ona predstavlja pravi izbor, a loš ukoliko je koristite za pozadinu, ili u kombinaciji sa plavom.

Crvena se odnosi na strast, vatru, brzinu, krv, nadmetanje, agresiju. Ona može da iritira i uznemiruje postioce, i koristi se kada želite da upozorite postioce. Odlično se slaže sa narandžastom, braon i žutom bojom. 

Žuta donosi optimizam, sreću, idealizam i maštu. Veoma se slabo koristi na web-u, sem kada se nešto naznačuje ili da unesete svetlosti na sajt.

Boje za Web

Kod većine HTML elemenata (body,font,hr,table,td,..) postoji atribut koji se odnosi na boju prikaza elementa ili pozadine. Mnogi grafički programi za obradu slika koriste RGB paletu boja a većina browsera koristi WEB paletu od 216 boja tkz. WEB SAFE COLORS. Sigurna paleta boja kod Web, su boje koje većina web browsera a i monitora može da prikaže.

Potrebno je da koristite tu paletu boja prilikom obrade slika i dizajniranja Web strana da  strana ne bi zavisila od browsera ili monitora u kom se prikazuje. Ali to ne znači da treba do koristite svih 216 boja, maksimalno 5 boja treba odabrati. Najteže je među tim bojama pronaći pravu. 

Boje u HTML se unose kao heksadecimalne vrednosti kojima prethodi znak #. Prva dva heksadecimlna broja se odnose na crvenu, druga dva na zelenu i zadnja dva na plavu (npr. Crvena boja je #FF0000 ). 

Boja teksta

Prilikom izrade Web prezentacije potrebno je usaglasiti boje sa slikama i sa tekstom. Tekst mora biti čitljiv i pokušajte to da ne zaboravite.

Crn tekst na beloj pozadini je najbolji izbor. Drugi izbor boja umanjuje čitljivost teksta. Naslovi treba da budu kratki i boldovani, italic tekst izbegavajte što više možete jer umanjuje čitljivost čak do 40%. Boja teksta se najčešće menja kod linkova, kako bi ih usaglasili sa dizajnom Web prezentacije, ali se ipak preporučuje korišćenje standardnog obležavanja linkova.

Najbolja čitljivost za tekst


  • crni tekst na beloj pozadini
  • tamno zelen tekst na beloj pozadini
  • tamno plav tekst na beloj pozadini
  • bron tekst na beloj pozadini

Najgora čitljivost


  • crven tekst na zelenoj pozadini
  • zelen tekst na crvenoj pozadini
  • zelen tekst na plavoj pozadini
  • beli tekst na crnoj pozadini

Najbolja preglednost  
omogućuje atraktivnu pažnju, ali nikako za velike delove teksta.


  • crna na narandžastoj
  • crvena na beloj
  • tamno plava na žutoj
  • belo na ljubičastoj

Zaključak

Boje treba da stimulišu i da proizvedu emocije u zavisnosti od motivacije Web sajta, na linku Pantone SveZaWeb, možete pronaći dosta korisnih informacija o bojama.

[ Osnove Dizajna | ProjektovanjeSadržaj | Upotreba slika | Boje | Redizajn ]

Pogledajte

SveZaWeb : Web Design + Development Tutorials and Articles
Izdvajamo
Prvi korak pri izradi kolorne šeme na sajtu odnosi se na određivanje Vaše ciljne grupu sa kojom želite da se identifikujete. Ukoliko su to mladi ljudi onda koristite žarke boje, ukoliko prodajete koristićete prirodne boje kao što su zelena i plava. 

Slične teme

Nešto o ...

Milan Skorić, radi na razvoju i dizajnu web aplikacija i servisa u Pexim Computers. Realizovao sam niz projekata za elektronsko bankarstvo i Intranet u Microsoft .Net tehnologiji.

»» Opširnije

Prijavite se na naš informator
 
SveZaWeb Informator
Unesite vašu email adresu i kliknite na sliku.  

Powered by groups.yahoo.com

[ Informator SveZaWeb ]

»» Preporuči prijatelju

Pomoć!

Trudimo se da SveZaWeb bude koristan i ispravan, međutim uvek postoje greške, molimo Vas da nam pomognete kako bi ih ispravili.
 
Javite se : webmaster@
svezaweb.dzaba.com

 

    Politika privatnosti | Copyright ©  SveZaWeb 1998 - 2003.  Sva prava zadržana. Najbolji pregled u 800*600 sa najpopulanijim Web čitačima.
SveZaWeb SveZaWeb SveZaWeb SveZaWeb SveZaWeb
 Razvoj   Dizajn   Kreiranje   Panorama   Usluge