タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

UIとAtomic Designに関するfugashiのブックマーク (3)

  • Atomic Designの考え方と利点・欠点 – wkr.

    Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日だとAbemaTV(アベマ TV)で使われています。 (Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより) Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms(原子)・Molecules(分子)・Organisms(有機体)・Templates(テンプレート)・Pages(ページ)です。 各コンポーネントの詳細は次のとおりです。

    Atomic Designの考え方と利点・欠点 – wkr.
  • 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ

    こちらは Frontrend Advent Calendar 2014 19日目の記事です。 2014年 12月8日〜12月14日の間、カナダに滞在してきました。目的は12月9日〜12日に開催される Smashing Conference 2014 へ参加するためです。 海外のカンファレンスに参加するのはおろか、海外旅行もしたことがないので、今回1人でカナダに行くということで終始緊張の連続でした。(Frontrend の @hiloki さんが「僕も行こうかな」と言っていたので、心強く思っていたのですが、残念ながら叶わず。) 記事は、カンファレンスが開催されたカナダという国にまつわるお話を Frontrend の話題を交えながら書きつつ、このカンファレンスで一番楽しみにしていたトピックである「Atomic Design」について書いていきます。 参加の理由 今まで海外カンファレンスなど参

    最近よくクリエイターが移住するカナダで Atomic Design を学ぶ
  • Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物

    ここ半年開発していた動画サービスをベータ版ながらリリースしました(正式リリースは 4 月)。そのサービスの開発において、以前投稿した Atomic Design を採用しました。記事では Atomic Design を実案件に導入した結果と感想を書いていきます。 Atomic Design の基的な概念に関して知りたい方は Brad Frost 氏の原文、もしくは私の以前の記事↓を参照できます。 最近よくクリエイターが移住するカナダで Atomic Design を学ぶ Atomic Design を導入して正解 結論から書くと、今回 Atomic Design を導入したことは正解でした。コンポーネントの粒度を論理的に説明できるガイドラインとして十分すぎるほどの役割を果たしてくれました。 このガイドラインがあることで、デザインに関してさほど関心がない人(たとえばデザインよりもエンジニ

    Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物
  • 1