Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design System as a Product @ Frontrend Vol.8

Yuya Saito
December 05, 2016

Design System as a Product @ Frontrend Vol.8

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

Yuya Saito

December 05, 2016
Tweet

More Decks by Yuya Saito

Other Decks in Design

Transcript

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

    View Slide

  2. Frontend Engineer @ Nikkei
    Yuya Saito

    View Slide

  3. frontendweekly.tokyo
    Frontend Weekly

    View Slide

  4. View Slide

  5. WHat is
    Design System?

    View Slide


  6. A design system is everything that makes
    up your product.
    — Mark Otto

    View Slide

  7. Typography
    Layout
    Grid
    Color
    Icon
    Components
    Coding Style…

    View Slide

  8. Examples

    View Slide

  9. Bootstrap
    by Twitter

    View Slide

  10. Material
    Design
    by Google

    View Slide

  11. Lightning
    Design
    System
    by salesforce

    View Slide

  12. Predix
    Design
    System
    by GE

    View Slide

  13. Origami
    by Financial Times

    View Slide

  14. Why Do We Need
    Design System?

    View Slide

  15. by OpenSignal

    View Slide

  16. View Slide

  17. Design
    Technical debt

    View Slide

  18. View Slide

  19. 1

    View Slide

  20. View Slide

  21. Managed Chaos

    View Slide

  22. Components of
    Design System

    View Slide

  23. Style Guides

    View Slide

  24. Brand
    identity

    View Slide

  25. Design
    language

    View Slide

  26. Voice and
    tone

    View Slide

  27. Code style

    View Slide

  28. Pattern
    Libraries

    View Slide

  29. Problem with
    Design System

    View Slide

  30. Design System

    View Slide

  31. Goal for Design System

    View Slide

  32. View Slide

  33. View Slide

  34. Scaling is Hard

    View Slide

  35. Evangelising is Harder

    View Slide

  36. People for Design System

    View Slide


  37. A Design System isn’t a project.
    It’s a product, serving products.
    — Nathan Curtis

    View Slide

  38. Introduce
    The Talents

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. View Slide

  43. View Slide

  44. Design Fundamentals

    View Slide

  45. Tiny Debt
    also scale fast

    View Slide

  46. Should Designer Code?

    View Slide

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

    View Slide

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

    View Slide

  49. Continuous
    Collaboration

    View Slide

  50. Continuous Delivery

    View Slide

  51. Concept
    Design System
    Develop

    View Slide

  52. View Slide

  53. Why?

    View Slide

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

    View Slide

  55. "Living" Design System

    View Slide

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

    View Slide

  57. Introduce
    Team Model

    View Slide

  58. "Living" Design System

    View Slide

  59. "Living" Design System

    View Slide

  60. Operation

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  66. Automate & Integrate

    View Slide

  67. Solitary Model
    単⽣モデル

    View Slide

  68. Design System

    View Slide

  69. Bootstrap
    by Twitter

    View Slide

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

    View Slide

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

    View Slide

  72. Design System product

    View Slide

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

    View Slide

  74. Centralized Model
    中央集権モデル

    View Slide

  75. Design System

    View Slide

  76. Best for Agency

    View Slide

  77. Pattern Library
    product
    product product
    product

    View Slide

  78. Pattern Library
    product
    product product
    product

    View Slide

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

    View Slide

  80. Federated Model
    連合モデル

    View Slide

  81. Material
    Design
    by Google

    View Slide

  82. Design System

    View Slide

  83. View Slide

  84. UX IA
    IxD

    View Slide

  85. Not for Everyone

    View Slide

  86. Which Model Is
    Best for Me?

    View Slide

  87. It Depends...

    View Slide

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

    View Slide

  89. Solitary Model
    単⽣モデル

    View Slide

  90. Federated Model
    連合モデル

    View Slide

  91. Centralized Model
    中央集権モデル

    View Slide

  92. Design System Is
    a product

    View Slide

  93. Goal

    View Slide

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

    View Slide

  95. Product Needs
    A team

    View Slide

  96. Team

    View Slide

  97. チームの利点

    View Slide

  98. View Slide


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

    View Slide

  100. Thank you!
    @cssradar

    View Slide