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.




YUSUKE GOTO














What Design System is
A design system unites product teams around a common
visual language. It reduces design debt, accele...
What Design System is
Questions
Conclusion


5 Phases
Phase 0






























Phase 1
Phase
Motivation
Context
Atomic Design
Atomic Design
Atomic Design
Atomic Design
Atomic Design


Styleguide


Styleguide
Phase 1


Phase 1






Phase 2
Phase
Motivation
Context


Phase 2
Engineers’ Motivation
Designers’ Motivation


Phase 2
Engineers’ Motivation
Designers’ Motivation


Designers’ Output Efficiency










Atomic Design
Making Design Comp More Atomic Designable
Phase 2
Phase 2




Phase 3
Phase
Motivation
Context
Interface Inventory




Phase 4
Phase
Motivation
Context
Information Accessibility
Color Contrast
Color Contrast
Color Contrast
Color Contrast
Color Management
Color Management






Phase 5
Phase
Motivation
Context
to be continued…
Conclusion
Atomic Design







YUSUKE GOTO
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
フェーズに応じて育てるデザインシステム
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

7

Share

Download to read offline

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

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  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
  • sayakaohnuma

    Feb. 20, 2020
  • MorimotoYasuhiko

    May. 24, 2018
  • ssuser47ad25

    May. 18, 2018
  • NaruhitoKubota

    Apr. 30, 2018
  • hayatomizuno

    Apr. 23, 2018
  • TakahiroFujii3

    Apr. 22, 2018
  • syuichitsuji

    Apr. 22, 2018

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.

Views

Total views

8,314

On Slideshare

0

From embeds

0

Number of embeds

5,927

Actions

Downloads

17

Shares

0

Comments

0

Likes

7

×