The Atomic Design Approach Regarding Designing Websites.
The Atomic Design and its methodology were coined and developed by Web designer/writer/Chemistry student Brad Frost. It serves as a way of breaking down the complex UI of a website into 5 distinct levels as follows: Atoms, Molecules, Organisms, Templates and Pages. This approach allows designers to create scalable models used for UI designs and allows for flexibility and responsiveness.
Let us look at these 5 distinct levels and how they serve as excellent building blocks for UI design.
The Atoms are the smallest independent part that makes up the UI. They are as fundamental as they can get. These include Colors, Fonts, Text, icons, Check Boxes, Shadows, single Images etc.
The Molecules are groups of atoms fused together to form UI elements that function together as a unit. Examples include Button groups, Navigational Menu, Cards, Figured Images, Search Input etc.
Organisms are more complex UI components made up of groups of molecules and/or atoms. They are independent and can function on their own accord. These include Forms, Tables, text groups with CTAs and more.
Templates are as the name implies, a skeletal display that forms the underlying structure of the UI. In other words, they are made up of organisms to create a proper website layout.
Pages are finalized specific instances of templates that showcase the true look of the UI with their representative content in place.
As seen, by breaking the website design into these distinct layers, the method helps streamline the UI development process and gives it consistency all through. This consistency language can be referred to as an interface inventory where one can go to retrieve all the different pieces to create the final product. In other words, it showcases the current state and different phases of the product as it evolves. This is augmented by the concept of a design system which is a set of deliverables which constantly evolves with the product, the tools and the ever-changing technology. The overall function of this design system is to create a smooth and easy interaction between the work from the design team to the development team and vice versa.
Using the atomic design approach has a lot of advantages that include the following:
- it allows designers to have a component-based system to use. This is how we can see all the atoms we created and how we can mix and match them to create molecules/organisms.
- Gives designers a complete style guide from ab initio. This allows for consistency throughout the design process using the same atoms and molecules in different instances.
- allows for faster prototyping and updating as one can easily pick and choose elements combinations to suit the required needs of the design.
Overall, it allows for an easier-to-read layout than the traditionally created websites and again affords designers consistency all through the process which allows for an improved UI experience. The cons are few and far in between in that, it can be time-consuming since we will be creating a whole lot of components in different instances and if one is not careful, it might lead to confusion especially if these components are not properly arranged. Others might even say switching to the atomic design model from the old way of website creation might be daunting for some as each component have to be documented, classified and made globally for the rest of the team to work with, hence the learning curve is a bit high.
In my opinion, the advantages do outweigh the cons and I just have to conclude that the atomic design model is the way to go despite these little drawbacks.
