Atomic Design — digital design on stable foundations 📏

Remember the ordeal of chemistry class, under the spell of atoms, molecules and organisms? The Atomic Design methodology pairs software development with the laws of chemistry to produce user interfaces that are easy to modify. But what is it, and how should you picture it in practice?

Let us look at it in detail…

Atomic Design — the beginnings

That heading sounds like the title of a film… but to the point. ✌😎

It is safe to say that the market is led by whoever is ready to renew themselves, where the system runs automatically, where the buyer can reach what they want with the least effort. Brad Frost's ATOMIC DESIGN, published in 2016, can help with that. It went straight onto the lists of best UX books, it is available on his site, readable online or orderable as an e-book, and it covers everything to do with creating and maintaining effective design systems.

Brad Frost's name may be familiar to many. He was previously a designer at Google, but his reputation does not rest on that alone. He is a recognized web designer and consultant, runs a great many workshops on web design and web development, and has given dozens of talks, so anyone who moves in the design world at all has certainly encountered his name and work at least once. Since Atomic Design appeared in 2016, though, his name has become inseparable from an entirely new, holistic design system.

According to Brad, most people make the mistake of thinking of a page as a unified, isolated, quantifiable thing, when in reality the web is a fluid, interactive, highly interdependent medium. In his view the most effective tool for web design and development is modularity, which long predates the modern era. Henry Ford broke the car down into its components and then, in 1923, modularized the assembly process, thanks to which they could manufacture more uniform, more reliable and above all safer cars — and incidentally roll them off the line one after another far faster. Breaking things into parts matters more today, in our accelerated world, than it ever has.

Having finally managed to get the websites we build to render consistently across different browsers, we now face a new task. Web experiences have to be deliverable equally on phones, tablets, phablets, netbooks, notebooks, desktops, televisions, games consoles and heaven knows what else in the near future. To make that easier, Frost recommends taking a step back and, instead of concentrating on the whole task at once, breaking it into parts, into smaller and more manageable pieces.

At this point we have a firm grasp of the system's history. Now let us dig a little deeper and look at its foundations.

The foundations of the methodology

To help with that he created the Atomic Design methodology. The first three names it uses — atoms, molecules, organisms — were inspired by nature. In chemistry, atoms are the fundamental building blocks of all matter, molecules are groups of two or more atoms, and organisms are assemblies of molecules that function together as a unit.

So Atomic Design is a design methodology that provides an easily grasped framework for organizing component-based development — by now effectively an industry standard — more effectively. It is a modular pattern of five distinct levels which, working together, produce a consistent design system, and with that formula we arrive at one of the most modern methodologies for designing user interfaces.

The five levels of the methodology

• Atoms: As in chemistry, the fundamental building blocks — basic HTML tags such as form labels, buttons, inputs, a text field, animations, typefaces, and anything that cannot be broken down further without ceasing to function.
• Molecules: Relatively simple groups of UI elements functioning together as a unit. A form label, a button and an input, for instance, can be joined to create a search form molecule.
• Organisms: Relatively complex UI components made up of groups of molecules and/or atoms and/or other organisms. They form distinct sections of an interface. The header, for example, which already holds a logo, a menu and the search form molecule just mentioned.
• Templates: With this name Brad returned to a term in everyday use and more readily understood by clients too. A set of organisms, page-level objects that articulate the underlying content structure of the design. This is almost the finished work.
• Pages: Specific instances of templates, a user interface with real representative content.
• +1 Sections: Based on our experience, in the interest of easier collaboration and shared understanding between developers and designers, we created one more level. We called it the section. Sections are units containing organisms and the levels below them, and they define spatial properties — margin and padding distances and orientations — along with the arrangement of their children relative to each other.

Advantages and disadvantages

Okay, so what is all the fuss about? What is this whole system good for? We learn new concepts and new structures, and even switch to a new logic. But why? 🧐

Those are fair questions, given that we have long been building UI systems without applying this five-step method, and those work too. Also a fair point. What this methodology provides is a form of design that approaches the design process from a fundamentally different place, and thereby helps create a more effective, more considered UI design system.

One of the method's greatest advantages is the ability to switch quickly between the abstract and the concrete. We can see the UI elements broken down to atomic level and at the same time see how those elements combine with each other, and how they form our final conception, the pages we ultimately deliver to our clients.

Designing this attentively does not permit sloppy work of the kind that accumulates design debt. The framework compels us to be deliberate about how we proceed.

The theory can feel strange, unfamiliar and complicated at first, but once it clicks and you understand it, the work can in fact be much faster. We may not be faster the very first time — quite the opposite. Anyone meeting the system for the first time should expect questions like these:

• What counts as an atom at all? Is text, for instance, an atom?
• Is this input field with its label an atom or a molecule?
• The social buttons are atoms, so is lining them up next to each other a molecule? If so, what is the card that contains them?
• Can a given level — organisms, say — contain elements like itself?

The main thing is not to worry. These are things that fall into place in everyone's head in their own time. And we can of course reveal the great secret, the answer to all those questions: nothing is set in stone. Use it in whatever way you and your team can understand best.

Frost emphasizes that the method should not be treated as a rule carved in stone. Far more as a principle, resting on the idea that if you are going to do it, do every single element of it well.

Eight arguments for Atomic Design

Over the past two years we have delivered 14 successful projects on Atomic Design foundations, and from that experience and our clients' feedback we have assembled the following arguments for the methodology. (There were no unsuccessful projects 😉)

• The elements can be mixed and matched at will. Some investment of time and effort is needed at the start while the atoms get built, but it repays itself many times over later.
• Building further pages becomes faster, because existing atoms and molecules can be pulled out quickly and reused, needing at most a small adjustment.
• Producing a style guide is simple. If a site is built on this principle from the start, all its atoms and molecules can serve as a basic style guide. And even sites built on other principles convert easily.
• A layout that is easy to understand. The site's code is typically far more readable than that of a site built another way. That holds not only while it is being built but later, when a page needs modifying or is being looked back on as a reference.
• More consistent code. With Atomic Design we use predefined atoms to assemble interfaces, making it easy to see which components were used where on the site. That also reduces the likelihood of writing duplicate code. If someone wants to create a red button, or turn the blue one red, they would otherwise have to go through the whole site to find whether such a red button already exists, and if so how many and where, then copy or edit all that code. With Atomic Design we can simply step back to the list of atoms and find the red button, or recolour the blue one easily — all of them at once.
• More effective than component-based development on its own, because Atomic Design provides scaffolding that helps structure the codebase better.
• Easier and faster updates or removals. Because we modify only one atom, molecule or organism at a time, it is easy to ensure the same change happens everywhere.
• A lower learning curve. A developer or designer can understand the processes and the subject matter sooner, and in a well-built system value can be created sooner.

Where it applies

The method is of course not applicable to every engagement, but it does no harm to know alongside the well-established tools, because it separates structural units differently from the usual way, moving from the small towards the large.

In Hungary one of the best-known Atomic Design builds is the Hungarian State Railways group's renewed online ticketing system, a perfect example of how user-friendly an outdated and not particularly functional system can be made.

At Mana we have built every user interface on Atomic Design foundations over the past two years, and in that time our clients have confirmed the value the method adds. We can create and maintain more reliable, more consistent interfaces with short iteration times. The greatest challenge, and equally the greatest success, is applying the process at an older organization, as we did with the websites of Eötvös Loránd University.

Need outside help on your project?

If you need someone to support the launch of a large platform or the design of a first MVP, or you want to take your project to the next level, let us work together.