Atomic Design is a modern web design methodology theorized by Brad Frost.
Discover the concept of atomic design and its benefits…
Everyone had pretty much the same screens.
Sites were viewed from a computer.
It was then possible to design the pages of a site like the pages of a book, all in the same format.
Today, there are many different ways of viewing a site.
Computers, tablets, smartphones, connected objects and even televisions are all devices that can be used to consult a website.
The number of available screen sizes has grown accordingly.
It is therefore no longer possible to design websites in the same way.
Atomic design is a modern way of designing websites, making it easier to adapt the display to any screen size.
The classic website design method
The classic method for designing a website is to define its architecture and design page by page.
We create a mock-up of the home page, a product page, shopping cart page, order summary page, payment page and so on. 
Repeating elements (typically headers and footers, certain menus…) are identified and extracted for reuse.
The HTML structure takes shape, followed by CSS for display styling.
If we’re working in “mobile first” mode, we’ll start by integrating the pages so that they display optimally on smartphones and tablets.
They will then be adapted to display correctly on larger screens.
The advantage of this method is that you quickly have an almost complete mock-up, giving you a good idea of what the final version of the site will look like.
The main disadvantage is that not all elements are necessarily reusable on several pages of the site, or even for other sites.
Components are not necessarily standard.
If you want to reuse them, you’ll probably have to adapt them.
What is Atomic Design?
Atomic Design is a method conceived by Brad Frost for constructing the interface design of computer systems.
It is inspired by the way atoms combine to form molecules, which in turn assemble to form complex organisms.
The principle of atomic design is simple.
An interface can be divided into a finite number of atomic elements.
All web pages are composed of the same HTML elements (head, body, footer, style, script, label, fieldset, button, article…).
Once you’re aware of this, you can apply the same concepts as in chemistry to interface design.
There are five hierarchical levels in atomic design:
- Atoms,
- Molecules,
- Organizations,
- Templates,
- The pages.
Each level combines with the others to form an interface.
Atoms
Atoms are the smallest functional blocks.
They are found in all user interfaces.
Typically, all basic HTML elements are atoms.
Each atom has unique properties, such as its size.
As in chemistry, individual atoms are not functional.
They only really become functional when they combine.
The molecules
Molecules are simple groupings of interface elements capable of functioning separately.
Once combined, the atoms forming the molecule have a functionality, a role.
For example, when you combine the atoms of a label, an input field and a button, you obtain a form molecule.
A click on the button triggers the sending of the form.
The behavior of this molecule is simple and predictable.
It’s portable and reusable.
So it can be reused wherever it’s needed.
Organizations
Organisms are more complex components of the user interface.
They can be made up of groups of molecules, atoms and even other organisms.
They form very specific portions or sections of the interface.
An organism may, for example, form the header of a web site.
It may be made up of several molecules assembled together, such as a menu and a search form.
An organism can be composed of different molecules, or of a single molecule repeated several times.
This is the case, for example, for the display of a product category on an e-commerce site.
A molecule will be used to display a product (photo, title, quick description and price) and it will be repeated and displayed in the form of a grid.
Templates
Templates are used to position different components in the structure that will define the web page.
The template will provide a context for the molecules and organisms so that they can articulate and function together.
The focus here is on the structure that will display the content, not on the final content of the page.
In this way, it’s possible to create a skeleton capable of adapting to any type of content.
The pages
Pages are derived from templates.
They show the final display obtained with the actual content intended for the site.
The page is therefore the highest level of atomic design, as it is what the user will ultimately see.
The benefits of Atomic Design
Organization
The atomic design approach provides an overview of the components used in the construction of a page.
It’s possible to create a gallery of molecules and organisms that can be reused in several places on the site, or even in several places on the same page.
All components can be created in compliance with the company’s graphic charter, for example, and used by developers.
The result is a uniform design for all teams.
Simplicity
When it comes to modifying a component, whatever its level, it’s simpler to do so.
Modifying a molecule in the gallery will automatically be reflected in all the organisms in which it is used.
The result is greater simplicity and graphical consistency.
Flexibility
Atomic design also offers greater flexibility.
Rather than spending time defining each page independently of the others, developers can concentrate on structure and logic.
All elements are available from the outset.
Mobile Adaptation
Last but not least, this component-based design enables us to build a user interface that adapts equally well to the screen of a smartphone or a 4K TV.
While molecules cannot be modified, the atoms that make them up can react differently according to the space available to them.
The different variations of an atom will be thought out at the very moment of its conception.
Custom design for your e-commerce site
I’m here to help you design your e-commerce website.
Don’t hesitate to contact me to find out more and explain your needs.
We’ll work together to define the structure and design of your site.
