Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

フェーズに応じて育てるデザインシステム

4,298 views

Published on

This describes what “AbemaTV”, the Internet TV service in Japan, has been practicing and building as a design system at each phase of its development history.

Published in: Design

フェーズに応じて育てるデザインシステム

  1. 1. 
 

  2. 2. YUSUKE GOTO 
 
 
 
 

  3. 3. 
 

  4. 4. What Design System is A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt.
  5. 5. What Design System is
  6. 6. Questions
  7. 7. Conclusion
  8. 8.
  9. 9. 5 Phases
  10. 10. Phase 0
  11. 11.
  12. 12. 
 

  13. 13. 
 

  14. 14. 
 
 
 
 
 

  15. 15.
  16. 16. 
 
 
 Phase 1 Phase Motivation Context
  17. 17. Atomic Design
  18. 18. Atomic Design
  19. 19. Atomic Design
  20. 20. Atomic Design
  21. 21. Atomic Design
  22. 22.
  23. 23. Styleguide
  24. 24. 
 Styleguide
  25. 25. Phase 1
  26. 26.
  27. 27. Phase 1
  28. 28. 
 
 
 Phase 2 Phase Motivation Context
  29. 29. 
 Phase 2 Engineers’ Motivation Designers’ Motivation
  30. 30. 
 Phase 2 Engineers’ Motivation Designers’ Motivation
  31. 31. 
 Designers’ Output Efficiency
  32. 32. 
 
 
 
 

  33. 33. Atomic Design Making Design Comp More Atomic Designable
  34. 34. Phase 2
  35. 35. Phase 2
  36. 36. 
 
 Phase 3 Phase Motivation Context
  37. 37. Interface Inventory
  38. 38. 
 
 Phase 4 Phase Motivation Context
  39. 39. Information Accessibility
  40. 40. Color Contrast
  41. 41. Color Contrast
  42. 42. Color Contrast
  43. 43. Color Contrast
  44. 44. Color Management
  45. 45. Color Management
  46. 46. 
 
 
 Phase 5 Phase Motivation Context
  47. 47. to be continued…
  48. 48. Conclusion
  49. 49. Atomic Design
 
 
 

  50. 50. YUSUKE GOTO

×