Atomic Design for a UI/UX design and programming workflow (アトミックデザインによるUI/UXデザインとプログラミングのワークフロー)｜F Lab｜Fixel株式会社
デザイナーはアプリケーション全体をデザインしてから細かい部分を調整して行きます。先ずは生命体を作り、それを原子までに分割して調整しているような作業です。一方、プログラマーはデザインされた画面から再利用できる部品を作り、それらを組み合わせることで動くアプリケーションを構築して行きます。原子を組み合わせて、生命体を作っていくような作業です。全体から細かい部分に精度を上げながら設計して行き、また細かい部分から作り始め、徐々に全体に組み合わせて行く、一連の流れのようなプロセスと捉えることができます。 本記事では上記のプロセスの例として、デザイナーがワイヤーフレームを作り、画面の各要素を分割します。次にプログラマーは各要素を部品として作り始めるます。見た目を左右するビジュアルデザインに対してはスタイルを簡単に変更できるようにして、デザインの変更を適用しやすくなります。このようなプロセスを実現するには
AtomicDesign 境界線のひき方
AtomicDesign はコンポーネント粒度の指標として共有し易く、多くのプロジェクトで採用されています。しかしながら、その設計概念が先立ってしまい、いくらかの課題を抱えている場合があります。 1.影響範囲が特定しにくい 2.依存関係が特定しにくい 3.汎用性が低くなりがち 4.汎用性の高低が判別できない 多くの場合「粒度」だけを基準にしてしまい、横断的コンテキストに「早期区分」 してしまっていることが直接的原因です。 「関心範囲の広さ」区分 アプリケーションを構成するモジュールは「関心範囲の広さ」で区分を行うことが鉄則です。次の２つのhelper.tsを見てください。全く同じ関数が定義されていたとしても、どこで利用される想定のものなのか、すぐに判別できますね。utilsは、プロジェクト内で横断的に再利用される可能性が高い（関心範囲が広い）ものが集約されます。 AtomicDesign
Atomic Designから派生した、“オルタネイティヴ”な5つのデザインシステム
2018年6月6日、DMM.comが主催するイベント「DMM meetup」が開催されました。今回のテーマは「ReactとAtomicDesignからみるコンポーネント開発」。フロントエンド開発において重要性が増しつつあるコンポーネント開発手法について、「React」と「Atomic Design」の2つをキーワードに、各分野のプロフェッショナルたちが自身の知見を語ります。プレゼンテーション「Alternative Atomic Designをさがして」では、よりデザインの吉竹遼氏が登場。 Atomic Designをどう使うか 吉竹遼氏（以下、吉竹）：では、LT2人目の吉竹です。よろしくお願いいたします。 今日来てる方で、エンジニアの方はどれくらいいらっしゃいますか？ （会場挙手） やっぱりさすが、多いですね。デザイナーは……？ （会場挙手） ディレクターさんは？ （会場挙手） ちょっと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Atomic Design with React Native
