DesignSystems デジタルプロダクトのためのデザインシステム実践ガイド
https://gyazo.com/5a3cca758f7d7984e77accc7fee3050d
----
読み始める前に
デザインシステムを作る、作り方のプラクティスを知りたい
何をきっかけに生まれるものなのか
どういった粒度、プロセスで作っていくことができるのか
デザインシステムの要素が知りたい
成熟させる、浸透させる、使われていく方法が知りたい
読んでる
--
章立て
基本編
Chapter1-5
パターンライブラリの作成、保存、共有、使用する方法について
応用編
Chapter6-10
デザインシステムを確立、維持するための手段
--
参考事例
Airbnbのデザインシステム
design language system(DLS)
厳格さが特徴
スタイルのカスタマイズをpropによって行うようにしたのだ。自由にカスタマイズ可能なstyleやclassNameなどのpropではなく、isAlpacaというpropを用意するようにした。
Atlassian
パターンを管理する専門チームと、誰もが関与できるオープンソースモデルもある
gatsbyでつくってる
Eurostar
専任チームをがんばって作った
https://gyazo.com/22fd2ebc364afd3036bb0e1048a3e806
s12bt.iconこれ綺麗に組み立てられてるのすごい
s12bt.icon自前システムっぽい
Sipgate
2015年にパターンライブラリはあったけど、コミュニケーション不足からくるパターン増えすぎ問題にぶちあたったらしい。
複数の商品サイトでデザインランゲージを統一することを目標に、新しいパターンライブラリが構築された
s12bt.icon目標があるとスムーズだよなー
TED
少数精鋭でデザインシステムの取り決めをしている
パターンについて深く共有できてシンプルに明文化されている
包括的なパターンライブラリを確立する必要性を感じてない
s12bt.iconなんで？今ある物が十分ということ？
s12bt.iconサイトだけしか作る物がないから？
s12bt.iconすでに網羅されきってるっぽい
--
基本編の章立てを確認する
1-デザインシステム
気になるトピック
パターンライブラリとその限界
効果的なデザインシステムを構築するには
2-デザイン原則
気になるトピック
効果的なデザイン原則の特徴
原則を定義する
原則からパターンへ
3-機能パターン
気になるトピック
機能パターンを定義する
4-認知パターン
気になるトピック
認知パターンがシステムをつなぐ
5-共有言語
気になるトピック
命名規則のパターン
--
s12bt.iconパターンって言葉がやたらでてくるのが気になる
パターン: 再利用可能なインターフェース
機能パターンと認知パターンの2種類が登場する
機能パターン(モジュール): 行動に関連する。インターフェースの具体的な構成要素
s12bt.icon再利用できるコンポーネントみたいなイメージかな
認知パターン: ブランドや外観に関連する
類似の言葉
デザインシステム、パターンライブラリ、スタイルガイド
s12bt.icon自分がその言葉をつかうとき、何を指し示しているか明確にしながら話した方がよさそう
--
Chapter1 デザインシステム
s12bt.icon機能パターン x 認知パターン(xプラットフォーム特有のデザインランゲージ) = プロダクトのデザイン？
s12bt.iconパターンの話見てると、ヒューリスティック10原則思い出す
一貫性を維持しつつ、標準にならっている
覚えていなくても見て分かるようにする
シンプルで美しいデザインにする
ユーザーがエラーを認識、診断、および回復できるようにする
s12bt.iconここらへんと強く重なってくる
デザインシステムの主な目標の一つは「クリエイティブ面の方向性を拡張する」
デザインシステムとは、単にデザインガイドラインを作ることではなく、むしろ組織論や運用論
読了後