AI/UX/UI/IA i sve te lijepe riječi

Ovo predavanje povezuje dugogodišnje iskustvo izrade web stranica te promjenama koje donosi era umjetne inteligencije, s fokusom na to kako se mijenja način razmišljanja i rada. Obrađuje kako AI utječe na procese dizajna i razvoja te kako ga možemo iskoristiti za veću produktivnost, brže testiranje ideja i kvalitetnije digitalne proizvode.

Transcript

1. Emanuel Blagonić • emanuel@blagonic.com • consultio.hr AI/UX/UI/IA i sve te lijepe riječi
2. R a dite li d a n a s svoj pos a o n a isti n a čin k a o i prije pet godin a ?
3. Podignite ruku a ko sljedeć a tvrdnj a vrijedi z a v a s Koristio s a m AI b a rem jednom u svom r a du
4. Z a držite ruku u zr a ku a ko… Umjetnu inteligenciju koristite redovito (tjedno ili češće)
5. Z a držite ruku u zr a ku a ko… Ne možete z a misliti d a d a n a s r a dite bez pomoći umjetne inteligencije
6. AI nije s a mo novi a l a t – to je nov a slobod a d a griješite brže, učite brže i gr a dite bolje digit a lne proizvode.
7. J a s a m Em a nuel Bl a gonić
8. — T a t a
10. — T a t a — Av a nturist
11. Annapurna Circuit Camino de Santiago Mount Kilimanjaro
12. — T a t a — Av a nturist — Ali i… UX inženjer s 25+ godin a iskustv a u industriji te community entuzij a st
13. — Prvi web n a pr a vio s a m 1997. koristeći Netsc a pe N a vig a tor Gold
14. Frajer koji je dobrim dijelom odgovoran što se danas bavim webom
16. Web nek a d i d a n a s?
17. Prije Krist a … p a rdon, prije 2022. Ručni procesi / Skuplje iter a cije / Dulj a v a lid a cij a
18. Toddler ph a se Ch a tGPT / Cl a ude / Copilot
19. Zrel a Zrelij a f a z a Codex / Cl a ude Code / Cursor
20. Z a što ovo (više) nije hype?
21. 84% developer a Trenutno koristi ili pl a nir a koristiti AI u sv a kodnevnom r a du https://survey.stackover fl ow.co/2025
22. 8x više generir a nog kôd a Anthropic k a že d a developeri d a n a s kreir a ju 8x više kôd a , 67% više Pull Requestov a , … https://www.anthropic.com/research/how-ai-is-transforming-work-at-anthropic
23. 1,3 milij a rde Je procijenjen a vrijednost tržit a gener a tivne umjetne inteligencije u diz a jnu u 2026., i penje se n a 14 milij a rdi u 2034. https://www.precedenceresearch.com/generative-ai-in-design-market
24. Je li vrijeme d a r a skrstimo s a st a rim procesom diz a jn a ?
25. Brief → Istr a živ a nje → Koncept → Wirefr a me → Diz a jn → Prezent a cij a → Iter a cij a → Isporuk a
26. Kr a tki odgovor: ne. A nešto dulji?
27. Brief → Istr a živ a nje → Koncept → Wirefr a me → Diz a jn → Prezent a cij a → Iter a cij a → Isporuk a
28. Pr a vo pit a nje nije “je li AI dob a r ili potreb a n” nego “z a koju f a zu, i koliko?”
29. Pr a ktične primjene
30. — Moodbo a rding z a 20 minut a umjesto pol a d a n a — v0. a pp: od opis a do r a dnog UI-j a u sekundi — Cl a ude/Ch a tGPT k a o kritič a r diz a jn a
31. N a jveći problem umjetne inteligencije u diz a jnu d a n a s?
32. Neorigin a lnost.
33. Moj proces diz a jn a – d a n a s
34. 00 Inform a cijsk a a rhitektur a
35. 00 IA Prije diz a jn a , mor a mo im a ti strukturu
36. N a temelju sljedećeg brief a , predloži strukturu str a nic a i n a vig a ciju. Koji s a drž a j mor a biti n a prvoj r a zini? Koje str a nice mogu biti skrivene dublje?
37. 01 Iterir a nje prvog diz a jn prompt a
38. Želim kreir a ti diz a jn sistem z a (n a ziv klijent a ). Nekoliko inform a cij a o klijentu: (popis bitnih inform a cij a ). Pripremi mi i pit a j me pit a nj a koj a su relev a ntn a , k a ko bih ti odgovorio n a njih prije nego što kreir a š prompt kojeg ću d a ti Cl a ude Designu d a mi pripremi diz a jn sistem.
39. 02 Diz a jn
40. 02 Diz a jn Generir a nje design sistem a u Cl a ude Designu / Google Stitchu
44. 02 Diz a jn Iskoristimo Cl a ude Design / Google Stitch k a ko bismo kreir a li idejno rješenje jedne str a nice prije nego što krenemo “kôdir a ti”
47. 03 Kodir a nje
48. 03 Kodir a nje Cursor / Cl a ude Code / OpenAI Codex
49. 03 Kodir a nje Prije nego krenemo? Podeš a v a nje projekt a . Priprem a m a terij a l a i kontekst a z a AI.
50. Treb a m početnu str a nicu z a (n a ziv projekt a ). M a terij a li ti se n a l a ze u direktoriju “resources”. Diz a jn sistem ti se n a l a zi u direktoriju “design system”. Treb a m sljedeće elemente: (popis elemen a t a ). Pit a j me što ti nije j a sno.
51. 03 AI z a kodir a nje? Prototip a ? D a Prezent a cijskog web a ? D a Produkcijsku verziju mobilnog b a nk a rstv a ? Ne
52. 04 B a ck & forth / iliti iterir a nje
53. 04 Iterir a nje Prv a verzij a NIKAD nije f in a ln a
54. 04 Iterir a nje Ne r a dimo velike iter a cije – fokusir a mo se n a det a lje (hero blok, c a ll to a ction)
55. Nis a m z a dovolj a n k a ko izgled a hero blok. Previše je jednolič a n, ne izgled a z a nimljivo, c a ll to a ction gumbi su prem a li, fotogr a f ij a je previše ist a knut a . Idemo se fokusir a ti n a gumbe. Možeš li ih n a pr a viti većim a , prob a j m a li gr a dient, prim a rn a boj a , n a dnu 10% t a mnij a ?
56. 04 Iterir a nje Z a što det a lji? AI slop + optimiz a cij a potrošnje token a
57. 04 Iterir a nje N a jčešći problem? AI ne vidi “širu sliku” – primjer? Neoptimizir a ni CSS
58. Sve sekcije tretir a j k a o v a rij a cije istog section p a ttern a . Sv a k a sekcij a može s a drž a v a ti eyebrow, title, subtitle, content a re a , a ctions i footer, pri čemu je content a re a jedini ob a vezni element. Koristi iste kl a se, stilove i komponente z a elemente iste n a mjene bez obzir a u kojoj se sekciji n a l a ze te izbjeg a v a j kreir a nje speci f ičnih ( a istih) stilov a z a sv a ku sekciju, k a d a već postoji odgov a r a jući z a jednički p a ttern.
59. 04 Iterir a nje I ne z a bor a vite!
60. N a kon što to n a pr a viš i k a d j a potvrdim d a je f in a lni rezult a t dob a r, molim te d a a žurir a š .md dokument s uput a m a .
61. 05 S a drž a j :’(
62. 05 S a drž a j AI može biti dob a r z a f a zu prototip a , ne z a f in a lni web.
63. 05 S a drž a j Trik? Recite mu d a n a piše prvi dr a ft n a engleskom i ond a prevede.
64. 06 QA
65. 06 QA Google Lighthouse. Nem a d a lje.
66. 06 QA L a g a o s a m. Im a ! Pl a ywright CLI ❤
67. 07 S a moispr a vlj a nje
68. 07 S a moispr a vlj a nje Iskoristi AI d a optimizir a AI
69. Koristi Pl a ywright CLI d a pogled a š sve str a nice. Testir a j mobile, t a blet, desktop. N a pr a vi screenshote i a n a lizir a j sve nekonzistentnosti (fontovi, boje, gumbi, …). N a pr a vi mi popis svih problem a koje n a đeš u posebnom .md dokumentu k a ko bi ih k a snije mog a o ispr a viti.
70. Koristi Pl a ywright CLI. Prođi proces registr a cije n a desktopu i mobitelu. Kreir a j novog user a kojeg ćeš obris a ti n a kon test a . Testir a j edge c a ses, dokumentir a j cijeli f low, popiši eventu a lne probleme. Predloži pozitivne promjene koje mogu utjec a ti n a korisničko iskustvo.
71. 07 S a moispr a vlj a nje Recite mu d a iterir a dok nije 95% z a dovolj a n rezult a tom
72. K a d z a vršiš s (z a d a t a k), testir a j g a sukl a dno prij a šnjim uput a m a dok nisi 95% z a dovolj a n rezult a tom testir a nj a . Ako pron a đeš n a čine z a dod a tnu optimiz a ciju – dokumentir a j ih i izmijeni bez d a me pit a š. Ako pron a đeš bugove – dokumentir a j, ispr a vi ih, bez pit a nj a . Pon a vlj a m – sm a tr a j d a je z a d a t a k riješen tek k a d si 95% z a dovolj a n rezult a tom.
73. 08 Deploy
74. D a kle, hoće li n a s AI z a mijeniti?
75. AI ne može z a mijeniti godine iskustv a . Mi i d a lje određujemo smjer, a on n a m s a mo pom a že d a do cilj a stignemo brže.
76. AI is not a bout repl a cing hum a ns — it's a bout a mplifying hum a n ingenuity. Satya Nadella
77. Those who use AI will repl a ce those who don't. Jensen Huang
78. Horizont se ne širi z a to što je svijet veći. Širi se z a to što se usudimo popeti više. Izlazak sunca na Kilimanjaru, 30. listopad 2019. u 06:06
79. Hv a l a . Pit a nj a ? Emanuel Blagonić • emanuel@blagonic.com • consultio.hr