What is Atomic design?

Author and interface designer Brad Frost presented the atomic design methodology in an attempt to find a way to facilitate and speed up the process of building interfaces. Through this blog, we are going to review Atomic design and its applications in interface design.

Brad Frost started the atomic design methodology from the idea of the periodic table of the chemical elements, which contains the basic elements that have been discovered. As the combinations of different elements from the materials we see around us, Atomic design aims to create structures by building from simpler elements.

Where he returned the UI Elements to their primitive form that cannot be divided and then used the primitives to build larger components of them in a hierarchical manner that gives greater control over the required elements.

What is atomic design?

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

To understand the Atomic system let’s describe its various stages and know-how these stages are applied to an actual design.

Components of atomic design:

Atoms: In atomic design, the Atom is the first component of user interface elements. To explain what it means, suppose we have a button that we are going to use on a website. What represents an atom here is the button tag from the HTML “button” language. An atom can also be just an icon, a typeface, an input field or any other primitive element on the web.

Molecules: After more than one atom unites, we get the molecule. Here we can imagine the molecule as a part with a single function like the search field, where it consists of a group of atoms which is the text field <input/>, the send button <button/>, and perhaps a tag or a caption message <label/>.

Organisms: The molecules combine to form the organism. The object here is a part of the page that contains certain elements that share a characteristic such as importance. For example, the header of the page, which usually contains the most important elements of the page such as the logo and the main menu, etc…

Templates: It represents a layout for the distribution of atoms, molecules, and objects, and how to build the page regardless of the final content, and this includes any possible forms in the layout, such as the shape of the page on the computer screen or the desktop and its shape on the smartphone browser.

Pages: Pages differ from templates they present the page with the content and the final look. In addition to presenting the page to the final form, it presents the possibilities of a single page in terms of changing the content, and this is what the template does not provide, and usually, in the page’s layer, we send the whole requests.

Benefits of atomic design:

• Giving a more in-depth analysis of the contents of the page and the way it is built.
• The ability to modify and change the components of the user interface in a more easy way, whether at the design level or at the programming level.
• The ability to reuse and control components for any new project.
• Easily create any future Prototypes for user tests.

Finally…

The atomic design methodology has several benefits that are summarized in working with flexibility and speed, and whether the choice is while working on the atomic design methodology or any other methodology, the analysis of interface parts into small primitive elements is worth experimenting with, and it will add a lot to the designer and programmer while working on different projects.

Original resource: https://atomicdesign.bradfrost.com