Don't you want to read? Try listening to the article in audio mode 🎧
The definition “design system” indicates a set of specifications that allow the creation of consistent user interfaces (UI) in terms of style, colors, fonts, reference brands and any other component that can guarantee an optimized user experience (UX). With a design system, it is possible to define guidelines, patterns and rules for UI design that front-end developers can exploit, regardless of the device chosen for the use of a content or service. But how much could subjectivity be influential in the choice of the elements that are involved in the composition of an interface of a website or application? It is the question that the Web designer Brad Frost asked himself and whose answer is summarized in a new methodology called Atomic Design and inspired by Chemistry.
What is Atomic Design
Atoms are units that make possible the organization of matter and represents its smaller portion. Matter can assume different states (solid, liquid, gaseous) in which atoms aggregate into molecules which are the base unit of chemical elements. Finally, the combination of several molecules leads to formation of organisms that can be more or less complex. Atomic Design partly follows this dynamic by identifying 5 hierarchically arranged stages (or levels) that allow the creation of a complete design system. In fact, we are talking about a modular approach in which the elements that constitute a UI are thought, first of all, as atoms that can be aggregated into molecules, and which can be combined in the form of organisms, in their turn.
The five stages of Atomic Design
Following a partial analogy with chemical processes, Frost distinguished the first three stages of Atomic Design in atoms, molecules and organisms. Plus, there are other two: templates and pages. Each of the previously mentioned stages takes on a specific meaning in the path leading to the formation of an interface.
Atoms
In the context of a UI, atoms represent inseparable elements that cannot be further subdivided, and they can be described as the bricks needed to build a house. From the point of view of UI design for the Internet, atoms can be regarded as equivalent to HTML tags, buttons of a form, or a text field. One of the peculiar characteristics of atoms concerns their high level of abstraction, which is why animations or fonts can also be considered as such.
Molecules
Unlike what happens with atoms, which by nature are monads, molecules appear as groups bonded together. A molecule is basically a group of atoms that can be combined in order to perform a function. A form label, a search input and a submit button are unusable atoms if taken individually, if joined together they create a form for submitting feedbacks, or formulating queries to a search engine, instead. There are more or less complex molecules and, as in the case of atoms, they can be joined together to obtain articulated units.
Organisms
In Atomic Design an organism is the result of the combination of several molecules. Consider, for example, the case of the header of a Web page that was chosen by Frost to describe this stage. It may contain an internal search engine, a menu, a brand logo and icons for connecting to social networks. Each of these molecules, therefore, is involved in the formation of an organism, which is precisely the header, but there are different types of organisms and their nature depends on the type of molecules aggregated in them. For this reason, organisms can also be considered as components of a UI, such as a footer or the section of a Web page designed to host contents.
Template
With the template stage, Atomic Design partially overcomes the model inspired by Chemistry, by starting to propose what should be the final result of a UI design. A template is in fact a set of organisms, which, when joined, lead to the formation of pages layout. Thanks to templates, it is possible to allocate all the elements that constitute a layout. In this way, the components that are involved in the formation of an interface have a structure, finally. Since we aim to offer a definition of “template”, we can say that they can be represented as aggregators able to offer a context to atoms, molecules and organisms.
Pages
Pages represent templates, which means that they allow you to view the UIs in their final form, including the content they are intended to host. Frost defines pages as instances of templates, as they provide a complete representation of what is viewed by users. Besides being the culminating stage of Atomic Design, the pages allow you to test the effectiveness of the Design System adopted. If the tests detect critical issues, it will be necessary to intervene on molecules, organisms and templates to apply the necessary changes to a more performing output of the designed UI.
Advantages of using Atomic Design
Frost stresses that Atomic Design should not be considered a rule but a state of mind based on the "do one thing and do it well" principle, that is, concentrating on the individual elements of a project and developing them as best. On this basis, it is possible to resume the original point concerning the sometimes excessive relevance of subjectivity in Design Systems, with the risk of focusing on aesthetics in favor of user-friendliness. On the other hand, Atomic Design represents a scalable and strongly problem-solving-oriented methodology with which to obtain coherent interfaces that consider, first of all, what could be the behavior of users during their use. Since we are dealing with a modular approach, it allows to operate through reusable components with undoubted advantages, also from the point of view of productivity.
Talent Garden’s UI Design Master Course
Those interested in taking part in a training course with which to go in-depth on the potential of Atomic Design and design systems, have the opportunity to attend the next Talent Garden’sUI Design Master Course, which will take place between May 6th to July 16th 2022, reaching its tenth edition. This Master is accessible through selection and it is reserved for professionals such as Graphic Designer, front-end developers, Web and mobile, Art Director, Web Designer and Digital Project Manager with at least 3 years of work experience who want to always be updated on the newest trends on the User Interface Design field. The overall duration of the Master course is 120 hours, in blended format distributed between on-demand content, live online learning sessions and face-to-face lessons in the Calabiana Campus of Talent Garden located in Milan. For more information on the initiative, it is possible to consult the official page of the UI Design Master Course on the website of Talent Garden.
Conclusions
Atomic Design is a methodology that revolutionizes the concept of design system for the creation of user interfaces. Taking its cue from Chemistry, it subdivides each element of a UI into its essential and aggregated components, allowing them to be grouped in different and gradually more and more articulated forms, until an optimal result is obtained, in terms of usability.
Article updated on: 09 August 2023
Written by
Talent Garden, Digital Skills Academy
Don't Waste Your Talent. Turn It Into a Career With a Course That Fits Your Needs!
Talent Garden is your Digital Skills Academy, offering courses in Digital Marketing, UX Design, Digital HR and Data Analysis designed to launch your career.
