Prototype - ultimativna dizajn specifikacija

DaFED#37
"A zašto ne izgleda kao na mokapu?" - broj #1 problem između dizajnera i FE developera je komunikacija, naročito na većim projektima kada imamo timove i jednih i drugih. Rezultat je nekonzistentnost izmedju dizajniranog i iskodiranog, razlika između očekivanog i implementiranog UX-a. Kako prevazići ovu večitu problematiku? Razmotrimo jedan zanimljiv prototyping framework koji upravo to pokušava.

Transcript

1. PROTOTYPE Ultimativna dizajn specifikacija
4. big company small startup
5. UX dizajn proces
6. Strategija
7. Koncept
8. Planiranje
9. Istraživanje & validacija
10. ‘DE SU BRE MOKAPI??
11. UI dizajn Mockups
12. Using static visuals is bringing a knife to a gun fight. “They can only communicate something that’s superficial, artificial. They’re high- fructose, extra sweet, but even though of little nutritional value, people love them and so want more and more. We designers have largely learned to live with all of the deficiencies of static visuals, and we compensate for them with our familiarity with the tools that we use to make them.” - Andrew Clarke
13. Različiti ljudi, različit experience designer customer user developer
16. Krajnji UX zavisi od developera designer customer user developer
17. A gde je specifikacija? Developer: Kakva bre specifikacija? Dao sam ti invision, video iz aftera... Designer: ‘Oću svaki piksel da mi dokumentuješ. Sve assete da mi isečeš. A ove animacije, ufff...ne znam dal će to moći da se napravi... Developer:
18. Developers require ENABLING design specifications
20. A šta se desi ako smanjim ekran? Aaa...a responsive? Developer:
22. Design Development HTML prototyping
23. Ali ja sam DIZAJNER, bre! Ne treba (neću) da kodiram :(
24. “Morao sam mnogo da čitam oko elektronike, magnetnih polja, solenoida, struje...”
25. “Naučio sam kako radi strug, kako se na njemu obrađuju materijali, šta može a šta ne može da napravi.”
28. Budi bolji UI dizajner. Nauči HTML/CSS/JS.
29. Zašto HTML prototyping? Bolja komunikacija UX-a Lakše održavanje Testiranje Efikasniji timski rad Kvalitet finalnog proizvoda
31. DESIGN IS NEVER DONE
33. Prototype UI designers users FE developers UX designers stakeholders product owners Efikasniji teamwork
34. QUALITY
35. Case study people 200 designers 30 developers 100 managers 2many SCRUM methodology
37. JUI framework - invision na steroidima -
38. HTML CSS JS struktura izgled + ponašanje interakcije primer: dugme + plave boje + na klik otvara sakriveni menu stanje 1 stanje 2 stanje 3 stanje x . . . Component
39. HTML CSS Screen HTML HTML CSS JS Screen HTML CSS JS Screen Component Screen composing
40. JUI demo time :)
41. Hvala na pažnji :) toorshia.com