What are we talking about?
Posted: Sun Dec 22, 2024 5:15 am
Atomic design is not new, but it is still relatively unknown. As a designer, you are always looking for new developments in the field of design . Instead of the fascinating and brilliantly conceived logos, this time it was the term atomic design that caught our attention.
Brad Frost, web developer and designer, believes it is time for a new design system . With the growing number of interfaces, he believes it is time for a smarter approach. Where a corporate identity manual requires many pages to be redesigned and adjusted when a new device is available, this is easier with atomic design. And this with the underlying idea of a perfect and consistent user experience.
But what exactly is atomic design? In fact, it is nothing more and nothing less than translating the science of atoms and molecules into design. Atomic design has 5 components:
1. Atoms
The atoms are seen as the smallest components on a website. The components that cannot be stripped down any further. Think of the shape of a button and the layout of text or icons.
The advantage of starting with atoms is that you can immediately see whether the components, which are not very meaningful on their own, fit together. Once you have developed all the necessary canada whatsapp number atoms, you will eventually have a large collection of ingredients with which you can conjure up your desired recipe in no time.
Examples of atoms
2. Molecules
Because the atoms are not worth much separately, the second step, combining atoms, is very important. In this step, you combine a number of atoms to create meaningful molecules. Such as an input field or a search bar. For example, a button, an input field and a font are combined, after which a search field is created. Tada! Your invented atoms get a function.
Make sure you give each molecule only 1 function and that you do not confuse or combine the molecules with the next step: organisms. This way you create a nice overview of your style and designers and developers can easily adhere to the single responsibility principle . This means that you really only let each function perform one function.
Brad Frost, web developer and designer, believes it is time for a new design system . With the growing number of interfaces, he believes it is time for a smarter approach. Where a corporate identity manual requires many pages to be redesigned and adjusted when a new device is available, this is easier with atomic design. And this with the underlying idea of a perfect and consistent user experience.
But what exactly is atomic design? In fact, it is nothing more and nothing less than translating the science of atoms and molecules into design. Atomic design has 5 components:
1. Atoms
The atoms are seen as the smallest components on a website. The components that cannot be stripped down any further. Think of the shape of a button and the layout of text or icons.
The advantage of starting with atoms is that you can immediately see whether the components, which are not very meaningful on their own, fit together. Once you have developed all the necessary canada whatsapp number atoms, you will eventually have a large collection of ingredients with which you can conjure up your desired recipe in no time.
Examples of atoms
2. Molecules
Because the atoms are not worth much separately, the second step, combining atoms, is very important. In this step, you combine a number of atoms to create meaningful molecules. Such as an input field or a search bar. For example, a button, an input field and a font are combined, after which a search field is created. Tada! Your invented atoms get a function.
Make sure you give each molecule only 1 function and that you do not confuse or combine the molecules with the next step: organisms. This way you create a nice overview of your style and designers and developers can easily adhere to the single responsibility principle . This means that you really only let each function perform one function.