August 29, 2018

Atomic Design

Creating scalable designs and future proofing your website.

Responsive design has changed the rules of the game. Websites can now seamlessly scale to fit any device (from desktop to tablets, and mobile phones). However, creating multi-device web experiences can sometimes be challenging. Web designer, speaker, writer, and consultant Brad Frost reveals his approach to embracing more sustainable design systems that promote consistency while also improving your team’s productivity.

“Atomic Design” by Brad Frost

The Talk

Too often in our haste to deliver awesome results and meet deadlines, we forget that the one-size-fits-all solution doesn’t really make sense for design aspects. You don’t want to end up having unnecessary code that can slow down your site and frustrate your users.

Brad Frost thinks organizations should create modularized content to better reach their audience. To make a point, he mentions Stephen Hay’s approach to UI design: “We’re not designing pages, we’re designing systems of components.” Brad suggests there’s a better way to design and develop projects: using pattern libraries or web style guides (check out MailChimpYelpStarbucks’ Pattern LibraryStyle Guides, and Pattern Lab

The benefits of using pattern libraries:

  • Promote consistency and cohesion across the entire user experience
  • Make testing easier (accessibility, performance, usability)
  • Establish a better workflow for the team
  • Create a shared vocabulary, so everyone’s on the same page
  • A useful resource for future website updates the team can come back to

We all care about the final product—but Brad thinks it’s important to think beyond your new shiny website. Crafting a deliberate and cohesive design system you can use, improve, and grow with over time is what atomic design is all about. Think of it as a mental model about how to draft the underlying design systems your website’s user interface is made of.

Successful projects require constant collaboration between teams, so Brad brings up the concept of interface inventory—a useful exercise for companies to highlight inconsistencies in their interface. Long story short: it lays the groundwork for creating thoughtful, deliberate design systems.

Our Thoughts

As Dan Mall puts it, “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.”

At Reaction, we use pattern libraries that allow pages to come together more easily using consistent elements and documenting our UI patterns (think of it as the Lego blocks to a website). When it comes to our clients’ needs, we take the time to produce custom-tailored design systems that bring value and set their organization up for success.

And even when we have all the right technologies in place, we know it all comes down to our people truly collaborating and communicating with one another—and that’s what truly matters to us!