Breaking Development: Atomic Design

by October 22, 2013

In his Atomic Design talk at Breaking Development in Nashville TN, 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. But pixel perfection and designing the same experience for all devices is not possible. Phones, tablets, and laptops are not the same. Designing for today's Web doesn't mean just making things work on iPhones, iPads, and Cinema Displays.
  • 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.
  • 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
  • Front-end style guides make things easier to test, provide you a better workflow and shared vocabulary.
  • 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.

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 cam focus on pages and templates.
  • Developers tend to spend their time focused on the molecules, organisms, and templates.
  • Atomic design provides a methodology for crafting effective design systems.It promotes consistency and cohesive between teams.

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.
  • Ish 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.).
  • Hay mode starts in small mode and gradually expands the screen size so you can see all the in between sizes of a design.
  • 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

  • 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.
  • Gather information through interviews, analytics, style inventories, and more to collect everything you need.
  • Establish 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.
  • This iterative approach lets you keep iterating and making decisions as you go.
  • Collaboration and communication trumps deliverables.