Design System as a Product @ Frontrend Vol.8

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
December 05, 2016

Design System as a Product @ Frontrend Vol.8

デザインを多くに伝える『ことば』に変え、メンテナンスし続けることがシステムをデザインするということ。
その『ことば』達の辞書であるDesign Systemsを作るために必要な気づき、人、そしてチームについて。

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

December 05, 2016
Tweet

Transcript

  1. Design System as a Product Yuya Saito @ Nikkei Frontrend

    Vol.8 2016.12.05
  2. Frontend Engineer @ Nikkei Yuya Saito

  3. frontendweekly.tokyo Frontend Weekly

  4. None
  5. WHat is Design System?

  6. “ A design system is everything that makes up your

    product. — Mark Otto
  7. Typography Layout Grid Color Icon Components Coding Style…

  8. Examples

  9. Bootstrap by Twitter

  10. Material Design by Google

  11. Lightning Design System by salesforce

  12. Predix Design System by GE

  13. Origami by Financial Times

  14. Why Do We Need Design System?

  15. by OpenSignal

  16. None
  17. Design Technical debt

  18. None
  19. 1

  20. None
  21. Managed Chaos

  22. Components of Design System

  23. Style Guides

  24. Brand identity

  25. Design language

  26. Voice and tone

  27. Code style

  28. Pattern Libraries

  29. Problem with Design System

  30. Design System

  31. Goal for Design System

  32. None
  33. None
  34. Scaling is Hard

  35. Evangelising is Harder

  36. People for Design System

  37. “ A Design System isn’t a project. It’s a product,

    serving products. — Nathan Curtis
  38. Introduce The Talents

  39. デザイナがどんなコンセプトを形に しようとしているのかについて 共感できること

  40. エンジニアがシステムを作るのに 必要となる仕様や⽅法論について 理解できること

  41. デザイナとエンジニアの中間に ⾝を置けるバランス感覚を持った⼈

  42. None
  43. None
  44. Design Fundamentals

  45. Tiny Debt also scale fast

  46. Should Designer Code?

  47. Not gonna lie. It’s too hard to learn it now

  48. デザイナとエンジニアには ギャップがある

  49. Continuous Collaboration

  50. Continuous Delivery

  51. Concept Design System Develop

  52. None
  53. Why?

  54. ベストケースシナリオ vs. 現実的なデータ

  55. "Living" Design System

  56. ⽬に⾒えているものの、 ⾔葉にしづらかったビジュアルを ⾔語化する

  57. Introduce Team Model

  58. "Living" Design System

  59. "Living" Design System

  60. Operation

  61. Local development environment ⾃動リロード ⾃動コンパイルとソースマップなど… ローカル開発環境

  62. Front-end automated testing JavaScriptのユニットテスト E2Eテスト アクセシビリティのテストなど… ユニット、E2Eテストなどの⾃動化

  63. Cross-browser test automation 先ほどのテスト群を、 様々なブラウザでもテストできる環境 クロス・ブラウザテストの⾃動化

  64. Visual regression testing UIコンポーネントの表⽰テスト ビジュアル・リグレッション

  65. Documentation JSDoc SassDoc... ドキュメント⽣成

  66. Automate & Integrate

  67. Solitary Model 単⽣モデル

  68. Design System

  69. Bootstrap by Twitter

  70. Mini Bootstrapを作って、 それを⾊んな⼈に使って貰う

  71. 確⽴されたパターンライブラリの 存在は⼤きな利点

  72. Design System product

  73. ⾃分達の解決が気にいらないなら、 使わなくても構わない

  74. Centralized Model 中央集権モデル

  75. Design System

  76. Best for Agency

  77. Pattern Library product product product product

  78. Pattern Library product product product product

  79. アクティブな参加や貢献を得づらい

  80. Federated Model 連合モデル

  81. Material Design by Google

  82. Design System

  83. None
  84. UX IA IxD

  85. Not for Everyone

  86. Which Model Is Best for Me?

  87. It Depends...

  88. • 会社の規模 • プロダクトの規模 • Design Systemのスコープ

  89. Solitary Model 単⽣モデル

  90. Federated Model 連合モデル

  91. Centralized Model 中央集権モデル

  92. Design System Is a product

  93. Goal

  94. わかりやすく売り上げが出る プロダクトではない

  95. Product Needs A team

  96. Team

  97. チームの利点

  98. None
  99. “ ͲΜͳΞϓϦͰ͋Ζ͏ͱɺαʔϏεͰ͋Ζ͏ͱຊ ౰ʹඞཁͳͷ͸༷ʑͳઐ໳ੑΛ࣋ͬͨਓୡͰฤ੒ ͞ΕΔνʔϜͰ͢ɻ ٻΊΒΕ͍ͯΔઐ໳ੑΛνʔϜͰൃشͰ͖Δਓ͸ɺ ࣗ෼ࣗ਎͕࣋ͭઐ໳Ҏ֎ͷԞਂ͞Λ஌͍ͬͯΔਓ Ͱ͢ɻ — Yuya Saito

  100. Thank you! @cssradar