LV3.

                                                            LV3. Uvod, sustavi boja na zaslonu i pisaču
                                                                Petar Lovaković i Filip Marangunić 3.A

Priprema za vježbu:

Odgovorite na pitanja pisano u bilježnicu: 
1. Koje sustave boja na zaslonu i pisaču najčešće koristimo? 
2. Koje su značajke sustava RGB? U čemu je razlika sustava RGBA u odnosu na RGB? 
3. Koje su značajke sustava CMYK?  
4. Kakav je to Material Design sustav boja? 
5. Što znači kratica UI, a što UX kod web programiranja? (pomoć: https://careerfoundry.com/en/blog/ui-design/what-is-ui-design-guide/ ) 

1. Najčešće korišteni sustavi boja na zaslonu i pisaču su RGB (Red, Green, Blue) i CMYK (Cyan, Magenta, Yellow, Key/Black).

2. Sustav boja RGB:

• • RGB se temelji na tri primarne boje: crvenoj (Red), zelenoj (Green) i plavoj (Blue).

  • Kombinacijom ovih triju boja u različitim intenzitetima stvaraju se različite boje.

  • Svaki piksel na zaslonu prikazuje boju kombinacijom intenziteta ovih triju boja.

• Nema transparentnosti u RGB sustavu.

• Razlika između sustava RGB i RGBA:

  • RGBA (Red, Green, Blue, Alpha) je proširenje RGB sustava koje dodaje četvrti kanal, Alpha, koji predstavlja transparentnost.

  • Alpha kanal određuje koliko je boja transparentna, gdje 0 znači potpuno transparentno, a 255 znači potpuno neprozirno.

  • RGBA omogućava dodavanje transparentnosti elementima na zaslonu.

3. Sustav boja CMYK:

• • CMYK je sustav boja koji se obično koristi u tiskanju.

  • Sastoji se od četiri primarne boje: Cyan, Magenta, Yellow i Key (crna).

  • Kombinacijom ovih četiri boje stvaraju se različite boje, a crna se koristi za poboljšanje dubine i nijansi u tisku.

  • CMYK je posebno koristan za reprodukciju boja u tiskanim materijalima.

4. Material Design sustav boja:

• • Material Design je dizajnerski jezik i smjernice razvijene od strane Google-a za konzistentan i intuitivan korisnički sučelje na raznim platformama.

  • Sustav boja u Material Designu obuhvaća paletu boja koje se koriste za različite elemente sučelja.

  • Osnovne značajke uključuju svijetle i tamne teme, primarne i sekundarne boje te boje za naglasak.

  • Cilj je pružiti korisnicima dosljedno i privlačno iskustvo na različitim uređajima i aplikacijama.

5. UI (User Interface) se odnosi na sve što korisnik vidi i s čime interagira na web stranici ili aplikaciji. To uključuje elemente kao što su dizajn, boje, tipografija, ikone i svi grafički elementi koji čine sučelje privlačnim i funkcionalnim. UX (User Experience) se odnosi na cjelokupno iskustvo korisnika dok koristi web stranicu ili aplikaciju. To uključuje kako se korisnik osjeća dok interagira s sučeljem, koliko je intuitivno i jednostavno za korištenje, brzinu učitavanja stranica, navigaciju, pristupačnost i sve faktore koji utječu na zadovoljstvo korisnika prilikom upotrebe proizvoda. 

IZVOĐENJE VJEŽBE
Pri traženju odgovora koristite se internet tražilicom, a pri posjećivanju stranica preglednikom. 

1. Sustavi boja  

A. Što je kotač boja? (pomoć: https://www.shutterstock.com/blog/complete-guide-color-indesign?kw=&gclsrc=aw.ds&gclid=Cj0KCQjwzbv7BRDIARIsAM-A63mlhWprqMOyVW8ZhVRh49hA8E9Oba3H8EogsbAYZ9aaqGHmeNtnvwaAosNEALw_wcB ili https://www.w3schools.com/colors/colors_theory.asp ). Uočite primarne, sekundarne i tercijarne boje.  

B. Koje su boje analogne?  

C. Kada su boje monokromatske?  

D. Na koji se način biraju komplementarne boje?      

E. Kako se boje označavaju? (pomoć: https://www.w3schools.com/colors/default.asp ). Navedite primjere.  F. Što je ekstrahiranje boja neke slike?  

G. Posjetite stranice canva.com na https://www.canva.com/colors/color-meanings/ . Odaberite nekoliko boja i proučite njihovo značenje (simboliku) i primjenu. 

A. Kotač boja je vizualni prikaz boja organiziranih u kružni oblik. Obično se koristi za prikazivanje odnosa između različitih boja. Primarne boje u kotaču boja su crvena, plava i žuta, a kombinacijom primarnih boja dobivaju se sekundarne boje, poput zelene (iz mješavine plave i žute), narančaste (iz mješavine crvene i žute) i ljubičaste (iz mješavine crvene i plave). Tercijarne boje su rezultat miješanja sekundarnih i primarnih boja.

B. Analogne boje su boje koje se nalaze jedna pored druge na kotaču boja. To znači da su slične po tonu i obično dobro idu zajedno u dizajnu.

C. Monokromatske boje su varijacije iste boje, ali s različitim nijansama. Na primjer, nijanse plave boje poput svijetlo plave, srednje plave i tamno plave su monokromatske boje.

D. Komplementarne boje su boje koje se nalaze nasuprot jedna drugoj na kotaču boja. Na primjer, komplementarna boja crvenoj je zelena, komplementarna plavoj je narančasta, a komplementarna žutoj je ljubičasta. Komplementarne boje se često koriste kako bi se postigao kontrast u dizajnu.

E. Boje se označavaju pomoću različitih notacija. Najčešće se koristi HEX notacija, koja se sastoji od šest znakova koji predstavljaju kombinaciju brojeva i slova. Na primjer, #FF0000 označava crvenu boju. Također se koristi RGB notacija, koja se temelji na crvenoj (R), zelenoj (G) i plavoj (B) komponenti boje, svaka s vrijednostima od 0 do 255. Na primjer, RGB(255, 0, 0) također označava crvenu boju.

F. Ekstrahiranje boja neke slike znači identificiranje i izdvajanje boja koje se pojavljuju na slici. To se često radi kako bi se koristile te boje u dizajnu ili kako bi se analizirala paleta boja na slici.

G. 

• Jantar - Budući da je to topla i blistava boja, jantar se povezuje s energijom. Njegova živost može potaknuti osjećaje sreće i potaknuti smjelost. U psihologiji boja, smatra se da jantar simbolizira i potiče vitalnost, samopouzdanje i sigurnost. Jantar je savršen za dodavanje živih naglasaka dizajnu. Kombinirajte njegov topli ton s tamno smeđim i crvenim za živopisnu, zemljanu paletu ili ga uparite s dubokim nijansama zelene za prirodan, jesenski izgled. Možete ga koristiti i uz nijanse narančaste.

• Jarko žuta  - Jarko žuta je odvažna, moćna boja. Budući da je to boja sunca, jarko žuta se obično povezuje s toplinom i energijom. Ostale pozitivne asocijacije na boju uključuju sreću, nadu i zabavu. Živopisan izgled svijetložute boje znači da je najbolje koristiti kada želite privući pažnju. Dobro funkcionira kao akcentna boja, gdje može unijeti energiju i vedrinu u dizajn. Vole ga robne marke koje se žele istaknuti - McDonalds, IKEA, Best Buy i Subway svi koriste žutu boju u svojim logotipima.
  
  

2. Primjena sustava boja u UI oblikovanju kod izrade web stranica   

A. Što se ne bi smjelo raditi kod korištenja loga naziva tvrtke?(primjer: https://www.dropbox.com/branding)  

B. Napišite i ukratko objasnite osnovne značajke upotrebljivog UI oblikovanja (dizajna)? Pronađite ili odaberite neko web sjedište koje može poslužiti kao uzor i objasnite zašto je uzorno. (pomoć: https://careerfoundry.com/en/blog/ui-design/8-sites-with-great-ui/ )  

C. Posjetite stranicu https://coolors.co/ i pokušajte generirati kombinacije usklađenih boja.  

D. Pokušajte koristiti alat na https://material.io/resources/color/#!/?view.left=0&view.right=0 . U kojem bi ga procesu bilo pogodno koristiti?  

E. Pokušajte koristiti alat na https://www.materialpalette.com/ . U kojem slučaju ga je poželjno primijeniti?  F. Isprobajte alat palleton na https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0a

F . U kojem bi vam postupku mogao biti koristan?  G. Isprobajte alat na https://color.adobe.com/create/color-wheel . Što nam ovaj alat omogućuje?  

H. Odaberite neku sliku za svoje zamišljeno web sjedište. Pokušajte pomoću spomenutih alata izlučiti boje, odnosno odabrati do 5 boja koje bi bile odgovarajuće za vaše web sjedište. Napišite njihove oznake na bar dva različita načina. 

A.