Skip to main content

The Sum of the Parts

12-11-13 Ben Callahan

Building sites to work at any viewport width means we must embrace changing methods to communicate priority across those widths. Atomic design gives us a solid approach to designing the elements that make up our system, but these elements must also be considered in the context in which they’ll be experienced. At Sparkbox, we try to burn the candle at both ends by making progress on the whole as well as on the parts.

Designing a Content-First Approach

I first heard of “Atomic Design” in a presentation by Jeremy Keith at Breaking Development Nashville in 2011. He gave the opening keynote entitled, “There is No Mobile Web,” in which he challenged us to tackle “content first” web design instead of creating layouts into which we pour our content. Jeremy went on to describe how he creates “pattern portfolios” beginning with the “atoms” of a site before he ever thinks about the layout of specific pages. This idea was very appealing to me because it addressed a fundamental challenge we were facing—how can we design for the flexible complexity that is the web? In fact, the concept is something I brought back to Sparkbox with the hope of integrating it into our workflow. I’ll be honest, we struggled.

Only months before this conference, I had read a brilliant piece by Mark Boulton about designing from the content out. I started writing about how we were attempting to do this, and we’ve been evolving how we work ever since.

Burning the Candle at Both Ends

At Sparkbox, we try to burn the candle at both ends by making progress on the whole as well as on the parts. Often, this means we’re using a tool like Photoshop or Sketch to both design the “atoms” in our system, but also to rough together those atoms and get a sense for how they feel in the context where they’ll be experienced by our users. We’ve found that style prototypes can be a great tool for getting atoms together on a page. Samantha does this with Style Tiles. Dan does it with Element Collages. Steve has written about something similar to a style prototype... Honestly, all these are valid approaches.

Communicating Hierarchy Across Viewport Widths

One idea that I’ve been trying to express in our workshops is how important it is to establish and maintain hierarchy across viewport widths. As we lose screen real estate, we also lose some of the tools we have to communicate that hierarchy. This is especially critical as you begin to incorporate concepts like atomic design into your workflow, because changing a single component without considering how it interacts with other components in your design system may inadvertently change the perceived priority of an experience. While I do see great value in what Brad and Dave are doing with Pattern Lab, we’ve found that this kind of atomic thinking must be used in tandem with a more holistic view. We have to consider how all these atoms, molecules, and organisms work together to communicate priority—even across viewport widths. At Sparkbox, we use content priority guides and wireframes in addition to content prototypes.

Modularity Required

If there’s one thing I’ve learned in my experience working on larger projects, it’s that modularity is a requirement of maintainable systems. The challenge is balance, but the reward is well worth the effort. I can whole-heartedly recommend adopting atomic thinking—I only want to do so with a caution to keep pulse on the priority being established as you design and build your modules. As Carl Sagan said, “The beauty of a living thing is not the atoms that go into it, but the way those atoms are put together.”

Related Content

User-Centered Thinking: 7 Things to Consider and a Free Guide

Want the benefits of UX but not sure where to start? Grab our guide to evaluate your needs, earn buy-in, and get hiring tips.

More Details

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development