Vježba 3: Sustavi boja na zaslonu i pisaču
Leon Kolarić
Priprema za vježbu
Danas najčešće koristimo RGB i CMYK sustave za prikazivanje boja na zaslonu i na papiru za ispisivanje.
Značajke sustava RGB su crvena(red), zelena(green) i plava(blue) dok se u RGBA dodaje i značajka Alpha koja određuje prozirnost boje.
Značajke sustava CMYK su cijan(CYAN), magenta(MAGENTA), žuta(YELLOW) i crna(BLACK).
Material Design sustav boja pomaže nam pri stvaranju i održavanju stila korisničkog sučelja.
UI označava dizajn korisničkog sučelja odnosi se na estetski dizajn korisničkog sučelja proizvoda. To je proces
stvaranja sučelja odnosno aplikacija i web-mjesta s fokusom na izgled i stil. Dizajn korisničkog sučelja obično se odnosi na digitalna korisnička sučelja, ali uključuje i glasovno upravljana sučelja
UX dizajn označava proces povećanja zadovoljstva korisnika poboljšanjem upotrebljivosti i pristupačnosti proizvoda. S druge strane, dizajneri korisničkog sučelja odgovorni su za izgled i dojam proizvoda. Dizajneri korisničkog sučelja dizajniraju mapu proizvoda, koju dizajneri korisničkog sučelja zatim detaljiziraju vizualnim i interaktivnim dodirnim točkama.
1. Sustavi boja
Kotač boja(prikazan na slici) je ilustrativni dijagram koji prikazuje 12 boja oko kruga, a koristi se za predstavljanje međusobnog odnosa svake boje. Boje raspoređene jedna nasuprot druge međusobno su komplementarne. Boje koje se nalaze blizu drugih boja imaju zajedničke karakteristike i često se dobro slažu.
Na njemu se nalaze:
Primarne boje
Sekundarne boje
Tercijarne boje
Analogne boje
Analogne boje su skupina od tri ili četiri boje koje graniče jedna s drugom unutar kruga boja. Riječ “analogno” znači blisko povezano.
Monokromatske boje
Boje su monokromatske kada su izvedene od jedne boje na rubu kotača boja. Monokromatske boje pri dizajnu web stranica koristimo kako bismo dizajnirali sučelje koje je korisniku lakše za gledati.
Komplementarne boje
Komplementarne boje biraju se sa suprotnog ruba kotača boja. Primjerice za plavu narančasta, za crvenu zelena i za žutu ljubičasta.
Boje možemo označavati na više različitih načina. Primjerice u CSS-u:
1.Imenom boje
2.RGB vrijednošću
3.Heksadecimalnom vrijednošću
Ekstrahiranje boja neke slike je izdvajanje boja sa neke slike i spremanje je kao paletu boja.
Boje također imaju svoj utjecaj na ljudski um. Primjerice:
Blue grotto opušta i podsjeća na ocean. Ova određena nijansa također je usko povezana s romantikom, vjerojatno zato što se mnoge romantične scene u filmovima često odvijaju u malim špiljama u Italiji.
Vruća ružičasta nijansa puna je energije i ne prolazi nezapaženo. Provokativan je i odvažan, uvijek daje izjavu. Jarko ružičasta je mladenačka, živahna i električna.
Mandarina se povezuje s energijom, mladošću i srećom.
2. Primjena sustava boja u UI oblikovanju kod izrade web stranica
Logo naziv tvrtke ne bi smo smjeli koristit u komercijalne svrhe bez dopuštenja te tvrtke.
Upotrebljivost UI dizajna je svakom korisniku najvažnija stavka prilikom korištenja web stranice stoga i administrator treba voditi posebnu brigu o dizajnu. Efikasnost i jednostavnost web stranici daju dobar dizajn. Omogućuju da korisnik s lakoćom obavi zadatak time korisnik postaje zadovoljan sa stranicom što znači da će se u budućnosti vratiti na tu stranicu.
Material Design je alat za dizajniranje dinamičkih sučelja web ili desktop aplikacija.
Material design palette je alat za odabir palete boja za jednostavne aplikacije.
Paletton.com je alat koristan za odabir boja i fonta koji ćemo koristiti na web stranici ili aplikaciji.
Adobe Color omogućuje nam jednostavan pregled i odabir boja za daljnje korištenja.
Generirane boje:
#FFF786
RGBA(255,247,134,100)
#FF8BA7
RGBA(255,139,167,100)
#81D0FF
RGBA(129,208,255,100)
#933CA8
RGBA(147,60,168,66,100)
#343482
RGBA(52,52,130,51)