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

デザインとエンジニアリングをつなぐコンポーネントの運用設計

cawpea
February 08, 2019

 デザインとエンジニアリングをつなぐコンポーネントの運用設計

# ThinkAtomicDesign でお話した資料です。
https://thinkatomicdesign.connpass.com/event/115574/

cawpea

February 08, 2019
Tweet

More Decks by cawpea

Other Decks in Design

Transcript

  1. デザインガイドラインの策定 1. Design Principle  プロダクトのデザインを考える上で基本となる思想について 2. Structure  情報のモデリング、ナビゲーション、モードの扱いについて 3. Skelton

     画⾯内におけるペイン構成と各ペインの役割等について 4. Visual Design  ⾊やアイコン、タイポグラフィ、ラベリング等について 5. UI Components  プロダクトで扱うUI Componentについて デザイン思想の⾔語化
  2. ▼ Controls ・Buttons ・Tabs ・Dropdown Menu ・Searchable Select Menu ・Text

    Field ・Check Box ・Radio Button ・Date Time Picker ▼ Buttons ・使⽤⽅法 ・スタイルのパターンと意味 ・禁⽌事項 デザイン思想の⾔語化 1. Design Principle 2. Structure 3. Skelton 4. Visual Design 5. UI Components
  3. • カプセル化 • ローカルスコープの獲得 • 交換可能性、再利⽤性の向上など • UIのパターン化 • ユーザーの認知、学習の効率化など

    Webにおいてコンポーネント化するメリット デザイン観点のメリット 実装観点のメリット 構造 装飾 振る舞い