Atomic design (Atomic design)

A methodology in UI design that allows for the most optimal design of a design system. The concept was formulated by interface designer Brad Frost under the slogan "Create systems, not pages". In other words, instead of designing, for example, the entire interface page at once, it is more logical to assemble it by details. From the smallest elements to assemble larger ones and to form modular pages and blocks in such a way that, if necessary, they can be easily changed anywhere and in any volume by removing or replacing the necessary element.

The basic building blocks (HTML elements) that make up the interface. They cannot be broken down into smaller elements without losing their functional value. These include buttons, colors, icons, input lines, color palettes, and animations. As in nature, the atoms of the interface can not exist by themselves and acquire meaning only in certain combinations with each other. They serve as a library of templates.

The simplest groups of atoms that function together as a single semantic unit. Such a unit can be inserted, moved and copied in its entirety in those places of the interface where the function of the unit is required. They serve as the basis of design systems, as they are intended for repeated use in a single interface. Molecules form complete building blocks for work. Organisms can be built from them.

More complex groupings of atoms and molecules that make up relatively complex discrete interface sections. May be composed of the same and/or different types of molecules. For example, the organism from the front pages of a website may consist of many different components: a logo, a navigation system, a search form, a block of links to social networks. And the organism of the product grid will consist of one repeated molecule containing, for example, the photo, name and price of the product. At this stage, the design becomes visual enough to form the visual style of the interface, make edits and discuss with the customer.

Here the analogy with the chemical structure of substances ends, and the specifics of UI design begin. Templates consist mainly of groups of organisms clustered together to form blank page layouts. They schematically illustrate the arrangement of organisms and content on UI pages - their size, format, etc. Help to make the work with relatively abstract molecules and organisms more concrete and structured.

Concretized template instances. Pages are filled with real content. At this stage, the effectiveness of the entire design system is most clearly shown. The concrete view of the page reveals all the errors at the previous stages, and the design-system, formed on the principle of atomic design, allows to correct them painlessly, point by point and quickly at the level of atoms, molecules or organisms.