Web designers use different approaches and techniques to design a website or application. Each designer designs according to his taste and interests. Some designers like to do their designs from top to bottom. That is, in the construction of the project, the first place the basic and general elements and finally go to the finer and more detailed details.
On the other hand, some designers start from the bottom up. These designers usually start from the smallest element and finally reach a more general design. Bottom-up design is called atomic design. This name is taken from the science of chemistry. Because atomic interactions start from a simple point and progress towards becoming more complex.
What is atomic design with particles? What role does it play in user interface design? What elements does this design have? In the following, these questions have been answered. Related examples that help to better understand the material are also mentioned.
Table of Contents
What is Atomic Design?
Atomic design is a method developed by Brad Frost that aims to provide a more deliberate user interface design system with explicit order and hierarchy.
Why atomic design?
This method is called Atomic Design because its main idea is based on chemistry and the study of the composition of matter.
The universe is made up of a fixed set of “atomic elements” known to most of us as the periodic table of elements. These elements are the building blocks of everything around us.
In chemistry, these atomic elements have fixed properties that define them. Oxygen and hydrogen are atoms with independent properties. But when these elements combine, they create molecules that get their unique properties from the atoms they contain. In the case of hydrogen and oxygen, the pairing of two hydrogen atoms with oxygen creates what we know as a water molecule.
This understanding of how smaller elements, or atoms, combine to create larger objects, or molecules, parallels well the world of design and the many elements we use to build our designs. Following the principles of atomic design provides us with a structure that not only creates our design formulation, but also the building blocks for building design systems and pattern libraries.
Atomic Design Elements
There are five distinct stages of the atomic design method, the first three of which are modeled on their equivalents in the world of chemistry. Each stage builds on the previous stage and acts as a sum of the items of the previous stages.
- Atoms
- Molecules
- Organisms
- Patterns
- Pages
Atoms
Just like chemistry, atoms are the smallest building blocks of our system. Instead of atoms like oxygen or hydrogen, we have buttons, inputs, labels, and other small elements used throughout our design. Iconography falls into this category, whether it’s a menu icon or an avatar because they are small elements that are put together to form the next step – molecules.
Molecules
At the molecule stage, we take our independent atomic design elements, each with their characteristics, style, and format, and begin to assemble them into new groups. Take our avatar atom for example. If we combine the avatar atom with the name and title tag, and other atomic elements, we can create a profile molecule. Each atom carries its unique properties in a group that alone has distinct properties.
Just like chemistry, we can combine similar atoms in different ways to create unique molecules to use in our design. Although at this stage the groupings are still relatively simple collections.
Organisms
As we enter the stage of organisms, our collections of atoms and molecules are now more complex than the molecular level. For example, consider our “specification” molecule.
It was a simple element containing an avatar and a pair of label elements. As we introduce this material into the organism, we may add it as an app for the profile page, along with navigation, a background cover photo, and some other molecules. This organism creates our head. An organism is not yet a complete design, but a component that can be reused among designs or layout patterns.
Patterns
The template is the first step in the atomic design method, which is not aligned with a step in the molecular world but is important for atomic design. A pattern is where we start to educate
Organisms and other elements to have a coherent design. You saw in the organism stage that the elements begin to form usable blocks of content and these elements begin to assemble into a pattern of blocks.
Which can be used on different pages. Consider templates as the blueprint for our finished page design. At this point, they are still elements and
They won’t contain actual data – just like a wireframe. Using our organism for the profile page, our template now includes a statistics organism that shows some details about the profile. This can take action.
Done, skill level, etc. There is also a contact organism that attaches at the bottom. With this, we now have a template for the pages. This pattern in
Our entire program is reusable.
Pages
Pages are the last step of the atomic design method. Here are examples of templates created (in this case one for each profile). In the design process may be pages
Don’t design it for every instance, but it’s helpful to make a few changes.
As your data changes, different profile information or languages may affect your template design. Entering the page stage allows you to test these changes and
Adapt to your patterns globally.
In some cases, you may not use all the entities in a template, either the user does not have them enabled or they are not applied, on pages.
If you want to show the parts of the template, there are on the pages.
Pages are also where most customers, and internal stakeholders, are reviewing the design because you see it all in one place. Although to
It’s also wise to share the pattern stage, but being completely faithful to your design together can help you spot weaknesses or parts of the design that
Not working well, recognize.
Use atomic design
Getting started with atomic design is simple. With the idea of assembling from small elements to patterns and plates, start by drawing the basic elements or atoms you need in your design. Starting with a free UI kit is a good place to start as many of them already include these atomic elements for you to customize.
From there, practice building your atoms into molecules and organisms and see how they work together and adapt in different settings. How you organize the elements, molecules, and organisms is up to you and will likely vary from project to project.