Atomic design 2022: what we can learn from Eames and other design giants
As designers, we stand on the shoulders of giants, looking down at the marvelous works they have created. One giant of our times is Brad Frost, who pioneered the atomic design revolution and aided the acceleration of design systems. Celebrating close to a decade since it was first published, a wave of design advocates continues to provide further commentary and adaptation. Yet, to think that the atomic design created in 2013 is the definite canon is wrong because even the creator himself is updating his metaphor and understanding with new knowledge. His 2019 article revealed an expansion of the chemistry metaphor to include subatomic particles as a reference to design tokenization. His acceptance of new metaphors of onions and pace layering created in 2020 was another. He is effectively standing on the shoulders of other giants. And there are countless new articles on Medium that have built upon existing works and interpretations.
So are we done with atomic design?
Not quite yet and there’s definitely more right at end of this article. But to do so, we need to go “subatomic”, and borrow the fictional concept of time travelling through the quantum tunnel. To travel in-between time to the past, present, and the possible future.
Into the quantum tunnel
2016: We revisit the instance when the atomic design was published as a e-book. This was probably the moment where the early majority of the design community embraced the concept of atomic design metaphor when Frost did a wonderful job of explaining how we derive atomic design through his association of chemistry particles. At this juncture, he had also attributed his understanding of systems to industrial design and architecture, which was shared by Federico Holgado in 2014.
2014: Jumping back into the time machine, we arrive at Holgado’s archival issue called systemic design. Besides documenting the journey of Mailchimp’s redesign, our author further built his case of systems by comparing the process of assembling specialized components made by different companies. For industrial design, it was with the Original Equipment Manufacturers (OEMs). For architecture, it was the surveyors, regulators, structural engineers, plumbers, contractors and so on. Much of Holgado’s inspiration came from the book, Refabricating Architecture, by Stephen Kieran and James Timberlake.
2003: The year when Refabricating Architecture was first published. At this point, we have deviated away from websites and native apps, and into the realm of complex products, machines and architecture. Kieran and Timberlake did however provided an array of masters, from Brunelleschi to Le Corbusier to Michael Dell. Suddenly, there is an explosion of different sources of inspirations, yet with the underlying concept of a system with components and assemblies in place. What connects all of the different design disciplines, especially architecture, is the loose trail of the scale of design. However, there are several problems with scale. Firstly, how we connect the importance of abstract design elements at different levels can be a challenge. Then, there is also the need to use the right language and narrative, along with complementary visuals, so as to create a clear mental model of how hierarchy work together as a system. This is why Frost’s language and visuals of “atomic” stuck with the design community because it was the right language at the right time, which was the advancement of the digital experiences. The same logic applies for subatomic when design tokens became more readily accepted in the design community at a later stage. Yet, whilst Frost attempts to extend the metaphor by going inward, could there also be an opportunity to zoom outwards? Enter another polymath, Charles and Ray Eames, and we are back in our time machine.
1977: In the eyes of the legendary industrial designers, Charles and Ray Eames, they must have seen a glimpse of the power of scale in design. Such is the extraordinary creation of the Powers of Ten film created in 1977, which showed the magnitude of objects based on the power of ten (10¹, 10², 10³ etc.) Ahead of its time, it had already captured the imagination of viewers through visuals and storytelling that is invisible to the human eyes. One might think that designers such as Eames had stopped at the view of Earth, but they pushed beyond the solar system into the known universe. Before we know it, the film then flipped the switch, zoomed back to the original object, and continued zooming deeper and into the atomic and subatomic level of space.
Where does this leave us as designers? As a start, the journey thus far has brought us to the realization that the concept of scale needs the right language, representations and visuals through the use of metaphors. From there, we can subsequently extend and update the metaphor. One other thing: a leap of imagination and experimentation is much needed to break the boundaries of UI design, into emerging disciplines, such as product and spatial design.
Present: After 40 years, BBC paid homage to the design masters by recreating the power of ten with an updated version of the universe. The scale has shifted from 10²⁴ to 10²⁷. (Jaco Nels in the comments section shared that our understanding of the small things have also expanded from 10⁻¹⁶ to 10⁻³⁵) Having visited various design giants, we circle back to atomic design with a new field of view. Perhaps, it’s time for us to go beyond the atomic design scale and into the “crazy” zone, as what Frost described in 2016. Our present adventure brings us towards complex organisms and species respectively, with an emerging understanding of product design and system of systems.
- Ions (Cid, 2019) are the subatomic design particles of the atoms, which contains the properties of the design component. In some design circles, these are known as design tokens , as shared by Frost.
Example: colour, padding, states - Atoms (Frost, 2016) remain as the foundational building blocks, also known as components. No major changes here.
Examples: buttons, text input, labels - Molecules (Frost, 2016) are a combination of two or more atoms. They are larger UI components, which could also be known as patterns.
Examples: pagination, dialog box - Organisms (Frost, 2016) are when complexity begins. Just like in biology, a large range of combinations of molecules and atoms emerge. In design, we could see organisms as modules, features, or even as widget and simple applications.
Examples: Cards, navigation bars, date picker - Complex Organismsᴺᴱᵂ are advanced life forms. The quickest reference would be animals, plants and human beings. As it turns out, products are similarly complex. Not only do they consist of more than templates of components, patterns and modules, they have flows across different pages or screens. Interestingly, this is where the “onion”(Mu, 2020) calls out the term “products”. I, on the other hand, chose to stick to the naming convention of the metaphor. I have also consolidated templates and pages under the same sequence, keeping the mental model intact.
Examples: User Interface, App, Web - Speciesᴺᴱᵂ are a family of complex organisms of unique yet similar traits. In design, species can be referred to as product lines or portfolio. As more organizations see the value of design, and with advancements of our understanding of design systems, so is our ability to apply the entire gamut of design across products in organizations.
Examples: Suites, platforms, omnichannel
Other considerations
Beyond speciesᴺᴱᵂ:New digital experiences can be forged when other organisms of different species interact with one another. The symbiotic partnership between animals and plants in a habitat creates a strong ecosystem. Likewise, different products across different industries and mediums (ie. phygital) can result in the need to ensure consistent and harmonious experiences.
Example: API, integration, phygital, iot
Libraries vs systemsᴺᴱᵂ: Through careful observation from Eame’s Power of Ten, a stark difference can be seen between the physical and molecular world. As such, the film’s ingenius distinction of zooming in and out between these two worlds show their separation. Likewise, could libraries and systems be seen as two different worlds? I believe so, with increasing evidence based on our current definition of pattern/component libraries and design systems. We are not too far off from our bundling of atoms to organisms with libraries, as well as our complex organism and species with systems.
Whilst complex organisms and species have departed away from a strict user interface model, through our earlier deep dive on systems, it has become increasingly apparent that products and their families have to be considered in 2022. One recent example of doing so is through the Spotify’s journey of creating Encore — the system of systems. That being said, the journey should not be a big surprise. In fact, Frost did recognize this phenomenon, as described in Chapter 4 of Atomic Design:
In addition to all the web-capable devices we concern ourselves with today, we must understand that the device and web landscape is becoming bigger and more diverse all the time.
Which brings us back to my deep appreciation of the design giants, from Eames to Frost. We are at the exciting times of designing the system of systems. I am after all grateful to be standing on the shoulders of giants, with a small contribution to the ever-growing quest of expanding our knowledge of atomic design.
