Structure Frontend using Atomic Design

In the natural world, atomic elements combine together to form molecules. These molecules can combine further to form relatively complex organisms. To expound a bit further,

• Atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. (Yes, it’s true atoms are composed of even smaller bits like protons, electrons, and neutrons, but atoms are the smallest functional unit.)
• Molecules are groups of two or more atoms held together by chemical bonds. These combinations of atoms take on their own unique properties and become more tangible and operational than atoms.
• Organisms are assemblies of molecules functioning together as a unit. These relatively complex structures can range from single-celled organisms all the way up to incredibly sophisticated organisms like human beings

Read more here about atomic methodology

By now you may be wondering why we’re talking about atomic theory, and maybe you’re even a bit angry at me for forcing you to relive memories of high school chemistry class. But this is going somewhere, I promise because we’re starting with a similar finite set of building blocks, we can apply that same process that happens in the natural world to design and develop our user interfaces

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:

1. Atoms: UI component that cannot be broken down further (e.g. Button, Text, Image, etc.)
2. Molecules: UI component that is built using 2 or more atoms (e.g. Photo action bar with Like button)
3. Organisms: UI component that consists of molecules and information around it building a complete set of repetitive layouts (e.g. user information around photo, caption, etc)
4. Templates: UI component to structure the layout that we need to be consistent for all pages
5. Pages: Finally we see the final product, complete with real content poured into it, which helps ensure the underlying design system comes together to form a beautiful and functional UI

Start by creating a folder that consists of subfolders as below,

Advantages of going with Atomic Design Methodology

• One of the biggest advantages atomic design provides is the ability to quickly shift between abstract and concrete
• Atomic design provides us a structure to navigate between the parts and the whole of our UIs
• Clean separation between structure and content
• The content we pour into our UIs at the page stage will influence the characteristics and parameters of the underlying design patterns

To learn more about how to implement a sample project using the atomic methodology, leave a comment and I’ll provide the GitHub link for the sample project.