If you are a front-end developer or UI/UX designer in the web development scenario, then you may have probably heard of the concept of ‘Atomic Design.’ Introduced by Brad Frost, it is the method of breaking a website development component down into the most primary atomic elements and then combine them to build various parts of a website.
Why is atomic design significant?
This is called atomic design as it is inspired by chemistry. The concept goes as follows:
- Atoms are counted as the most primary building blocks of the world. They cannot be further broken down without losing its exclusive essence.
- By combining two or more atoms, we can form molecules. Atoms become functional and versatile on getting combined.
- Further, molecules can be combined in a meaningful manner, living or tangible organisms are formed.
- Templates are groups of such organisms, which further form. On reaching this stage in the bottom-up development process, you will start to see your designing elements coming together to initiate actions. Templates are more concrete and offer a meaningful context.
- At the next phase of Atomic Design web design, pages are tangible instances from templates which have active content. It is the topmost level of fidelity. This is the stage when you can test the design and effectiveness of the system.
Formation of a web interface in the atomic model
The atomic web design also follows the same concept. It consists of some basic elements of HTML, which can be further combined to form functional and tangible web formats. Building websites this way require a bottom-down development approach. In atomic design:
- Atoms are defined as the foundational blocks of web development, which cannot be further broken down without losing functionality. Commonly, these are the basic HTML elements like I/O forms, form labels, buttons, etc.
- These atoms can be further combined to form some molecules which take up new properties. In web development, molecules can be found as search forms, which may be a combination of atoms like a form label, input, and a button.
- At the next level of the bottom-up approach, molecules form organisms, which is primarily the web user interface with many elements working together to meet certain goals. Say, for example, search form with a logo and navigation menu to form a header is an example of the standalone organism.
- Further, web templates are the custom group of such organisms, which function together to form page-level components and functional objects, which articulates the structure of web design.
In the atomic design model, pages are instances where you can see how a page and user interface look like with images, texts, paragraphs, and various media in place. For web designers and developers, the atomic design may not be a totally strange thing to acquire. In fact, when administered properly it can save a lot of time and effort. Further maintenance and updating the websites also become easier in this model of development. Many of the most functional and top-line websites we see of leading brands and influencers are created in this model.
