What is an Atomic Design Methodology?
The Atomic Design Methodology was proposed in 2013 by Brad Frost, an American front-end developer. He compared UI design to chemistry: natural substances consist of atoms, interfaces of elements (components). He described it in the book "Atomic Design", which immediately achieved great popularity that continues to this day.
Atomic design is a methodology for dividing any interface into functional components, the smallest constituent units, each of which has its own specific function. These units are then assembled into functioning systems, which is particularly useful when creating a system as large as a design system.
The main principle of Atomic Design is from the smallest to the largest.
Atomic Design organizes components into five categories: Atoms, Molecules, Organisms, Templates, and Pages. In the following, we will take a look at each type individually. In short, an "atom" is the simplest design element, while a "template" is the most complex. This is the original version of this methodology (2013), which has been adapted over time according to new design system development needs. This extension of the methodology will be explained in the second part of the article.
-
Atoms - the minimal basic components of the interface: buttons, icons, input fields, checkboxes, radio buttons, labels. These elements cannot be subdivided into smaller ones without losing functionality.
-
Molecules are simple components that are composed of atoms. Search forms created from atoms consist of the connection of a label with an input field and a button. This connection means that the molecule already has a function.
-
Organisms are independent and relatively complex in the structure of the interface and consist of groups of atoms/molecules and even other organisms. For example, a header can consist of a logo, a search form and several menu items. This will form a section of a page later on.
-
A template shows the structure of a page without any specific content. It already contains all the necessary organisms, molecules and atoms and forms the structure of the content. The advantage is that the template focuses on the content structure and not on the finished content.
-
Pages are templates filled with real content that are ready to use. These are the pages that demonstrate the actual interaction of the user interface with the content and also provide an understanding of the effectiveness of the design system. Pages have several functions:
-
They allow designers to conduct realistic usability tests.
-
They show stakeholders what user interfaces will look like to end users.
-
They are pre-designed layouts that can be used in advertisements and other marketing materials.
Advantages of Atomic Design
One of the main advantages of atomic design is the ability to quickly switch between abstract and concrete. We can see how our interfaces are broken down into their component parts and recognize how these elements come together to form their final shape. In addition, there are a couple of other important advantages:
Rapid prototyping
A set of prefabricated elements enables the immediate design of interfaces. In addition, the organisms, molecules or atoms can be combined in various ways to quickly create new pages.
Easy component change
By changing or removing one atom or molecule, these changes can easily be applied to all elements of the page. In other words: If you change the child element, the parent elements will also change.
Consistency
It also creates consistency in the design as the same atoms, molecules and/or organisms are used over and over again. This also makes the code easier to maintain, as only the component (atom, molecule and/or organism) that is causing the problem needs to be adapted when changes are made.
Scaling
If a list of atoms is prepared in advance, a template or page can be created quickly and efficiently by simply placing the prefabricated components as required.
Suitable for all programming languages
Atomic design components are equally easy to integrate into markup in JavaScript, CSS and other languages, making the overall code more modular.
Today, atomic design is more than a practical and versatile tool. It is also an important design approach, a methodology that starts with a deeper understanding of the role of each individual component. Atomic Design can quickly produce a well thought out design that is easy to use, change and evolve. This helps to adapt to ever-changing technologies and the resulting digital products.