Nastavna cjelina 1.

Kako dizajnirati user interface aplikacije?

Isaac Newtonov (1643-1727) rad u optici i

njegovi matematički doprinosi imaju značajan
utjecaj na tehnologije koje su temelj savremenog
računarstva i mobilnih aplikacija. Njegova
eksperimentiranja s prizmama i razlaganjem
svjetlosti doprinijela su temeljnom razumijevanju
svjetlosti i boja, što je ključno za razvoj
tehnologija prikaza na mobilnim uređajima. Ovo
znanje je presudno za kalibraciju boja i kontrasta
na ekranima, omogućavajući jasniji i precizniji
vizuelni doživljaj.

Kada razvijamo mobilne aplikacije, jedan od najvažnijih aspekata na koji

trebamo obratiti pažnju je dizajn korisničkog interfejsa (eng. User
Interface (UI)).

Korisnički interfejs je ono što korisnici vide i s čime interaguju

prilikom korištenja aplikacije, stoga je ključan za uspjeh aplikacije.

Dobar UI ne samo da olakšava korisnicima da intuitivno koriste

aplikaciju, već i poboljšava njihovo ukupno iskustvo, čime se povećava
vjerovatnoća da će aplikaciju češće koristiti i preporučiti je drugima. Sa
korisničkim interfejsima se susrećemo svakodnevno, a na slici ispod je
prikazan primjer UI mobilne aplikacije.
Teorija boja i teorija dizajna, dizajn logotipa, identiteta i
grafičkih elemenata

Uzimajući u obzir teoriju boja, ključni element u dizajnu mobilnih

aplikacija, započinjemo naše putovanje prema razumijevanju kako paleta
boja i njihova interakcija mogu oblikovati korisničko iskustvo i vizuelni
identitet aplikacija koje postaju neodvojivi dio naše svakodnevice.

Teorija boja u kontekstu mobilnih aplikacija se bavi razumijevanjem

kako boje utječu na korisničko iskustvo i vizuelni dizajn aplikacija na
mobilnim uređajima.

U svijetu mobilnih aplikacija, teorija boja igra vitalnu ulogu u kreiranju

privlačnog i funkcionalnog korisničkog iskustva. Razumijevanje i
primjena teorije boja omogućava dizajnerima da efikasno komuniciraju
poruke, evociraju emocije i poboljšavaju upotrebljivost aplikacija.
Plava boja se često koristi u aplikacijama koje zahtijevaju stvaranje
osjećaja povjerenja i sigurnosti, poput onih u bankarstvu ili društvenih
mreža. Na slici ispod je primjer dizajna takvih aplikacija.

Zelena boja, koja evocira povezanost s prirodom, zdravljem i

blagostanjem, česta je u aplikacijama usmjerenim na zdravlje i fitnes.
Crvena boja izaziva snažne emocije poput uzbuđenja, strasti, ali i
opasnosti. Crvena se koristi za naglašavanje važnih elemenata ili akcija,
ali treba biti pažljivo dozirana kako ne bi preplavila korisnika.

Žuta i narandžasta su boje koje evociraju optimizam, energiju i

kreativnost. One su efektne za privlačenje pažnje i stvaranje vedrog i
dinamičnog ambijenta.
 Teorija dizajna fokusira se na stvaranje jednostavnih, intuitivnih i
vizuelno privlačnih korisničkih intefejsa.

U kontekstu mobilnih aplikacija, a u osnovne elemente teorije dizajna

ubrajamo:

● Jednostavnost: Čist i minimalistički dizajn koji se fokusira na

osnovne funkcije.
● Prilagodljivost: Dizajn koji se lako prilagođava različitim
veličinama ekrana.
● Intuitivna navigacija: Jasna i logična navigacija unutar
aplikacije.
● Boje i vizuelni identitet: Konzistentna upotreba boja i vizuelnih
elemenata.
● Čitljiva tipografija: Jasni i lako čitljivi fontovi.
● Interakcija i povratne informacije: Vizuelne i taktilne povratne
informacije na korisničke akcije.
● Dostupnost: Dizajn pristupačan svim korisnicima, uključujući
osobe s posebnim potrebama.
● Testiranje: Redovito testiranje i prikupljanje povratnih
informacija za optimizaciju dizajna.

Dizajn logotipa uključuje kreiranje jedinstvenog simbola ili kombinacije

teksta i slika koji predstavljaju brend ili kompaniju. Logotip treba biti
prepoznatljiv, pamtljiv i jasan, a njegov dizajn treba odražavati
vrijednosti i misiju brenda. Cilj je stvoriti vizuelni identitet koji se lako
pamti i prenosi poruku brenda na efektan način.

Logotip je grafički znak, simbol ili ikona, često kombinovan s

jedinstvenim tipografskim stilom, koji predstavlja i identifikuje brend,
kompaniju, organizaciju ili proizvod.
Slika prikazuje primjer jednostavnog i modernog dizajna logotipa.
Logotip se sastoji od jedinstvenog simbola u kombinaciji sa stilizovanim
fontom, predstavljajući izmišljenu kompaniju. Dizajn je čist,
minimalistički i lako prepoznatljiv, odražavajući savremenu estetiku.
Logotip komunicira profesionalnost i inovativnost, što ga čini pogodnim
za moderno poslovanje u općim industrijama poput tehnologije,
savjetovanja ili dizajna.

Dizajn identiteta, poznat i kao "brand identity design" (dizajn brend

identiteta), odnosi se na vizuelne i stilističke aspekte koji čine cjelokupni
imidž i prepoznatljivost brenda.

Dizajn identiteta uključuje stvaranje konzistentnog skupa dizajnerskih

elemenata koji predstavljaju brend i razlikuju ga od konkurencije.

Grafički elementi su ključni za stvaranje efektivnog, uravnoteženog i

estetski privlačnog dizajna, bilo da se radi o tiskanim materijalima,
digitalnom dizajnu, ambalaži proizvoda ili bilo kojem drugom vizuelnom
mediju.

Grafički elementi u dizajnu odnose se na vizuelne komponente koje

se koriste za stvaranje i poboljšanje estetskog izgleda i funkcionalnosti
dizajna.
Ispod je slike koja predstavlja koncept dizajna brend identiteta. Na slici
su prikazani različiti elementi koji čine identitet brenda, uključujući
logotip, paletu boja, tipografiju, kao i dodatne grafičke elemente poput
ikona ili uzoraka.
Pitanja za provjeru znanja:

1. Kako se teorija boja primjenjuje u dizajnu mobilnih aplikacija i

koje emocije mogu evocirati plava, zelena, crvena, žuta i
narančasta boja u kontekstu mobilnih aplikacija?

2. Navedite i objasnite najmanje tri ključna principa teorije

dizajna koji su posebno važni za stvaranje efektivnog
korisničkog interfejsa u mobilnim aplikacijama.

3. Što je logotip i koja je njegova uloga u vizuelnom identitetu

brenda? Navedite primjer kako bi dizajn logotipa mogao
komunicirati osnovne vrijednosti brenda.

4. Objasnite koncept dizajna identiteta (brand identity design) i

navedite primjere različitih elemenata koji čine identitet brenda.

5. Koje su osnovne vrste grafičkih elemenata korištenih u dizajnu

i kako svaki od njih doprinosi ukupnom vizuelnom dojmu?
User interface aplikacije

Korisnički interfejs (UI) aplikacija je kao most između korisnika i

softvera, ključno za stvaranje intuitivnog i ugodnog iskustva korištenja.
Dobar UI dizajn omogućava korisnicima da lako navigiraju i koriste
funkcionalnosti aplikacije, što direktno utječe na njihovo zadovoljstvo i
efikasnost korištenja.

O osnovnim elementima teorije dizajna je bilo riječi ranije. Ovdje ćemo

to pokazati na praktičnom primjeru.
Slika prikazuje korisnički interfejs aplikacije za upravljanje zdravljem i
fitnessom, dizajnirano s poštivanjem ključnih principa UI dizajna:

● Jasnoća i jednostavnost: Primjećujete da interfejs ima vrlo čist i

nekomplikovan dizajn. Glavni ekran prikazuje jasno definirane
opcije kao što su "Moji treninzi", "Prehrana", "Napredak", svaka s
jednostavnim ikonama i kratkim opisima. Ovo omogućava
korisnicima da brzo shvate funkcionalnosti aplikacije bez zbrke.

● Intuitivna navigacija: Na donjem dijelu ekrana nalazi se

navigacijska traka, koja omogućava korisnicima lako
prebacivanje između glavnih odjeljaka. Ovo osigurava da
korisnici mogu lako pristupiti različitim funkcijama aplikacije bez
potrebe za pretraživanjem.

● Estetika i funkcionalnost: Dizajn kombinira atraktivan vizuelni

izgled s praktičnom upotrebom. Boje su suptilne, ali privlačne,
doprinoseći ugodnom korisničkom iskustvu, dok raspored
elemenata osigurava da su sve ključne funkcije lako dostupne.

● Prilagodljivost različitim uređajima: Slika prikazuje odzivni

dizajn korisničkog interfejsa aplikacije gdje se vidi isti interfejs
aplikacije prikazano na pametnom telefonu, tabletu i laptopu.
Možete primijetiti kako se raspored i elementi aplikacije
prilagođavaju da odgovaraju različitim veličinama ekrana, dok
istovremeno održavaju svoju funkcionalnost i vizuelnu
privlačnost. Dizajn jasno pokazuje prilagodljivost i fleksibilnost
korisničkog interfejsa.

● Dostupnost: Ikonografija i tekstovi su dizajnirani tako da budu

jasni i razumljivi, što je korak prema dostupnom dizajnu koji
može zadovoljiti širi raspon korisnika, uključujući one s
posebnim potrebama.
Ova slika efektivno demonstrira kako se principi UI dizajna mogu
primijeniti u stvaranju funkcionalnog, intuitivnog i vizuelnog privlačnog
korisničkog interfejsa.

Pitanja za provjeru znanja:

1. Šta je korisnički interfejs (UI) i koje su njegove osnovne

funkcije u kontekstu mobilnih aplikacija?

2. Objasnite kako jasnoća i jednostavnost utječu na dizajn

korisničkog interfejsa mobilnih aplikacija. Dajte primjer iz
stvarnog života.

3. Koja je uloga intuitivne navigacije u korisničkom interfejsu i

kako se to postiže u dizajnu mobilnih aplikacija?

4. Objasnite koncept odzivnog dizajna. Kako se dizajn

korisničkog interfejsa prilagođava različitim veličinama i
vrstama uređaja?

5. Zašto je važna prilagodljivost i dostupnost u dizajnu

korisničkog interfejsa, posebno u kontekstu raznolikosti
korisničkih potreba i sposobnosti?
Dizajniranje aplikacije za mobilne uređaje

Prvi korak pri dizajniranju aplikacije je osnovna ideja.

Brainstorming je kreativan proces koji nam pomaže da dođemo do

novih ideja i koncepata za mobilne aplikacije.

U korake brainstorminga ubrajamo:

1. Definisanje teme: Prvo ćemo definirati temu ili cilj naše

aplikacije. Da li želimo stvoriti aplikaciju za zdravlje i fitness,
obrazovanje, zabavu ili nešto drugo? Tema će nam pomoći da
usmjerimo naše ideje.

2. Individualno razmišljanje: Svako će imati nekoliko minuta da

individualno razmisli o potrebama ili problemima koje bi želio
riješiti putem mobilne aplikacije. Zapisati ideje.

3. Grupno dijeljenje: Nakon individualnog razmišljanja, podijelit

ćemo svoje ideje u grupi. Svako će imati priliku reći svoju ideju i
kratko je objasniti.

4. Kreativno razvijanje: Nakon što smo podijelili svoje ideje,

zajedno ćemo razmišljati o tome kako ih možemo dalje razviti i
unaprijediti. Kako bismo riješili problem ili iskoristili priliku?

5. Selekcija najboljih ideja: Na kraju sesije, glasat ćemo za

najbolje ideje i izabrati jednu ili više koje ćemo dalje razmatrati u
narednim časovima.
Evo nekoliko savjeta za brainstorming:

● Nema loših ideja: Slobodno iznosite sve ideje koje vam padnu na
pamet. Ponekad se iz "loših" ideja mogu razviti sjajni koncepti.

● Kreativnost je dobrodošla: Nema ograničenja za kreativnost.

Razmislite izvan okvira i budite inovativni.

● Suradnja: Dopustite da ideje drugih inspirišu vaše vlastite.

Suradnja može rezultirati izvanrednim konceptima.

● Fokus na korisnicima: Razmišljajte o tome kako vaša aplikacija

može poboljšati živote korisnika i rješavati njihove probleme.

U dizajnu mobilnih aplikacija, skiciranje se često koristi kao početni

korak u razvoju korisničkog interfejsa (UI) ili konceptualizaciji dizajna.

Skiciranje je proces stvaranja brzih i jednostavnih crteža ili skica kako

biste vizuelno predstavili koncept ili ideju.

Skice su obično grublje i manje detaljne od konačnog dizajna, ali

omogućavaju dizajnerima da brzo prenesu svoje ideje na papir ili
digitalno platno. Skiciranje pomaže u vizualizaciji rasporeda elemenata
na ekranu, pozicije funkcija i općeg izgleda aplikacije prije nego što se
počne s detaljnim dizajniranjem.

Prototip se koristi kako bi se provjerilo kako će aplikacija funkcionirati i

kako će korisnici interagirati s njom.

Prototipiranje je proces izrade interaktivnog modela ili simulacije

kako bi se testirale funkcionalnost i korisničko iskustvo aplikacije prije
nego što bude potpuno razvijena.
Testiranje prototipa je ključni korak u procesu dizajna mobilnih aplikacija
jer omogućava iterativni pristup razvoju. Poboljšanje aplikacije na
temelju povratnih informacija testera pomaže stvoriti kvalitetniju i
korisnički orijentiranu aplikaciju prije nego što se uloži više resursa u
razvoj.

Pitanja za provjeru znanja:

1. Šta je svrha skiciranja u dizajnu mobilnih aplikacija i kako se

koristi u procesu dizajna?

2. Kako prototipiranje pomaže dizajnerima i programerima u

procesu razvoja mobilnih aplikacija? Navesti najmanje tri
koristi.

3. Kako se skica razlikuje od konačnog dizajna mobilne

aplikacije? Koje su glavne karakteristike skica?

4. Koja je svrha testiranja prototipa u procesu dizajna mobilnih

aplikacija i šta se obično provjerava tijekom testiranja?
Za one koji žele znati više

Newtonov točak

Newtonov disk, također poznat kao Newtonov točak, igra ključnu

ulogu u razumijevanju boja, što je esencijalno za razvoj mobilnih
aplikacija. Ovaj koncept, koji je prvi put istražio Isaac Newton,
pomaže u boljem razumijevanju aditivnog miješanja boja, što je
osnovni princip na kojem se temelji prikazivanje boja na digitalnim
ekranima, uključujući i one na mobilnim uređajima.

Newtonov disk se sastoji od kružnog diska podijeljenog na segmente

obojene osnovnim spektralnim bojama: crvenom, zelenom i plavom, te
njihovim kombinacijama. Kada se disk brzo rotira, boje se vizuelno
spajaju, stvarajući percepciju bijele svjetlosti. Ovaj fenomen
demonstrira kako se aditivnim miješanjem osnovnih boja svjetlosti
može dobiti širok spektar boja, uključujući bijelu.

U kontekstu razvoja mobilnih aplikacija, principi demonstrirani

Newtonovim diskom su od ključne važnosti. Ekrani mobilnih uređaja
koriste RGB (crveno, zeleno, plavo) sistem boja, gdje se različite boje
stvaraju kombiniranjem ove tri osnovne boje u različitim intenzitetima.
Razumijevanje kako se ove boje mogu kombinirati za stvaranje
širokog spektra vidljivih boja omogućava programerima i dizajnerima
da precizno manipulišu bojama i vizuelnim doživljajem u mobilnim
aplikacijama.

Precizna kontrola boja je vitalna za dizajn korisničkog interfejsa (UI) i

korisničkog iskustva (User Experience (UX)) u mobilnim
aplikacijama. Pravilan izbor i kombinacija boja mogu poboljšati
čitljivost, navigaciju i estetiku aplikacije, što direktno utječe na
zadovoljstvo i angažman korisnika. Također, razumijevanje boja i
njihovih kombinacija pomaže u osiguravanju pristupačnosti,
omogućavajući dizajnerima da kreiraju aplikacije koje su lako
upotrebljive i za osobe s oštećenjem vida.

Konačno, Newtonov disk i principi aditivnog miješanja boja pružaju

osnovu za razvoj vizuelno privlačnih i funkcionalnih mobilnih
aplikacija, omogućavajući dizajnerima i programerima da efikasno
koriste boje kako bi poboljšali korisničko iskustvo i interakciju.
Ponavljanje gradiva i praktična provjera usvojenosti nastavnih
sadržaja

Primjer praktične provjere znanja na računaru - 45 min

Vi ste dizajner mobilnih aplikacija i trebate napraviti prototip

korisničkog interfejsa za mobilnu aplikaciju za praćenje i upravljanje
osobnim financijama. Klijent je već dao osnovne zahtjeve i
specifikacije, a sada je vaš zadatak izraditi prototip interfejsa koji će
prikazati osnovne funkcionalnosti aplikacije.

Zadatak 1. Odaberite alat za prototipiranje po vašem izboru. Možete

koristiti alate poput Figma, Adobe XD, Sketch ili bilo kojeg drugog
alata s kojim ste upoznati.

Zadatak 2. Dizajnirajte početni ekran aplikacije. Ovdje bi trebali

prikazati glavni izbornik ili početne opcije koje korisnik može
odabrati.

Zadatak 3. Omogućite da se pritiskom na određenu opciju otvori novi

ekran ili dijalog. Pokušajte simulirati kako bi aplikacija stvarno
funkcionirala.

Zadatak 4. Dizajnirajte barem još dva ekrana unutar aplikacije. Ovi

ekrani bi trebali prikazivati različite funkcionalnosti ili opcije.

Zadatak 5. Povežite ekrane tako da korisnik može navigirati između

njih. Ovo uključuje povezivanje dugmadi ili ikona s odgovarajućim
zaslonima.

Zadatak 6. Spremite svoj prototip i pripremite ga za dijeljenje.