Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Atomic Design (Brad Frost)

Atomic Design (Brad Frost)

Brad Frost erklärt auf der vierten Lean UX DUS was es mit "Atomic Design" auf sich hat.

Lean UX DUS

May 28, 2015
Tweet

More Decks by Lean UX DUS

Other Decks in Design

Transcript

  1. We’re not designing pages, we’re designing systems of components. -Stephen

    Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  2. FRAMEWORK POTENTIAL PITFALLS ๏ One-size-fits-all ๏ Lookalike issues ๏ Potential

    for bloat/unneeded stuff ๏ Might not do everything you need ๏ Compatibility with existing sites ๏ Subscribe to someone else’s structure, naming, style
  3. Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style

    systems custom tailored for your clients’ needs. -Dave Rupert http://daverupert.com/2013/04/responsive-deliverables/
  4. BENEFITS OF FRONT-END STYLE GUIDES ๏ Promotes consistency and cohesion

    ๏ Easier to test ๏ Better workflow ๏ Creates a shared vocabulary ๏ Useful reference ๏ Future-friendly foundation http://24ways.org/2011/front-end-style-guides/
  5. MO’ PATTERNS, MO’ PROBLEMS ๏ Time consuming to create ๏

    Treated as a auxiliary project ๏ Often too abstract ๏ Seen only as a designer/developer tool ๏ Often created after a project launches ๏ Often incomplete/only serving present cases ๏ Lacking a clear methodology
  6. 2H2 + O2 → 2H2 0 C + O2 →

    CO2  CH4 + O2 → CO2 + H2 O C8 H18 + O2 → CO2 + H2 0 C2 H6 + O2 → CO2 + H2 O
  7. You can create good experiences without knowing the content. What

    you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is. -Mark Boulton http://www.markboulton.co.uk/journal/structure-first-content-always
  8. The idea of designing components like this, out of context

    and without layout, might sound strange— particularly if you’ve been used to designing Web pages the traditional way. But we’ve been abstracting design ideas like this for the longest time, for example in our use of mood boards and even the cropped designs we find on sites like Dribbble. -Andy Clarke http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements
  9. WHAT PATTERN LAB IS ๏ A design system builder ๏

    Your comprehensive interface design system ๏ A style guide starter kit ๏ A design toolkit (viewport resizer and other tools)
  10. WHAT PATTERN LAB AIN’T ๏ A UI framework ๏ Language,

    library, style, workflow dependent ๏ Incredibly rigid ๏ “Just” a pattern library, but also not a production-ready static site generator
  11. MOLECULE GUTS code block <div class="block block-post"> <a href="{{ url

    }}"> <div class="b-img"> {{> atoms-thumb }} </div> <h3 class="b-title">{{ headline }}</h3> <p class="b-excerpt">{{ excerpt }}</p> </a> </div>
  12. ORGANISM GUTS code block <header class="header" role="banner"> {{> atoms-logo }}

    {{> molecules-primary-nav }} {{> molecules-search }} </header>
  13. TEMPLATE GUTS code block {{> organisms-header }} <main role="main"> {{#

    hero }} {{> molecules-hero-video }} {{/ hero }} <section class="section"> {{# experience }} {{> organisms-story-feature }} {{/ experience }} </section> <section class="section"> {{# factoid-advertising }} {{> organisms-factoid }} {{/ factoid-advertising }} </section>
  14. PIPING IN REAL CONTENT code block { "title" : "Time

    Inc.", "bodyClass": "home", "hero" : { "headline": "Moving People" "img": { "src": "/images/hero_beyonce.jpg", "alt": "Beyonce" } }, …
  15. PIPING IN REAL CONTENT code block "experience" : { "heroClass"

    : "experience", "hero-main": { "src": “/images/hero_skater.jpg", "alt": "Olympic Figure Skater" }, "eyebrow" : "Experiences", "headline" : "Champions at the Olympics", "excerpt" : "Time Inc’s brands cover every aspect of the Sochi XXII Winter Olympic Games. From the best athletes to the best viewing parties." } }
  16. A BUNCH OF OTHER STUFF ๏ Code view (source and

    rendered HTML) ๏ Pattern status ๏ Media query display ๏ New version coming soon! Choose your own templating engine, plugins, and more
  17. As an industry, we sell websites like paintings. Instead, we

    should be selling beautiful and easy access to content, agnostic of device, screen size, or context. -Dan Mall http://danielmall.com/articles/the-post-psd-era/
  18. ๏ Document your interface ๏ Highlight inconsistencies ๏ Establish scope

    of work for translating to a responsive environment ๏ Lay the groundwork for a future style guide/pattern library INTERFACE INVENTORY