Zašto ovaj video?
Objavljen 30.juna,2025., dakle izuzetno svež i relevantan
Obuhvata kompletan UI/UX proces od istraživanja do vizuelnog dizajna i prototipiranja
Ima odličan rejting i komentare iz zajednice, što ga čini pouzdanim za učenje
UI/UX označava
UI = Korisnički interfejs
UX = Korisničko iskustvo
To su dva ključna aspekta u dizajnu digitalnih proizvoda kao što su veb sajtovi, mobilne aplikacije i softveri.
UI (User Interface – Korisnički interfejs)
UI se odnosi na izgled i osećaj proizvoda:
- Raspored elemenata
- Šeme boja – link (ne koristite boje koje vrište!)
- Fontovi i tipografija – link
- Dugmad, ikone i vizuelni elementi
- Prilagodljivost uređajima i doslednost
Cilj
je da interfejs bude vizuelno privlačan i lak za navigaciju.
UX (User Experience – Korisničko iskustvo)
UX se fokusira na ukupno korisničko iskustvo:
- Jednostavnost upotrebe
- Korisnički tokovi i putanje
- Pristupačnost
- Struktura informacija
- Emocionalna reakcija i zadovoljstvo korisnika
Cilj
je da proizvod bude intuitivan, efikasan i prijatan za korišćenje.
UI vs UX: Brza analogija
Zamisli automobil:
- UI je tabla sa instrumentima, volan i dizajn sedišta.
- UX je koliko je vožnja udobna, koliko je lako voziti i koliko si zadovoljan kao vozač.
✅ Zajedničke dobre UI/UX prakse:
| Princip | Opis |
|---|---|
| Jasna hijerarhija | Korisnik odmah zna gde da gleda i šta da klikne |
| Doslednost dizajna | Boje, dugmad, ikone prate isti vizuelni stil |
| Feedback korisniku | Sistem jasno pokazuje šta se dešava (loading, uspeh, greška) |
| Prilagodljivost uređajima | UI se lepo prikazuje i na mobilnom i na desktopu |
| Pristupačnost (a11y) | Dizajn razumljiv i osobama sa invaliditetom |
Evo dva konkretna primera dobre UI/UX prakse, koji se često koriste kao uzor u svetu dizajna.
Prikazani su kroz poznate aplikacije i principi koji ih čine uspešnim:
Duolingo: mikrointerakcije i motivacija
🟢 UX prednosti:
Svaka lekcija traje par minuta – nizak prag ulaska
Gamifikacija (XP, dnevne serije, zvukovi uspeha)
Jasan tok učenja bez zbunjujućih ekrana
🔵 UI prednosti:
Ilustracije koje pomažu pamćenju
Vesela paleta boja, jednostavne forme
Dosledni stil dugmadi i poruka
Spotify:
Fokus na sadržaj i dostupnost
🟢 UX prednosti:
-
Personalizovane liste odmah vidljive
-
Brz pristup omiljenim pesmama i plejlistama
-
Odličan „flow“ i u vožnji (velika dugmad, jednostavna navigacija)
🔵 UI prednosti:
-
Tamna tema (fokus na sadržaj)
-
Fluidne animacije
-
Ikone su poznate i jasno predstavljene
Evo jasne i praktične UX dizajn checkliste
koju možeš koristiti kao vodič tokom svakog projekta — bilo da praviš aplikaciju, sajt ili samo prototip:
✅ UX Dizajn Checklist (lista za proveru)
🧭 1. Razumevanje korisnika
Da li znaš ko su tvoji korisnici? (npr. personae)
Da li si razumeo njihove ciljeve i frustracije?
Da li postoji korisnički tok (user journey map)?
📐 2. Struktura i navigacija
Da li je informacija organizovana logično?
Da li korisnik uvek zna „gde se nalazi“ u sistemu?
Da li postoji jasan tok akcija (npr. login → profil → porudžbina)?
🎯 3. Jednostavnost i fokus
Ima li svaka stranica samo jedan jasan cilj?
Da li imaš što manje ometanja (distractions)?
Da li je dizajn minimalistički, ali funkcionalan?
🔍 4. Pristupačnost (Accessibility)
Da li ima dovoljno kontrasta između teksta i pozadine?
Da li su fontovi čitljivi na svim uređajima?
Da li se sve može koristiti i tastaturom (za korisnike sa smanjenom pokretljivošću)?
📱 5. Mobilna prilagođenost (Responsive dizajn)
Da li interfejs dobro izgleda na mobilnim i tablet uređajima?
Da li su dugmad dovoljno velika za dodir?
Da li se sadržaj ne „lomi“ pri promeni veličine ekrana?
🗣️ 6. Povratna informacija (Feedback)
Da li korisnik zna kada je nešto uspešno urađeno?
Da li su greške jasno prikazane i korisniku razumljive?
Ima li indikatora za učitavanje (loading) i stanja?
🔁 7. Konzistentnost
Da li svi elementi izgledaju i ponašaju se isto na različitim delovima aplikacije?
Da li koristiš isti ton i stil komunikacije?
Da li su ikone i simboli prepoznatljivi?
🧪 8. Testiranje sa korisnicima
Da li si testirao prototip sa pravim korisnicima (čak i 3–5)?
Da li si primio povratne informacije i uneo promene?
Da li korisnik može samostalno završiti zadatke bez pomoći?
📄 Bonus: Prezentacija/Portfolio
Da li si dokumentovao UX proces (wireframe, tok, prototip)?
Da li možeš objasniti zašto si doneo određene odluke?
Da li bi klijent ili poslodavac lako razumeo tvoje rešenje?
Ti si vredna/vredan čitalac ovog blog teksta, bravo!
Pošto si stigla/stigao dovde, zaslužuješ BONUS -ŠABLON: PRIKAZ UX PROCESA U PORTFOLIU
Šablon za prikaz UX procesa u portfoliju,
koji možeš koristiti za bilo koji projekat (aplikaciju, sajt, sistem). Format je fleksibilan — možeš ga koristiti u PDF-u, web portfoliju, Behance postu ili prezentaciji:
ŠABLON: Prikaz UX procesa u portfoliju
1️⃣ Naslov projekta
Ime projekta: (npr. Redizajn aplikacije za poručivanje hrane)
Vrsta projekta: (freelance, timski, lični, školski)
Uloga: UX dizajner (ili UI/UX dizajner, istraživač…)
Alati: Figma, Miro, Maze…
2️⃣ Problem i cilj
Opis problema:
(Šta nije funkcionisalo? Npr: Korisnici nisu mogli lako da pronađu proizvode.)Cilj projekta:
(Poboljšati tok pretrage i povećati konverzije.)
3️⃣ Istraživanje (UX Research)
Metode: ankete, intervjui, analiza konkurencije
Ključni uvidi:
60% korisnika ne može da pronađe filtere
Navigacija zbunjuje starije korisnike
🎯 Ovde možeš dodati fotografije iz intervjua, mapu empatije, ili korisničke persone.
4️⃣ Korisnički tok (User Flow)
Prikaži tok koraka koje korisnik pravi (npr. Home → Kategorije → Filter → Proizvod → Checkout)
Možeš koristiti skicu iz FigJam/Miro
5️⃣ Wireframe faza
Dodaj crno-bele wireframe-ove ključnih ekrana
Objasni zašto si izabrao baš taj raspored (UX logika)
6️⃣ UI dizajn (vizuelni deo)
Prikaz gotovih ekrana (desktop i/ili mobilni)
Kratak opis boja, tipografije i UI komponenti
Ako si pravio design system – dodaj primer
7️⃣ Prototipiranje i testiranje
Kratak video/gif interakcije (ili link do Figma prototipa)
Kako si testirao (Maze, korisnici, pitanja)?
Šta si izmenio nakon testiranja?
8️⃣ Rezultati i zaključci
Merenja (ako ih ima): npr. 25% brže porudžbine, 15% manje napuštenih koraka
Šta si naučio? (dizajn odluke, UX uvide, alati)
✅ Bonus: refleksija
Šta bi uradio drugačije sledeći put?
Koji je bio najveći izazov?
Koji deo ti je bio najzanimljiviji?
🎨 Vizuelna preporuka:
Koristi screenshotove + kratak tekst → idealno za Behance
Prikazuj “pre i posle”
Koristi vizuelne elemente (ikone, timeline, oznake)
Evo univerzalnog šablona za drugi UX projekat, koji možeš popuniti za bilo koji proizvod — web sajt, aplikaciju, interni sistem itd.
ŠABLON: UX studija slučaja za portfolio
🟠 Naziv projekta
Ime:
Vrsta projekta: lični, timski, freelance, komercijalni
Rola: UX dizajner / UI dizajner / istraživač
Trajanje: (npr. 3 nedelje)
Alati: Figma, Maze, Miro, Adobe XD…
🟡 Uvod (kontekst)
Kompanija / klijent / problem domen
Zašto je projekat pokrenut?
Ko je ciljna grupa?
🔴 Problem i ciljevi
Koji problem rešavaš?
Koji je UX cilj?
Koji su bili KPI-jevi ili očekivanja?
🔍 UX istraživanje
Koga si anketirao/intervjuisao?
Kako si sproveo istraživanje?
Ključni uvidi (navedi 3–5)
🗺️ User flow + Journey map
Vizuelni prikaz toka korisnika
Kojim koracima dolazi do cilja?
Frustracije i zadovoljstva po koraku
✏️ Wireframe faza
Grubi raspored elemenata
Koji ekrani su najvažniji?
Screenshotovi skica
🎨 Vizuelni dizajn (UI)
Boje, fontovi, komponente
Mobilni + desktop prikazi
Mockup ekrana (pre i posle)
🧪 Testiranje i iteracije
Ko je testirao prototip?
Koja pitanja si postavio?
Šta si promenio na osnovu rezultata?
📊 Rezultati
Vreme obavljanja zadatka (pre/posle)
Broj klikova, konverzije, engagement
Citati korisnika
✅ Refleksija
Šta si naučio kao dizajner?
Šta bi uradio drugačije?
Sledeći koraci?
💡 BONUS:
Ako praviš više projekata — koristi isti raspored u svima (konzistentnost = profesionalnost).
Figma primeri:
Modern portfolio templates
