勝手にアトミックデザインを解説してみた。
こんにちは、デザイン事業部のミッチーこと三井です。
本日は私が個人的に勉強しているアトミックデザインについてお話ししたいと思います。
アトミックデザインとは？
パーツ・コンポーネント単位で定義していく UI デザイン手法です。
なんだそれ？って感じの方もいるかと思いますので実際に制作したLPを使って3章に分けて解説していきます。
第1章 パーツの最小単位からデザインしていく
まず今回制作したLPはこちらになります。
まだWFの段階ですので白黒で制作をしていますが
LPを制作する際にいきなりWFを作り始めるのではなく
最小の単位※(原子)からデザインし、徐々に規模を大きくし、作業を進めていきます。
※アトミックデザインは原子、分子といった化学用語で定義されています。
パーツ(原子)を作る
例えば上記の画像のように使うフォントや吹き出しも制作する前にパーツ分けしていきます。できるのであればもっと細かく画像のサイズや使うものなども決めていけるとベストです！
組み上げていく
あとはここまでに制作したものをパズルのように組み合わせていきます。
文字は飛び出ていた方がいいか？
文字は吹き出しの中に納めた方が綺麗に見えるのか？
様々な案を出し複数パターンを出します。
今回のイベントは感謝を伝えるがテーマにしていたので
感謝を伝える＝Thanksは吹き出しの中で納めると意味付けができる！
このようにデザインを固めていきます。
またデザイン配置に悩んだらした場合、デザインガイドラインなどを見て方向性を修正、違ったイメージのWFを作らないという利点もあります。
今回はここまで！
次は2章 パーツ単位でデザインを組み上げる！になります、お楽しみに！
宣伝
毎度恒例の宣伝でございます。
私が勤めているマンハッタンコードは社員募集中です。
一緒に働くビジネスマンを募集しています。エンジニアやデザイナーだけではなく、ビジネスマンとしてのエンジニアリング、デザイン業務をやってみたいという方はお気軽に連絡ください。
Twitterに直接DMいただいてもOKです。
自社サービス「アルポ」リリースしました。
相対見積もりの時に使用する見積ポーカーのアプリをリリースしました。
スマホにアプリをインストールすれば会議室にポーカーカードを忘れることが無くなります。