What Is Virto eCommerce Atomic Architecture?

Computer designers who work in the field of UI and front-end architects are probably very familiar with the concept of atomic design. The “Atomic Design” was invented by Brad Frost and presented in 2013 for the first time. Frost borrowed his ideas from organic chemistry and microbiology, transferring the roles of those elements to the structure of computer interfaces.

What is Atomic Design in Nature?

Brad Frost describes atomic design as a combination of atoms, molecules, organisms, templates, and web pages. These elements work together to create effective interface design systems. If you’d like to read more about using atomic design for UI, visit https://atomicdesign.bradfrost.com. With Frost’s design system, you can produce more consistent and intuitive UI faster than ever before.

atomic design by Brad Frost

Atomic design is not a mechanical model for assembling an interface from a number of typical parts like Lego, but rather a mental model. With similar analogies in mind, a designer can create user interfaces as a kind of holistic perception by the user and as a collection of specific parts at the same time.

Meet eCommerce Atomic Design Concept

As is often the case with mental models, they step over their boundaries and original subject areas. The atomic design model is no exception. With its help, solution architects could build not only interfaces, but also applications and systems. Using it as an example, ecommerce atomic architecture has become one of the most promising applications of atomic design.

Atomic design elements in ecommerce by Virto team

Atomic design elements in ecommerce by Virto team

To explain Virto Atomic Architecture, we adopted the original atomic representation to make it easier to understand and highlighted the following 5 layers, numbered from bottom to top.

5. Cloud
4. Organisms
3. Systems
2. Cells
1. Atoms

Levels of atomic design architecture in ecommerce by Virto team

Levels of atomic design architecture in ecommerce by Virto team

Enough abstractions! Let’s delve into the structure of our real ecommerce platform, built of five atomic design layers. We will continue this post further, talking about each layer of Virto Commerce architecture.

Atomic design architecture in Virto Commerce platform

Atomic design architecture in Virto Commerce platform

Principles of Virto Atomic Architecture

As is often the case with mental models, they step over their boundaries and original subject areas. The atomic design model is no exception. With its help, solution architects could build not only interfaces, but also applications and systems. Using it as an example, ecommerce atomic architecture has become one of the most promising applications of atomic design.

Oleg Zhuk
Technical Product Owner