Atomic design

Atomic design is a UI design methodology for building a design system in the most efficient way. The concept was formulated by interface designer Brad Frost, quoting Stephen Hay: "We're not designing pages, we're designing systems of components." In other words, instead of designing an entire interface page at once, it makes more sense to assemble it piece by piece. The smallest elements are combined into larger ones, forming modular pages and blocks that can easily be changed anywhere and to any extent by removing or replacing the relevant element.

Atoms are the basic building blocks (HTML elements) that make up an interface. They cannot be broken down further without losing their functional meaning. They include buttons, icons, input fields, color palettes, and animations. Just as in nature, interface atoms cannot exist on their own and only become meaningful in combination with one another. They serve as a pattern library.

Molecules are the simplest groups of atoms that work together as a single functional unit. Such a unit can be inserted, moved, and copied as a whole wherever the interface needs its function. Molecules are the foundation of design systems because they are meant to be reused many times within a single interface. They form complete building blocks to work with, and organisms are built from them.

Organisms are more complex groupings of atoms and molecules that make up relatively complex, distinct sections of an interface. They can consist of identical and/or different types of molecules. For example, a website header organism may include many different components: a logo, navigation, a search form, and a block of social media links. A product grid organism, on the other hand, consists of one molecule repeated many times, containing, for example, a product photo, name, and price. At this stage, the design becomes concrete enough to shape the visual style of the interface, make changes, and discuss it with the client.

This is where the analogy with chemistry ends and UI design specifics begin. Templates consist mostly of groups of organisms arranged together to form page layouts without real content. They show schematically how organisms and content are placed on interface pages: their size, format, and so on. Templates add specificity to the work with relatively abstract molecules and organisms and give them structure.

Pages are specific instances of templates filled with real content. This is the stage where the effectiveness of the whole design system becomes most visible. A real page reveals any errors made at earlier stages, and a design system built on atomic design principles makes it possible to fix them quickly, precisely, and painlessly at the level of atoms, molecules, or organisms.