An Event Apart: Atomic Design

by Luke Wroblewski August 25, 2014

In his Atomic Design talk at An Event Apart in Chicago IL, Brad Frost talked about the benefits of design systems on the Web and shared some tools he's created to help people work quickly with responsive design. Here are my notes from his talk:

  • We've focused on designing Web pages for long time. The idea of the printed page doesn't make sense anymore.
  • Pixel perfection & designing the same experience for all devices is not possible. Phones, tablets, and laptops are not the same.
  • What are the building blocks of design? Things that go beyond typography and color choices. What interaction components are important?
  • There are a lot of frameworks available for responsive design but they come with issues: one-size fits all requirements, lookalike issues, potential for bloat and un-needed stuff, they might not do everything you need, you have to subscribe to someone else's code structures.
  • Responsive deliverables should look a lot like fully-functioning Twitter Bootstrap-style systems custom tailored for your clients' needs. -Dave Rupert
  • Instead of page-based designs. We need design systems. Lot of people have been exploring design systems and the processes needed to design like this.
  • Front-end style guides make things easier to test, provide you a better workflow and shared vocabulary. Examples exist from MailChimp, Starbucks, Yelp, and more.
  • More patterns create more problems. You need to dedicate people to create and manage a style library. Over time this becomes an auxiliary project which may be seen only as a designer/developer tool. These libraries are often incomplete and only serve present cases. Avoid developing a "spray of modules".

Atomic Design

  • At the end of the day, we're working with atoms -with atomic units. Atoms combine to form elements, elements create molecules, molecules create organisms, and so on. All matter is compromised of atoms.
  • Atoms on the Web are HTML elements like: labels, inputs, buttons, headers, etc. More abstract atoms include colors and fonts. These can't be broken down any further without loosing their meaning. Atoms are often not too useful on their own but they do allow you to see your global styles laid out at once.
  • The real power comes from combing atoms into molecules. An input field and button can be combined into things like a search box. Molecules are groups of atoms bonded together. They are more concrete than atoms and encourage a “do one thing and do it well” approach.
  • Organisms are groups of molecules joined together to form a distinct section. They can consist of similar and/or different molecule types.
  • Templates allow you place organisms inside of Web pages. The begin life was wireframes and increase their fidelity over time. Templates are client facing and eventually become the deliverable/production code.
  • Pages are a specific instance of a template. They are high fidelity when representational content is replaced with real content. Pages test the effectiveness of a template: how does it scale and stretch to different kinds of content.
  • Atomic design allows us to traverse from abstract to concrete. Creators can focus on the atoms and molecules and Clients can focus on pages and templates.

Pattern Lab

  • Pattern Lab is a comprehensive custom component library, a pattern starter kit, a design system builder, a practical viewport resizer, and a design annotation tool.
  • Pattern Lab is not a UI framework.
  • Pattern Lab allows you to style up individual components as you build pages quickly using includes built with Mustache (logic-less templates). The page can be assembled fast through the pre-built components (organisms) in Pattern Lab. So right away you can test the effectiveness of templates. At the same time, people can be working on refining designs and more.
  • Templates allow you to see the structure of content without filling it with real content (up front). Includes within each template allow you to stitch components tougher quickly and see how things fit together. A local JSON file can be used to fill in these includes with real data/content.
  • Pattern Lab includes Ish which is a viewport resizer that gives you a different sized screen in small, medium, large sizes so you don't get stuck on specific device sizes like other tools suggest (480, 768, 1024, etc.).
  • Annotations allow you to make specific notes on interface components. This explains some of the design decisions made in an interface.
  • Lineage gives you a list of where components are used in your site.
  • Why use Pattern Lab? It fills the post-PSD void and serves as a hub for the entire design process for everyone: information architects, designers, developers, and clients. It allows you to easily traverse from abstract to concrete. You can write whatever HTML/CSS/JS as you please. Pattern Lab encourages flexibility and document as you go.

Process

  • What's the hardest part of responsive Web design? Most people say people and process.
  • Set the right expectations. Our reality still consists of design review meetings where people look over static mock-ups. But we can't sell Web sites like paintings. They are living things that fill a variety of containers.
  • The waterfall process doesn't allow designers and developers to collaborate closely. This model is broken, we need to work together along the way.
  • Gather information through interviews, analytics, style inventories, and more to collect everything you need.
  • Do an interface inventory: document your interface, promote consistency, establish scope, and lay the groundwork for a future style guide or pattern library.
  • Establish direction: define site-wide patterns and start pulling these components into a Pattern Lab environment. This allows everyone to keep working on their various components: type, IA, colors, etc.
  • Typecast is a tool that allows you to try out a number of different typefaces on common interface elements. This helps isolate decisions.
  • This kind of iterative approach lets you keep iterating and making decisions as you go. Design, build, test, repeat. When you're finished changing, you're finished.
  • Collaboration and communication trumps deliverables.