Atomic Design

Atomic Design is a web design approach developed by Brad Frost. It is based on the idea that a design system is similar to chemical elements. The advantage of this design method should be that different elements can be used multiple times and the web design can be easily modified.

Background

The name and concept of "Atomic Design" was presented by Brad Frost. He presented the design concept in 2013 with the aim of giving web design a methodical approach.

Frost got his inspiration from chemistry. The atom is the smallest unit that makes up our world. Several atoms form a molecule, which in turn can be combined into larger units and organisms. Frost adopts this structure for his approach to Atomic Design.

The structure of Atomic Design

Atomic Design consists of five elements that build on each other: atoms, molecules, organisms, templates and pages.

• Atoms: Atoms are important basic elements in this design concept. With regard to web applications, atoms are HTML tags, for example. Atoms can also contain other abstract elements such as color palettes, fonts or animations. Atomic design is characterized by the fact that they are still quite abstract, and they alone have no real use. Such an "atom" in the web design could be a button or an input field.

• Molecules: Molecules consist of a combination of different atoms. Molecules in the sense of atomic design are the smallest possible, fundamental unit from the combination of different atoms. For example, several atoms can become search forms for websites. Molecules can be very complex. However, the subdivision into atoms makes the complexity easier to handle.

• Organisms: Different molecules can be combined to "organisms" in Atomic Design. In this way, the functionality and appearance of a website can be defined. Due to the different arrangement of the molecules, a design draft can be quickly adapted to user or customer requirements despite all its complexity. Organisms can consist of a logo, a main navigation, a search field and a list. For example, an organism can be developed as the basis for many different subpages. By simply changing the individual molecules, new organisms can be formed, which can then be used, for example for a product page.

• Templates: Templates are created by assembling and forming organisms. At this point Brad Frost also leaves the analogy to chemistry. For him, the term "template" ultimately makes more sense, as it is more understandable to customers. The template is the first concrete result of the web design process for Frost. It provides the connection between the originally still abstract elements (atoms, molecules).

• Pages: The "page" is used to fill the basic framework of a website with specific content. Possible placeholders are replaced by the individual content. For Brad Frost, the final stage determines how effective the design draft or system is. As a result, web developers can go back one step to customize molecules, organisms or templates, for example to increase the user-friendliness of the website.

Advantages of Atomic Design

Atomic Design has many advantages. These include:

• Reusability: If an atom is created, it can easily be reused later for other designs. A new definition is not necessary. This means that web developers can save time which can reduce costs for clients. In addition, new design drafts are possible more quickly due to the modular structure.
• Uniformity: Through the successive development of a design draft, a higher uniformity can be achieved. The higher the level in the design concept, the less effort is required to achieve changes.
• Extensibility: The biggest advantage is the simple extension of existing systems. In this way, new atoms or molecules can be inserted without having to reprogram or develop the complete structure. It is also possible to recombine the existing molecules or organisms.
• Handling: Even complex systems can be traced more easily thanks to the methodical design structure. The source code is usually more logical, making it easier to make changes. Developers can identify the code segments more quickly.

Criticism

There are critics who see Atomic Design only as old system with a new look, as web design is already naturally subdivided into templates, function or layout blocks. In addition, modern Responsive Web Design or Progressive Enhancement follows similar rules, so that developers and web designers today do not design websites randomly but in a structured manner.