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.
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.
It is true that other systems of components like Boostrap or Foundation already exist but they also have their limits:
Using Atomic Design allows you to:
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 : http://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/