atomic designに関するytskのブックマーク (4)

  • Atomic Design

    Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re designing systems of components.—Stephen Hay As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. A lot has been said about creating

    Atomic Design
  • 珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD

    概要: Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に

    珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
  • Atomic DesignはWeb開発を救うのか - DMM.comラボ デザイナーズブログ

    前置き Webを便利に・高品質にしようと技術が進歩する中、コンポーネント設計に寄り添ったシステムが多く出てきました。 ただし、それらを十分に活用するにはデザインから見直さなければなりません。 コンポーネントベースのUIデザインは汎用性・再利用性の観点からも有用ですが、それを実現する際には「コンポーネントの定義」が非常に難しいことがあります。 PDCAサイクルをまわす時のようにあとから再びデザインに手を加えることが予測される環境下では、コンポーネントの粒度が曖昧なままでいると思わぬコストが発生する場合が多々存在するでしょう。 そこに対して一定のルールを持った設計システムが導入されることにより、未来の要望に対応できる柔軟なデザインが構築できるかもしれません。 そう、デザインにも設計は必要なのです! Atomic Designとは? atomicdesign.bradfrost.com Atom

    Atomic DesignはWeb開発を救うのか - DMM.comラボ デザイナーズブログ
  • 2016年は「AtomicDesign」を取り入れた「APB CSS(Atomic Parts Base CSS)」で迷わず、簡単、拡張性持った CSS設計を!

    というわけで、 明けまして、おめでとうございます! なんか、慌ただしく2016年を迎えてしまった次第です。。 今年はちょっとゆっくりしたいなと思いつつ、 2016年、今年もよろしくお願いいたします。mm さてはて、早速題の方ですが、webデザイン界隈で 最近、「マテリアル・デザイン」だの「アトミック・デザイン」など以前にも 増して色々と聞くようになってきたのを肌で感じる今日この頃でして、 デザイナーの方もそれらの思考を持ってデザインされるかと思います。 そもそも「アトミック・デザイン」ってなんぞやって方はこちらを、 Atomic Design Atomic Design http://bradfrost.com/blog/post/atomic-web-design/ Atomic Designの特徴として、こちらの図であるように、 UIパーツを「ATOMS」(原子)と捉え、原子と原子の

    2016年は「AtomicDesign」を取り入れた「APB CSS(Atomic Parts Base CSS)」で迷わず、簡単、拡張性持った CSS設計を!
  • 1