ux introduction

Download UX Introduction

Post on 16-Aug-2015

164 views

Category:

Design

1 download

Embed Size (px)

TRANSCRIPT

  1. 1. UX Introduction
  2. 2. Im working in Marvel: War of Heroes project
  3. 3. and started learning UX & UI from SQUAD project
  4. 4. UI? UX? Why? How? Whats next?
  5. 5. What is UI? Stands for User Interface Its everything you see on the screen:
  6. 6. What is UI? Stands for User Interface Its everything you see on the screen: Information Inputs Animations
  7. 7. Main buttons are still clear if the screen is blur
  8. 8. What is UX? Stands for User Experience Three components of UX: Usability Look Feel
  9. 9. What is UX? Stands for User Experience Three components of UX: Usability (How to use?) Look (Color, graphic, theme...) Feel (Joy of use, Interaction, Reaction)
  10. 10. Good design = Good UI + Good UX
  11. 11. Good design = Good UI + Good UX Bad news: Its mostly gifted
  12. 12. Good design = Good UI + Good UX Good news: It can be learnt
  13. 13. Good graphic, bad UX
  14. 14. Good graphic, bad UX
  15. 15. Bad graphic, good UX
  16. 16. Bad graphic, good UX
  17. 17. Bad graphic, good UX
  18. 18. Good graphic, good UX
  19. 19. Good graphic, good UX Can you guess where the BUY button is?
  20. 20. Good graphic, good UX
  21. 21. Good graphic, good UX Can you guess where clickable areas are ?
  22. 22. Good graphic, good UX
  23. 23. Good graphic, good UX
  24. 24. Good graphic, good UX
  25. 25. Bad graphic, bad UX
  26. 26. Bad graphic, bad UX
  27. 27. Bad graphic, bad UX
  28. 28. Why should we care ? Users need tools to solve their problems If they feel good, they stay
  29. 29. Why should we care ? Users need tools to solve their problems If they feel good, they stay, then pay
  30. 30. Why should we care ? Users need tools to solve their problems If they feel good, they stay, then pay They dont care about: Your superb data design Your high-end technology YOU
  31. 31. Why should we care ? CS cost decreases after improving UX Revenue increases after improving UX
  32. 32. Why should we care ? CS cost decreases 90% after improving UX Revenue increases 300M$ after improving UX
  33. 33. Basic UX design process 1. Research & strategy 2. Wireframe 3. Mockup 4. Prototype
  34. 34. Basic UX design process 1. Research & strategy 2. Wireframe Basic presentation of design elements Used for communication, documentations 3. Mockup 4. Prototype
  35. 35. Basic UX design process 1. Research & strategy 2. Wireframe 3. Mockup Static visualization Used for visual feeling 4. Prototype
  36. 36. Basic UX design process 1. Research & strategy 2. Wireframe 3. Mockup 4. Prototype Add interaction Used for user testing
  37. 37. Whats coming next ? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
  38. 38. Whats coming next ? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
  39. 39. Whats coming next ? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
  40. 40. Whats coming next ? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
  41. 41. Whats coming next ? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
  42. 42. Whats coming next ? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
  43. 43. Whats coming next ? 1. Common design mistakes 2. Basic design principles 3. Basic emphasizing techniques 4. UI components 5. Animations in UI 6. Trends 7. Wireframe, Mockup, Prototype
  44. 44. Whats coming next ? And a lot more: Color theory Typography User persona ...
  45. 45. UX Resources Googles Material Design
  46. 46. UX Resources Smashing Magazine
  47. 47. UX Resources Others
  48. 48. Any questions?
  49. 49. Its just the begining...