From the beginning, humanity has always tried to find a simple and efficient way to solve problems.
Computer science is no different.
In computer science, divide and conquer algorithms work by recursively breaking down a problem into subproblems. These are broken down further until these problems are simple enough to be solved directly. These solutions are then combined to give a solution to the original, much larger problem.
Today, these decomposition techniques are implemented everywhere. They are named according to technological trends and used across thousands of projects. Some examples include, object orientation, Atomic Design, microservices and frameworks based on components.
In this article, we want to discuss a concept that gives you the tools to make structural and interlinked builds. This methodology helps web developers and designers overcome familiar computational design limitations: Atomic Design.
- Atomic Web Design -
Atomic Design follows a basic concept - it breaks entire interfaces down into small, basic components. The popularity of using components arises from the need to build design systems more methodically. By breaking down everything into small elements, Atomic Design ultimately helps people create more robust systems.
Atomic Design is influenced by chemistry and has 5 levels of abstraction:
- Atoms: They are the smallest foundational building blocks of our design. Every basic HTML tag is an atom. Think inputs, buttons, form labels and so on.
- Molecules: A group of atoms. They are the smallest fundamental units of a compound structure, as they are the first components with their own properties. For example, the atoms form label, a button, and an input combine to create a form on a website. This form is a compound.
- Organisms: Formed as a group of molecules, organisms are a usable interface block. For example, a header with navigation, logo and a search form is all one organism.
- Templates: A group of organisms working together to create page-level objects that articulate a design’s structure. For example, the above organism sample merged with others formed by banners, multiple blocks of text and images. They basically represent the skeleton of a page.
- Pages: These are templates with specific content, and is what the end user ends up seeing on their screen. Pages exist at the top level, and is where we test the success of the design syste
Each of these parts have an important role in the end product, and each are crucial in order to create the end product.
The Benefits of Atomic Design:
Atomic Design allows us to traverse from the abstract to the concrete. By providing a clear methodology, it also helps create a positive user experience (UX), as all components have been considered in the creation of the design.
Here are 5 key reasons to use Atomic Design as part of your web design process.
Easy Management - Having a manageable unit of software functionality enables design and runtime tools to help developers divide and conquer their increasingly unwieldy device software.
Product Adaptability - The ability to easily replace a component when product requirements change allows for product flexibility.
Product Reliability - Matured components that meet well-defined specifications get re-used, increasing product reliability.
Time-to-Market - Re-use of components in new products accelerates product development and lowers cost.
Collaboration - A common format for software implementations helps multiple companies collaborate more easily.
Conclusion
Personally, I would recommend designers and developers use decomposition methods to facilitate construction standards and improve the solutions-based structure of complex builds.
Atomic Design provides a model to build components that are well-defined and flexible. It allows for components to be easily reused and evolved for maximised efficiency and reduced cost.
For more information on Atomic Design, click here for the author of the work on Atomic Design, and who originally coined the term.
