Cloudberry recently hosted one of its Lunch and Learn sessions for the team. During this session, the topic of “atomic design” was presented by Associate Creative Director, Nalina Sarma. Nalina discussed this methodology and its principles and explained how the approach is an “exercise-in-reverse” when thinking about constructing design systems.
The typical approach for UX is to look from a broader perspective and drill down to specifics. Conversely, atomic design parallels chemistry in thinking small initially, and then looking to the bigger pieces. Atomic design was coined by Brad Frost and Dave Olsen, who also developed the tool, Pattern Lab, to assist in applying this process when designing web systems (1). The theory consists of five parts: atoms, molecules, organisms, templates, and, finally, pages. These components are meant to build upon each other, ultimately resulting in a sample page of what a user will see.
Atomic design is another way of thinking about design systems and, as Frost mentions, it “gives us the ability to traverse from abstract to concrete.” (2) It is a lesson in inductive reasoning, where one must think in terms of the structural components before moving to the more complex systems and solutions. The collection of these elements can then be captured in a common language that a team shares, similar to a style guide. Thinking in terms of individual components, as Anna Debenham points out, (3) especially helps front-end developers as it brings flexibility as well as simplicity to the process.
From a developer’s perspective, the approach of atomic design is not exactly new. Beginning in the 1960s, object-oriented programming (OOP) focused on “the objects we want to manipulate rather than the logic required to manipulate them.” (4) We asked our Senior Developer, Mikhail Kornienko, about atomic design from the perspective of implementing a design system. “The best thing about atomic design is that it is highly tailored to front-end web development. The way web development started out, it was always kind of a “soup of code,” whether it was about HTML, CSS or JavaScript code. That was because, originally, web development-related technologies were pretty basic. And it was complex to structure things in any meaningful way without then spending lots of time on maintenance of this structure.” Mikhail also agrees that “atomic design aggregates our knowledge of front-end web development, patterns, possibilities, and arranges it into an easy to understand and useful format.”