why I love atomic design

a brief guide

Atomic Design is a method for creating modular design systems. For the description of his modular system, the inventor of the design approach, Brad Frost, used an analogy from chemistry science.
Small atoms collectively form molecules, which together form more complex organisms and ultimately templates.
Divide designs into elementary reusable components and work towards a larger whole… that’s the whole idea.

Atomic design, as the name implies, means the design is divided into its individual parts…

Atomic design may not have changed the way we design, but the method draws attention to the importance of the reusing components in web design.

The advantages of the modular system are both good for users and makers of a website. Not only does Atomic Design ensure consistency in the structure of the website, but also the addition of new building blocks is possible without influencing the existing template (good for makers).
Especially when several makers (developers and designers) working together, the modular system helps in understanding the code and design structure. It’s making sure all components have a clear purpose.

As only one instance of an atom, molecule or organism is being changed, you can be sure that all instances of that atom, molecule or organism — your developer calls them components — is changed on your website. So, change your button (that’s an atom) and every component using the button, will automatically update. Spend less time being afraid of bugs, spend more time developing great products.

Especially when using a smart system like React, you can not only design better, but also develop better websites. As I mentioned before, it’s all about reusing components. These components are used in bigger, more complex components.
With that in mind, we can prototype with the atomic design method (atoms, molecules, organisms and templates) in React.

Atomic design allows digital design standardization to work optimally for digital designers and developers. In order to achieve this, it is crucial to define your atoms, molecules, organisms, templates and pages in a design system, as an instruction for all developers and designers that work on your product.

With this amazing method, I managed to build an understandable design structure for Randstad, Tempo-Team, KNMG, and many other clients, that benefits both user and product teams.

Hooray for atomic design! ♥️

Related posts:

Kabab Digi is one of the conventional and delectable Iranian dishes, which is kebab however somewhat not the same as the ordinary grill ones since it simply must be on a skillet! Kabab tabei is…

Taxes raise money for government operations, but they also sometimes serve to change behavior in society. Taxes on cigarettes are a well-known example because they tend to cause smokers to quit…

In the current times, Python have become one of the prominent & trendy programming language in the world. It is being used in most of the applications like Building the websites/Servers, Software…