Atomic Design

In order to facilitate the process of web design, i.e. the creation of the layout for a website, and the subsequent implementation and programming, the web designer Brad Frost introduced a new method for an optimised design system called "Atomic Design" in 2013. With Atomic Design, websites are broken down into the smallest elements in terms of layouts, which can then be combined to form a complex framework, i.e. the finished page. He wanted to approach design with a methodical approach to build a consistent and expandable WEBSITE. One of the biggest advantages of this approach is that, even in the later implementation, a change only has to be made at one point in the programming in order to adjust something globally on the entire website. This is not only a time-saver, but above all a cost-saver.

Atomic Design divides the construction of a website into 5 stages

As you can already see from the term, Brad Frost draws on chemistry for his concept. The extent to which Webdesign is comparable to chemical elements is explained below.

• Atoms 

Atoms are the smallest elements of a website that cannot be further divided. They thus serve as basic elements in the design concept, so to speak. These smallest particles are still relatively abstract and therefore do not have much significance on their own.

In a web application, for example, a button in which other abstract elements such as colour palettes, fonts or animations are built in is called an atom. Theoretically, this button could also be split into its individual parts, but this is not the purpose of the atomic design method, as these abstract elements are located on a different level than the atom.

Other examples of atoms in this method would be HTML tags, fonts or an input field such as a header line.

• Molecules 

As in chemistry, a molecule in the design environment consists of a combination of several atoms. In atomic design, they are also referred to as the smallest possible fundamental units. The complex structure of molecules can be represented in a very simplified way by dividing them into atoms, which makes it easier for web developers to handle.

Accordingly, a molecule represents, for example, a complete HTML form on the website that consists of various elements, such as several input fields.

• Organisms 

Following the chemical principle, an organism consists of several molecules and defines, for example, the functionality and appearance of a website. Thanks to this approach, it is relatively easy to react to the requirements of users or customer wishes, as completely new organisms can be created through a new combination of molecules. The structure of the website can then be rearranged very easily and quickly without having to change much in the programming or the basic structure.

Concrete examples of organisms in the web application would be a complete page header or footer or even a complete news section.

• Templates

This is where the comparison with chemical elements ends, also because the term "template" is easier for the customer to understand. Templates consist of a combination of organisms and images and represent the first concrete result of the Webdesign process. This result combines all the preceding steps and forms a unit from the previously abstract elements (atoms, molecules).

Templates are several page models that have the same structure but do not yet contain any concrete content elements.

• Pages

At this stage, the templates - the basic framework, so to speak - are filled with individual and concrete content. This final result of the web design process then provides information about how effective the design system was. It shows whether the web developers might have to go back one or more steps to adjust certain atoms or molecules. Because in the end, the overall goal is optimised user-friendliness.

Advantages of Atomic Design

Although the end result is relatively close to that of other web development approaches, the Atomic Design method has some distinct advantages.

• Atomic Design makes it much easier to design custom templates for the individual content of a website. Since the entire design is split down to the atomic level, the individual elements can be arranged in terms of usability and user journey, as required by the customer's needs and wishes.

• Developers no longer have to wait for the complete finished design, but can already start programming individual atoms. Once the design is complete, the atoms only need to be placed in the right positions.

• If a customer has a change request for the display, such as changing a button color, the developer only has to make this change in his CSS class and the design is globally adjusted on the entire page. Changes or new requirements from the customer can thus be implemented very quickly.

• New templates can be created with existing building blocks (atoms, molecules) relatively quickly and easily by simply recombining them. In this way, either completely new templates can be assembled or new organisms can be inserted into already existing templates.

• By reusing already created atoms, molecules, etc. for other designs, web developers can save time and client development costs. In addition, new design drafts are created very quickly and can therefore be implemented more quickly.

• Another advantage is that when changes are made, the entire structure does not have to be developed from scratch, as existing atoms can always be incorporated. As a result, the user recognizes individual elements on the website and knows, for example, that a button has the same function as the one on another page.

• The methodical construction of a website by Atomic Design makes it easy to understand complex systems. The source code is usually more logically structured, which makes changes faster to implement, as developers can identify specific segments more quickly.

• This, in turn, also supports and facilitates collaboration among web developers. Atomic Design helps to quickly grasp the code structure of other developers and thus facilitates collaboration among them.

Conclusion

Atomic Design is a method that allows the design process to be built logically and methodically. It simplifies collaboration among developers and makes the whole concept clearer and easier to understand. It brings many benefits to web developers, web designers and ultimately clients, as the structure and precise planning can save time and money down the road. If all stages of Atomic Design are carefully thought through and implemented step by step, the result is a consistent, logically structured website that is perfectly adapted to customer requirements.