LV3

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-A6- 3mlhWprqMOyVW8ZhVRh49hA8E9Oba3H8EogsbAYZ9aaqGHmeNtnvwaAosNEALw_wcB ili https://www.w3schools.com/colors/colors_theory.asp ). Uočite primarne, sekundarne i tercijarne boje.

- Teorija opisuje kako su različite boje povezane jedna s drugom i kako izgledaju kada se kombiniraju u više shema boja. Ogranak teorije boja je psihologija boja, koja istražuje boje i emocije. Primarne boje su "izvorne" boje koje se sastoje od crvene, žute i plave. Ne možete miješati nijednu boju da biste dobili ove boje. Sekundarne boje nastaju iz jednake mješavine dviju odvojenih primarnih boja. Žuta i plava mješavina za stvaranje zelene, žute i crvene mješavine za stvaranje narančaste, a plava i crvena za stvaranje ljubičaste. Tercijarne boje nastaju kombiniranjem susjednih primarnih i sekundarnih nijansi. Na primjer, primarna boja, poput žute, i sekundarna boja, poput zelene, miješaju se kako bi se stvorila žuto-zelena.

B. Koje su boje analogne?

- Analogne boje su skupina od tri ili četiri boje koje graniče jedna s drugom unutar kruga boja npr. slika aurore borealis (zelena i plava jako blizu jedna druge.

C. Kada su boje monokromatske?

- Monokromatske sheme boja usredotočuju se na jednu boju, često koristeći varijacije te nijanse uključivanjem nijansi, tonova i nijansi.

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

- Komplementarne boje postoje na suprotnim stranama kotača boja; jedna boja je obično primarna, a druga sekundarna boja. Glavne komplementarne boje su plava i narančasta, crvena i zelena te žuta i ljubičasta.

E. Kako se boje označavaju? (pomoć: https://www.w3schools.com/colors/default.asp ). Navedite primjere.

- Uz CSS, boje se mogu specificirati na različite načine: RGB vrijednost boje navedena je s: RGB (RED, GREEN, BLUE). Svaki parametar definira intenzitet boje kao cijeli broj između 0 i 255,, npr. RGB (0, 255, 0) je zelena. Heksadecimalna boja navedena je s: #RRGGBB. RR (crveno), GG (zeleno) i BB (plavo) su heksadecimalni cijeli brojevi između 00 i FF koji određuju intenzitet boje npr. #00FF00 je zelena.

F. Što je ekstrahiranje boja neke slike?

- Vađenje same boje, iz slike i koda boje, također, za korištenje u programima za uređivanje i uređivanje slika, kao i programima za dizajn kao što je Photoshop i drugim programima za dizajn.

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.

- Crna boja - uz bijelu, crna je jedna od prvih zabilježenih boja korištenih u umjetnosti, pigment koji je stvorio paleolitik koji je koristio ugljen, spaljene kosti ili razne usitnjene minerale. Kroz veći dio povijesti crna je bila simbol zla, žalosti, tuge i tame. Međutim, u starom Egiptu boja je imala pozitivne konotacije zaštite i plodnosti.

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 )

- Nemojte pričvrstiti logo za kut, nemojte rotirati logo, nemojte dekonstruirati logo, nemojte rastezati logo, nemojte invertirati boje, nemojte ocrtavati logo, nemojte mijenjati boju kartice, nemojte koristiti gradijent, nemojte koristiti sliku.

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/ )

- U osnovi, dobro korisničko sučelje omogućuje korisnicima da dovrše zadatak zbog kojeg su došli na web stranicu s lakoćom i bez zabune. Osnovne značajke upotrebljivog UI dizajna su:

- Učivost: Može li korisnik izvršiti svoje zadatke s malo poteškoća

- Učinkovitost: Omogućuje li sučelje korisniku pravovremeno dovršavanje zadataka?

- Pamtljivost: Nakon što napusti web mjesto, koliko je vjerojatno da će se korisnik moći sjetiti kako ga koristiti sljedeći put kada ga posjeti

- Pogreške: Koje korake poduzima sučelje da smanji mogućnost pogreške korisnika i kako dopušta korisnicima da isprave pogrešku

- Zadovoljstvo: uživa li korisnik u interakciji s dizajnom

- Primjer web sjedišta kao uzor dobrog UI dizajna je https://careerfoundry.com/en/blog/ui-design/8-sites-with-great-ui/

- Zato što sam mogao pronaći odgovor na moje pitanje vrlo brzo, bez pogrešaka i bez poteškoća.

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

https://coolors.co/bdede0-bbdbd1-b6b8d6-7e78d2-6f58c9

https://coolors.co/cfd4c5-eecfd4-efb9cb-e6adec-c287e8

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?

- Moglo bi se koristiti za logo i za slike zato što stranica pokazuje s kakvim bojama u pozadini pašu boje teksta.

E. Pokušajte koristiti alat na https://www.materialpalette.com/ . U kojem slučaju ga je poželjno primijeniti?

- Poželjno ga je koristiti kako bi pronašli dobar kontrast boja – mogli bi ga koristiti za logu ili za slike…

F. Isprobajte alat palleton na https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF . U kojem bi vam postupku mogao biti koristan?

- Alat bi mogao biti koristan za logo i za izradnju slike zato što nam omogućuje otkrivanje novih boja.

G. Isprobajte alat na https://color.adobe.com/create/color-wheel . Što nam ovaj alat omogućuje?

- Omogućuje nam da izaberemo boje koje su analogne, možemo ih koristiti u photoshopu za izradu slika…

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.