Design System as a Product @ Frontrend Vol.8

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

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
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
17. Design Technical debt
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
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. デザイナとエンジニアの中間に ⾝を置けるバランス感覚を持った⼈
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
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
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. チームの利点
99. “ ͲΜͳΞϓϦͰ͋Ζ͏ͱɺαʔϏεͰ͋Ζ͏ͱຊ ౰ʹඞཁͳͷ͸༷ʑͳઐ໳ੑΛ࣋ͬͨਓୡͰฤ੒ ͞ΕΔνʔϜͰ͢ɻ ٻΊΒΕ͍ͯΔઐ໳ੑΛνʔϜͰൃشͰ͖Δਓ͸ɺ ࣗ෼ࣗ਎͕࣋ͭઐ໳Ҏ֎ͷԞਂ͞Λ஌͍ͬͯΔਓ Ͱ͢ɻ — Yuya Saito
100. Thank you! @cssradar