This method, inspired by Modular Design, came from the analogy between web and books, which shows that the concept of page is no longer relevant. Indeed, with the multitude of media and screen sizes we are exposed to today, this concept is no longer realistic.
Image already added
Image already added
Brad Frost proposes a method based on a biological metaphor to create modular component systems that adapt to any type of support. It defines 5 design steps to cut an interface: atoms, molecules, organisms, template and page.
The Atomic approach in details
- The atoms
- The molecules
- The organisms
- The templates
- The pages
In life, atoms are basic elements of matter. In atomic design, they are the basic elements of our interface. These atoms are the smallest elements of our system of components, they are therefore indivisible without losing their primary function.
In practice atoms are basic HTML elements such as titles (h1, h2, h3 ...), form elements (input, label, button ...) or images (logo, icon ...). Each atom of interface has its own unique properties. For example: a label will have its own font size and font, a form field a background color and a border and a button will have its background color and a font color.
Example of interface atoms: label, text field, button
Within a styleguide, the atoms give a global view of your style and determine the identity of the brand.
If we break down this example, we find an atom for the logo, an organism / molecule for navigation and a molecule for the search form.
In chemistry, molecules are atoms linked to each other. The same atom, when linked to another atom of different natures, have distinct properties.
In an interface, the molecules are groups of HTML elements (atoms) which have a function between them. For example, a form label associated with a text field and a button will create a search form. The result is a simple, portable and reusable component that can be dropped wherever a search feature is needed.
Example of an interface molecule "search form"
Assembling simple functional group elements is not new, but it helps designers and developers to adhere to the principle of single responsibility. The creation of simple interface molecules facilitates testing, encourages reuse and promotes consistency throughout the interface.
Organisms are more complex interface elements, composed of several groups of molecules and / or atoms and / or other organisms. In general they form very different sections of an interface, such as a header, a list of products, search results.
Let's take a look at the example of a header. A header type organism forms an autonomous section of an interface. It can consist of a logo, navigation and a search form.
Exemple of an interface organism "header"
This is where the analogy with the world of chemistry ends. This analogy has served us to set up our hierarchy and build the elements of our system components.
Templates are areas of a page that provide context to the organisms they contain. This context determines the visual rendering of the elements that compose the template according to the space granted by the screen.
When developing a system of components, it is essential to define how these components fit and work together in different contexts. This is the role of page templates.
Templates focus on the structure of the content and not the content itself. A component system must take into account the dynamic nature of the content. It is therefore important to be able to see the evolution of a title, an image or a list according to its context.
Exemple of an interface template "Home page"
The pages are like templates but with real content. So, if we fill our previous example with real content, we will get a page.
Exemple of a page with real content
The page is the final step of the atomic design. It is essential for testing the effectiveness of our component system. Real content may highlight potential design issues for our components. If a problem arises, we should go back and iterate to correct it.
Finally, the pages provide the necessary framework to materialize the different variations of the templates. For example, some information is hidden when the user is not connected to the website or some news has a shorter introductory text than others or simply does not have one.
The advantages of Atomic Design
It is true that other systems of components like Boostrap or Foundation already exist but they also have their limits:
- Everything that is produced with these systems tend to resemble itself
- We must deal with many useless components
- We must also often complete some features
- We use the logic (naming, style ...) of someone else
Using Atomic Design allows you to:
- Moving quickly from the abstract to the concrete: we can simultaneously see our decomposed interfaces in their atomic elements and observe how these elements combine to form our final experiences.
- Put in place a common language within the teams and facilitate a better communication between them (designer, developers, product owner ...).
- Define a component system within a company providing the necessary bricks for the materialization and testing of prototypes in a real context. These prototypes can be realized during workshops (Design Sprint, LEAN UX).
- Provide a styleguide (atoms and molecules) to the whole of the company making it possible to ensure a global coherence on all the interfaces while avoiding the duplicate components.
- Structure developments: the SASS tree can integrate the 5 levels of the atomic design by defining a directory for each level. In the "atoms" directory, we will put a form.scss file, a typography file and so on. In the directory "molecules", we will place all the molecules of our site, and so on for the following organisms and levels.
- Save time by avoiding to decline all the screens of our applications or websites.
Atomic Design therefore provides the necessary steps to design a modular component system. This method makes a real difference with a more traditional operation that starts from the design of an interface and then dissect the most atomic elements. Here we will first create these atomic elements to arrive to an interface as a whole.
However, it is never easy to design component systems and styleguides. Atomic Design gives us some keys to achieve this. Like any method, it will be necessary to know how to adapt it to our needs and our context. A very good example is an article by Jeff Crossman outlining the method that GE uses to design their applications: https://medium.com/ge-design/ges-predix-design-system-8236d47b0891
Do you need help with your design process?
Brad Frost's website : https://bradfrost.com/blog/post/atomic-web-design/
To buy the book : https://shop.bradfrost.com/
An excellent article by Audrey Hacq : https://medium.com/@audreyhacq
Atomic and architecture SASS : https://subvisual.co/blog/posts/32-our-css-sass-project-architecture-and-styleguide/