Created and presented for female geek Indonesia on 30 July 2016 at Microsoft Indonesia

1. Understanding UI & UX from
Developer Side
- By Irfan Maulana -

2. About Me
• Name : Irfan Maulana
• Work : Blibli.com
• Position : Software Development Engineer
• Role : Front End Developer

3. Outline
• Intro
• Understanding UI & UX
• UI & UX Process
• What we can support as Developer

4. Intro

5. Why it’s matter ?

6. Why Developer should know about
UI & UX ?

7. Most of Developers just
complain
about the wireframe/mockup
without giving
the solution.

8. So, lets start to understanding them.

9. Understanding UI & UX

10. What is
“User Interface” ?

12. “User Interface (UI) is everything
designed into an information device with
which a human being may interact.”
- source : searchsoa

13. UI Design is a closer to what we refer to
graphic design.

14. What is
“User Experience” ?

17. “User Experience (UX) refers to
person’s entire experience using a
particular product, system or service.”
- source : wikipedia

18. UX Design is not just Interface / Visual
design.

19. Experience that you love

20. Experience that you hate

21. “ Bad UX Kills People
Good UX Saves Lives “

22. UI & UX

24. User Interface

25. User Experience

26. UI & UX Process

31. Interview

32. Survey

33. Make a Persona

35. Structure of Menu

37. Wireframe & Prototype

39. Launch and Measure

41. What we can support as
Developer

42. Clash of Designer vs Developer
What designer sketch

43. Clash of Designer vs Developer
What developer do

44. So, what we can do ?

45. 1.
Developer and designer make
standardization for styling guide.

46. 2.
Developer should be active contributor in
early design phase.

47. 3.
Clear specification from designer and
developer execute the design base on it
with pixel perfection.

48. 4.
Daily deploy to dev environment to get
fast feedback from designer.

49. 5.
Speed is part of user experience.
Communicate if the design will make big
impact to speed

50. 6.
Because there is no perfect,
Should be always there space for
negotiation between developer and
designer.

52. Contact Me
• Blog : mazipanneh.wordpress.com
• Twitter : @Maz_Ipan
• Facebook : /mazipanneh
• Linkedin : /in/irfanmaulanamazipan
• Mail : mazipanneh@gmail.com

53. Thank You
This is end of slides.