Atomic Design Methodology for SuiteCommerce Advanced

As web designers, we are constantly looking for new and more effective methodologies for creating dynamic and more efficient UI designs. In this search, you should consider other industries and verticals to see how they are doing design, and not just look for inspiration among web based sources. For example, if you look at the industrial design and architecture industries, you will see that they are miles ahead in their design strategy, as they use smart modular systems to create their designs, particularly for highly complex objects like ships, buildings, aircraft, etc.

Whereas the common practice in web design is the age old design the home page first and then design the inner pages like About Us, Services, Contact, etc. This approach is useful if you’re designing a website that only has four or five pages, but if you’re designing a large scale application or a e-commerce storefront for example, then this approach will not work. In such cases it is better to use a smart system of design modules that you can use on demand on different pages or sections of the site, without needing to re-write the code for each page. This design approach is known as atomic design, and was first introduced by Brad Frost.

Inspiration from Basic Chemistry

Brad Frost derived this design methodology after being inspired by the fundamentals of chemistry, which involve chemical reactions between atoms. These atoms combine with other atoms to form simple or complex molecules, depending on the process involved in chemical reaction. And the molecules can then be further combined together through different processes to form highly complex organisms.

What is Atomic Design?

This same concept is the driving principle behind atomic design, where web pages can be broken down into smaller sets of elements. Atomic design is not about designing each individual page but rather, is focused on designing smaller components while keeping in mind the entire system’s design or architecture. Its purpose therefore, is on designing a system of components, which can be used anywhere in the application.

“Atomic design is a methodology used to construct web design systems.”

— Brad Frost

“We’re not designing pages, we’re designing systems of components.”

— Stephen Hay

Furthering this concept of atomic design, Josh Duck created a periodic table of HTML elements, in a similar style to the scientific periodic table of elements, to give a visual representation to this design concept. Below is a screen shot of this periodic table HTML design elements.

Stages of Atomic Design

The atomic design methodology consists of five distinct stages which combined help create a modular design system. These stages are as follows:

• Atoms
• Molecules
• Organisms
• Templates
• Pages

Atomic design begins with the design of basic elements like headings, buttons, paragraphs, form labels and inputs. Group of these elements can be combined to form molecules, which in turn can be combined to form organisms, templates and pages respectively (as depicted below). An easier way to look at it would be to think of the atoms, molecules and organisms as the basic building blocks, while the templates and pages can be considered as containers.

 

Atomic Design in SuiteCommerce Advanced

NetSuite’s SuiteCommerce Advanced platform already uses the atomic design methodology extensively, by allowing you to create reusable design components that can resued throughout the application. Let’s look at an example to see how this design methodology in implemented in SuiteCommerce Advanced – head on over to our demo SCA store.

1. Atoms

As you know, atoms are the smallest and basic building blocks of matter. In atomic  design in SuiteCommerce Advanced, the atoms are the basic HTML tags of a web interface; like buttons, form elements, check-boxes, radio buttons etc. Even the more abstract web UI elements like headings, paragraphs, fonts, thumbnails etc. can be considered as the atoms (as shown in the example below).

2. Molecules

In atomic design, the term ‘molecules’ refers to groups of atoms that have been combined together through some process. When designing a web interface, these molecules serve as the backbone of your design system. In SuiteCommece Advanced for example, we have a molecule called “facets”, which is a combination of several atoms like buttons, headings, facet group, color picker and price range. The screenshots below depicts this concept in more detail.

 

3. Organisms

Organisms in atomic design can be considered as groups of atoms and molecules that have been combined together and which interact with each other. At this stage of the design process, you get relatively more complex and elaborated functionality in your web application’s UI. Since at the organism level, you begin to see the final interface of your web application. In SuiteCommerce Advanced for example, the headers can be considered as the organisms, which themselves are a combination of various atoms and molecules such as logos, navigation options, buttons and search form(s) (as depicted below).

4: Templates

Templates in atomic design consist of groups of organisms, molecules and atoms. At this stage, you will see the design of your web application coming together to form a final layout. Templates are basically the grid patterns you use to create the basic structure of your design, before you add visual elements or content in the grid. In atomic design in SuiteCommerce Advanced for example, you have a template for the product listing page, which displays a list of products and provides different views, along with sorting and filtering options. This template is a combination of the page Header, Footer, Facets, List Header and Search organisms (as shown below).

5: Pages

In atomic design, pages are the last and final stage of the design system, where the grid patterns you created in the previous stage are replaced with real content and visual elements to generate the final image of what users will actual see. This stage is a crucial part of the atomic design system because this is where you test your design with different inputs to ensure that things don’t break.

For instance, you may need to visualize what the page will look like with a heading containing 30 characters resembles, or check to see what it will look like with a heading with 220 characters. Or for example in SuiteCommerce Advanced, if you want to see how the checkout page looks if a user has only one item in their shopping cart, and what it looks like if he/she has ten items in their cart but has also applied a discount code. In short, these examples influence how you loop back to your design system and develop your framework.

Shown below is an example of the final product listing page from our demo SuiteCommerce Advanced store.

 

Wrapping Up!

These five distinct stages combined together create an effective and modular design system. As you can see, atomic design combines modular design with the concepts of web application development to create a powerful and effective design system that allows you to create world class designs while reusing the majority of smaller components, thus helping you save both time and effort.

In my next post, we’ll discuss the advantages of Atomic Design and it’s detailed usage in SuiteCommerce Advanced.