この記事は何? DMMさんで「Atomic Design & Design Systems」をお話させて頂いた時に、自分が読んだ記事をまとめたものになります(いちおう全部目は通してる…ハズ)。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態でした。 この記事がデザインシステムについてこれから学ぼうと思われている方の力に少しでもなれたら幸いです。例によって海外記事は僕の認識違いが起きている可能性があるので、「これそういう記事じゃないから!」というツッコミがあればぜひお願いします。 (追記:記事執筆後も参考資料が増えてきたため、資料作成時に限らず参考にできるものを追加しています) まずデザインシステムについて学びたい時は Design Systems Handbook InVisionが作成し
I’ve long referred to Color, Type and Icons as the “Big 3” of a system’s visual language. All UI components — from Buttons on up — are built with them. But I left something out. Space, our final frontier. Space Rivals ColorSpace is everywhere. CSS uses properties like padding, margin, and absolute positioning’s left, right, top and bottom to separate objects. Across five libraries (Bootstrap, Sale
A smooth onboarding is an essential moment in a product experience. That’s why an Getting Started as an Engineer is arguably the most important documentation your system publishes. Engineers want to traverse simple, dependable steps that are quick, effortless, and painless. Getting stuck can be catastrophic. They should plow through, even in minutes. By the end, they yearn to feel empowered and su
By Marco Suarez, Jina Anne, Katie Sylor-Miller, Diana Mounter, and Roy Stanfield This book guides readers through best practices around planning, designing, building, and implementing a design system, with insights and first-hand experiences from experts who have gone through the journey. Available in online, epub, pdf, audiobook and print formats.
明文化をテーマにしていた2016年 今年の初めデザイン SDK のようなものが欲しいという記事を書きました。開発者から提案されているフロントエンド寄りのスタイルガイドはコードの品質管理と、見た目の再現性を高める上で有効な手段です。しかし、これだとコードを理解していることがスタイルガイドの利用・関与の大前提になります。すべてのデザインがコードから始まるとは限らないですし、デザイナーであれば Sketch や Photoshop といった日々使うツールを活用して最低限の品質を保つ手段が必要になります。 共通言語を作っていく。 これは文字通り言葉だけでなく、UI を始めた視覚的な部分など、今まで好みや感覚で済ませていたこともきちんと言葉にすることも指しています。デザイン批評も共通言語を作り上げるために必要なプロセスです。 建築家クリストファー・アレグザンダーの著書「Pattern Languag
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く