SCROLL
TO EXPLORE

4 advantages of using Atomic Design

Felipe SilbersteinJuly 29, 2021

The Atomic Design development methodology proactively simplifies the scaling and maturing of a platform to keep up with the growth of the business.

It enables better development consistency in structure and design, reducing delivery times by easing coordination between programmers and designers.

Ventajas de usar atomic design 2
spare-parts
spare-parts

The origins of Atomic Design

They say that it all began as an inspiration from Brad Frost regarding a way to simplify site development, but that could be brought to any platform. The idea was simple: the entire creation process had to be documented and, from there, create various element combinations to form larger components.

Regardless of complexity, they will all share the basic units, which implies visual and feature coherence. Thus, Brad's team and all those who followed this methodology left behind much of the friction points between design and development; There would no longer be most likely or similar pages (almost, but not).

When things are developed and designed from scratch, everything is an adventure; there is excitement when each component fits and works, turning the idea into a product. However, when the business prospers, plugins, new pages, and new channels are required. For those moments, this methodology is used to regulate and maintain coherence in design.

The core structure of this approach

Atomic Design is a methodology focused on interface development and its design system. It sets five stages for platform creation in the two aspects mentioned above, and although it is not a linear process, there is incremental progress between them.

  • Atoms are the basic functional unit with unique properties such as HTML tags, color palettes, or buttons. They are the base structure that, when connected, make up any organism and more complex pages.
  • Molecules are made up of 2 or more atoms and constitute operational features of a higher level and scope than an atom, such as a search engine with launch buttons.
  • Organisms are developments working together to the extent of constituting a single complex functional unit within the UI, such as a category panel or a contact form.
  • Templates are complete page structures with content set by type. Templates hold the intrinsic features of the components, which allows for better accuracy in the estimation of deployment and production times.
  • Pages are the result of the interaction between atoms, molecules, and organisms. They are also the functional product of a design system.
    • Ultimately, he used all the analogies of physics, chemistry, and biology to facilitate the understanding that the creation of sites could no longer be based on a rigid code structure and adjust the content to its functioning. Instead, the design must be created in a free form.

"Design System": from idea to superpower

Frost's idea was to think that pages are the product of assembling different combinable atoms and that the ways of relating to each other could be defined in advance.

By regulating the relationships, you standardize the design, and after that, it doesn't matter if you need to create three new pages or transform a site with thousands of pages. A design system allows you to maintain governance in development at any scale.

So to realize his idea, he created his atomized product and demonstrated to his development team - as his book relates - that he could significantly reduce the time to launch new sites, even increasing the quality of the sites by maintaining consistency over time.

This ended up overcoming many of the recurring problems of development and design teams. The limitation of having only a handful of templates for the different needs of each company was forgotten. By creating design systems, you free up the ability to create your own alternatives, which completely streamlines the development of interfaces.

As Brad and his colleagues documented their proposal, Atomic Design emerged as a methodology. Being able to export the ability to create design systems to any organization that seeks to sophisticate its platforms, giving the work teams a superpower never thought of when they created it. Today is the best alternative for large sites.

Thus, a design system gives companies the ability to create future pages and expand to any scale. Even brands with offices on different continents can standardize their design across different local sites.

A hierarchy in design enhances brand identity

To define the relationships between all these assemblable atoms or modules, they are based on the brand identity. In other words, it is the philosophy and values of the brand that will guide the rules in the creation of sites and not the other way around, as was previously the case.

A style guide is formed from these rules, or it can also be understood as an identity guide. It contains both content and structure aspects, allowing, on the one hand, to create a common language among the teams and, on the other, to work simultaneously.

An example of how these definitions of each brand can operate could be an eCommerce, which will need to be adding or editing product pages constantly. A suggestion and search system must also be included in them. So one atom will be the input field, another atom will be the button and a "Search" text box with it. When you put them together, they form a molecule to which you can always define a series of specific colors according to the brand's characteristics and its design system.

Frost understood that the fact that a brand is consistent with its design over time is key for people. Even when you change elements in the design system, replicating with the same consistency in all the digital channels you want is critical for the business.

las-ventajas-de-utilizar-atoc-design-2

4 advantages of using this methodology

This intersection between design and development brings several advantages to a project, among which are:

  • The creation of design systems in the early stages of the project allows speeding up UI developments and scaling turned to the growth of the business by having libraries of atoms and molecules ready to deploy a new product.
  • An atom-based structure seeks to fulfill the principle that states that these elements must perform a function and perform it well, which is why it encourages their reuse in the various phases of creating test molecules and organisms, which reduces the time between ideation and moving to production.
  • The creation of modularized content allows navigating from the abstract to the concrete, allowing to test everything from new forms to significant interface updates without conditioning or affecting the platform's backend.
  • The end-user perceives greater consistency in the digital experience, thanks to the perception of the same ecosystem with a combination of atoms that were part of the UX strategy.

Speed up the development of your design systems with Contentful

Contentful provides a central integration point for many other tools making up the solution. It allows organizations to centralize their various content models and maintain clear data and design governance.

By integrating UX extensions and an API-First approach, platforms gain a better digital customer experience. Content teams and developers will also benefit from having a centralized content repository, providing consistency for future developments.

The cherry on top is that Contentful, in addition to being compatible with Atomic Design, enhances developments by reducing time-to-production.The platform creates efficiences by allowing you to easily duplicate and reuse your most commonly used spaces, reducing tedious, manual processes.

Atomic Design for Buparization, the case of Chile

When we learned about Brad Frost's proposal, we clearly understood that this methodology was the piece we needed at Reign. Thus, our approach is to build platforms in a modular way and adjust to the specific needs of the brands. And creating a Design System was just that.

An example of how we used it was during April 2021, when we held the Latam Headless Commerce Week, a week of partner talks and presentations of headless eCommerce success stories. One of them was Bupa Chile, a subsidiary of a global British healthcare group, which in Chile had been searching for an alternative to manage the content of all its national platforms for a year.

At Reign, we proposed a headless architecture managed via Contentful, along with standardization and support in creating design systems, which they called BADS (Bupa Atomic Design System).

According to Jean-Paul Staig, head of digital experience & performance at Bupa Chile, the result improved the service experience, making the customer feel part of the same ecosystem. On the organizational side, the benefits of applying Atomic Design are: upon creating the design systems and creating every necessary atom, a new product can be launched with all its pages and components in less than a week.

In eCommerce, success is in the ability to quickly adapt to change and always be available in your best version. In this challenge, Reign will be your best partner to deploy headless commerce based on atomic design, always seeking to be prepared for the future.

Follow us