Atomic design: how to design systems of components –

Nowadays, digital products must be able to exist across any and all devices, screen sizes, and mediums at the same time:

Every type of medium can now display our interfaces elements
So why the hell are we still designing our products by “page” or by screen?!

Instead, we should be creating beautiful and easy access to content, regardless of device, screen size or context.

By keeping this in mind and by being inspired by Modular Design, Brad Frost formulated the method of Atomic Design, in which everything begins with the smallest element of the interface: the atom. This metaphor allows us to understand what we are creating and especially how we are going to create it.

I was convinced by this approach which finally allowed us to think about the part and the whole at the same time, have a global vision of a product or a brand, and also get closer to the way developers are working.

So I thought to myself:
“Of course, that’s it! We need to work like this!”
But honestly, I didn’t have a clue about how to do this…

It took me several months and some concrete projects before gaining an idea of what “designing in atomic” really meant and what that was going to change in my everyday life as a designer.

In this article, I’ll go over a bit of what I’ve learned and what to keep in mind when designing systems of components with Atomic Design.

For what kind of project ?

For me, every project, big or small can be designed with atomic in mind.

It gathers teams around a shared vision. The components are easy to reuse, edit and combine together so that the evolutions of the product will be simpler. And as for smaller projects… Well, every small project could one day become a big project, no?

I also think that, contrary to popular belief, the Atomic Design methodology is not just for web projects … Quite the opposite in fact! I was able to introduce Atomic Design into a personal project (an iOS app for cleaning your address book named TouchUp) and the developer with whom I worked really appreciated this approach. It saved us a lot of time when we wanted to quickly develop and iterate the product.

And for those who wonder if it’s possible to build a system of components while still remaining creative, I recommend reading this article: “Atomic Design & creativity”

How is this different than before?

People often ask me:
“But how is this different than the way we worked before?”

I see Atomic Design as a slightly different approach to interface design but one which can make a great impact in the end.

The part shapes the whole and the whole shapes the part

Until recently, we designed all the screens of a product, and then we cut it into small components to make specifications or UI Kits:

Before : we deconstructed screens to make components

One of the problem was that the components created in this way were not generic and they weren’t dependent on each other. The reuse of components was thus very limited: our design system was restrictive.

Author: Audrey Hacq

Collect by: