Web designers use a plethora of philosophies, approaches, and techniques to develop and create engaging and compelling digital interfaces. Each and every designer have their very own preferences, many may like to build their product down to the last detail, working from the top to bottom, starting with the most basic elements.  This approach is extremely common, and typically results in a well-thought-out and high-quality digital product.

There are however some designers who like to go for a bottom-up approach. These designers begin with the smallest elements and gradually move their way up to the large-picture design, going from simple to complex. This process is also referred to as atomic web design.

The term ‘Atomic Design’ wad coined by Brad Frost, and it basically is a designing methodology that is inspired by chemistry.  All matter is made out of atoms, which combine to form molecules in order to make complex organisms. Similarly, Atomic Design involves breaking down a website layout into its key basic components, subsequently working up from there in order to ultimately build a website.

The Atomic Design Systems methodology takes into account all the important details that go into creating and maintaining a robust design system, while providing quite a coherent method of explaining itself with the usage of chemistry.  Here are some of the important aspects of this web design methodology:

• Atoms: In the domain of chemistry, atoms are considered to be the basic building block of all matter. Distinct properties can be found in each chemical element, and they essentially cannot be broken down without running the risk of losing their meaning. One can relate this to the design systems, where the atoms refer to the basic assets of a product. They are the core foundational building blocks that involve all the user digital interfaces, such as spacing, colors, labels and type.
• Molecules: The molecules basically are a group of atoms that are pieced together in order to take on new properties or to complete a particular function. In the system of designing, one can consider molecules as the “atoms” or building blocks that they are piecing together in order to form a functional element. They might put together an image header along with a title label for a profile molecule, or opt to engage in something complex like constructing a checkout function by the usage of atoms in order to form the molecule.
• Organisms: Molecules and atoms both are simple functional forms in the design system that can easily be reused across a product. Organisms are a bit more complex and ideally form a superior chunk of a product. Hence, people can think of these organisms in the system of designing as groups of molecules. While atoms make up a molecule in order to form a search feature, it can subsequently be combined with another molecule that forms the page navigation so as to make an organism, which is whole page navigation along with a search feature. These can be used in a particular pattern across a product.
• Templates and touch-points: After going through the basic structure of a design system through organisms, molecules, and atoms, the web designers would now have to make use of these elements to create a consistent product. The organisms can be used for the purpose of making up distinguished templates of larger layouts that contain a variety of features. Such templates are ultimately used for the purpose of making up the majority of product touch points.

Atomic web design is considered to be one of the most efficient and popular design system practice, especially in the contemporary sphere of rapid growth and increasing need for holistic products. The Atomic design system allows teams to build superior quality of products in a swift fashion, which can be orderly understood by the users as their language would be consistent across all touch points.

Categories