Skip to Main Content

Atomic Design - a short In­tro­duc­tion

Modern websites, web applications and apps should function perfectly on all conceivable devices and screens. The fact that websites are implemented responsively has been a standard requirement for years. This results in significantly increased, much more complex and technical requirements for the design of a modern website. A fixed layout (on a Din-A4 sheet) cannot be a solution. Likewise, it cannot be a solution to design every conceivable state of every single page (e.g. of a webshop). New ideas are needed!

The Atomic Design approach represents a method that aims to tackle this challenge in particular. The approach goes back to the web designer Brad Frost, who describes the principles in detail on his website.

Basic Structure of Atomic Design

I'd just like to touch very briefly on the basic idea: The essential idea is that a design system can be built from small parts. Brad Frost calls these smallest elements "atoms" in reference to chemistry. Atoms form molecules, and molecules in turn form organisms. In the end, the organisms can be used to create templates and, in combination with content, entire pages.

Atomes

Atoms are the smallest building blocks of design. They cannot be further divided. An atom in Atomic Design could be, for example, the design of labels, of headlines or buttons.

Molecules

Molecules are a composite group of atoms. They already serve a practical purpose, as long as they are embedded in the overall context of a page.

Example of a molecule could be the search input, consisting of the atoms "headline", "input field" and "button". 

Organisms

Organisms already represent complex components built from various atoms and molecules.

An example could be the header or footer area of a website, which is composed of an atom "logo", the molecule "navigation" as well as, for example, the molecule "search input".

Templates

Templates can be created by composing several organisms in the layout. A template provides for the first time a representation of the website as a whole. The implementation of such a template can already be realized as a functional prototype in HTML, so that the responsive behavior can be tested.

Pages

Pages are templates filled with real content. They are the "proof of concept". If it turns out that things are not yet working ideally, readjustments can be made by simply adjusting the elementary building blocks (atoms and molecules) to optimize the result.

More Advantages of Atomic Design

In addition to the ease of implementing responsive pages, there are a number of other advantages that make this system so attractive for large-scale and long-term web projects.

Scalability

If new requirements arise, new elements can be formed from the existing ones. In addition, new atoms can be added to the "atom construction kit" if absolutely necessary.

Reusability 

Defined atoms of the atomic design can be reused in the construction of new molecules and organisms. This saves time and, above all, ensures quality.

Consistency

By basing the overall design on small, defined units, it is ensured that more complex and larger units always produce a consistent picture. 

Sustainability

A project built consistently - even codewise in CSS - in Atomic design can be easily modified and visually updated during a rebrush. Adjustments to the atoms are inherited across the entire elements, so the effort required for a rebrush is significantly lower.

The Solution to all Problems?

In order to successfully apply this method, stringency, pre-planning and also a certain abstraction ability of all project participants is required. Furthermore, the initial effort for the setup is comparatively high. Therefore, it is usually not suitable for small one-pagers or individually designed landing pages.

However, the modular, sequential principle of Atomic Design makes it possible to define the design of extensive websites with many generic pages in particular. Here, the efforts in the planning and conception phase quickly pay off.

Furthermore, the principle fits ideally with an agile way of working, since adjustments, fine-tuning and changes are possible at any time and are part of the development process.