{"id":2087,"date":"2017-06-01T09:47:26","date_gmt":"2017-06-01T04:17:26","guid":{"rendered":"https:\/\/www.adroitte.com\/blog\/?p=2087"},"modified":"2023-08-31T15:22:56","modified_gmt":"2023-08-31T09:52:56","slug":"reasons-for-web-developers-to-embrace-the-atomic-design-principles","status":"publish","type":"post","link":"https:\/\/www.adroitte.com\/blog\/web-development\/reasons-for-web-developers-to-embrace-the-atomic-design-principles\/","title":{"rendered":"4 Good Reasons for Web Developers to Embrace the Atomic Design Principles"},"content":{"rendered":"<p>The dynamic communities around the world should step outside their comfort line. One should not proceed with a notion that by meeting every segment of complex developmental stages they can outrun their competitors in terms of usability and features.<!--more--><\/p>\n<p>The equation to stay in the modern <a href=\"https:\/\/www.adroitte.com\/website-development-services\/\">web development<\/a> era is to go beyond the conventional thinking\/approach. I agree that the word \u2018<em>Atomic<\/em>\u2019 is possibly overwhelming you, but I assure you that we have something big in our hands, which will surely revolutionize the approach towards web development.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Web_Development_Introducing_the_Atomic_Design\"><\/span>Web Development: Introducing the Atomic Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>What is an atomic design? Yes, now it is the time that we should know something about the same. <strong>User-interface<\/strong> is given the utmost importance in <a href=\"https:\/\/www.adroitte.com\/website-design-services\/\">website designing<\/a>, and yes it is a well-known fact. In this post, we will learn about how atomic designs are influencing such forms.<\/p>\n<p>First, let me start with the basics, and let\u2019s do this by learning the definition of an atom. Atoms are the basic building blocks of matter, and the combination of atoms constitutes a molecule.<\/p>\n<p>Applying the same concept to the <strong>web interface<\/strong>, \u2018<em>atomic design is a technique of creating interface design systems<\/em>.\u2019 To understand this better let us deconstruct the concept and study in detail.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"The_Stages_of_Atomic_Design\"><\/span>The Stages of Atomic Design<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Basically, the architecture of an atomic design is divided into the building blocks (atom, molecule, organisms) and containers (templates and pages).<\/p>\n<ul>\n<li><em><strong>Atom<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>Form labels, buttons, inputs, and others that form basic HTML elements constitute the word <strong>atom<\/strong> or the better term is <strong>the interface atom<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><em><strong>Molecule<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>In general, a molecule is a group of atoms, similarly under atomic design; a molecule is a group of <strong>UI elements<\/strong> that functions as a single cluster to reach a particular purpose.<\/li>\n<li>A computer programming principle \u2018<em>the single responsibility principle<\/em>\u2019 is being followed here.<\/li>\n<li>Sometimes an individual atom on a web page doesn\u2019t hold much value, but the combination of one or two atoms gives a larger sense.<\/li>\n<li>A form label alone is not useful, but when combined with a button it gives a better presentation for the <strong>user-interface<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><em><strong>Organisms<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>Organisms are the group of molecules set together to form a complex interface section. Wait! I will give you a better explanation with improved words.<\/li>\n<li>\u2018Complex <strong>UI elements<\/strong> (organisms) are constituted by a group of molecules\/atoms\u2019.<\/li>\n<li>The header of a web page is the good representation of an organism. It contains everything, from a simple logo to complex <strong>navigation list<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<li><em><strong>Templates<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>Now, having dealt with the basic building block, it is the time we move to the much-complicated aspects; \u2018the <strong>container<\/strong>\u2019.<\/li>\n<li>If you are familiar with the <a href=\"https:\/\/www.adroitte.com\/website-design-services\/\">web design<\/a>\/<a href=\"https:\/\/www.adroitte.com\/website-development-services\/\">web development<\/a> concept then I can compare these templates to <strong>HTML wireframes<\/strong>. The wireframes are nothing but the skeleton or blueprint of a website. Till now, we defined about the elements of a web page, but from this section, we will completely focus on the entire underlying structure.<\/li>\n<\/ul>\n<\/li>\n<li><em><strong>Pages<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>With actual content, the pages depict the end product indefinitely. The action of defining an <strong>interface design system<\/strong> in the <a href=\"https:\/\/www.adroitte.com\/website-development-services\/\">web development<\/a> process takes an ultimate turn. Web developers can witness the real content in action with actual texts, images, or images in place of dummy content.<\/li>\n<li>Pages allow web developers to understand the relation between the underlying design system and external <strong>user-interface<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Advantages_What_you_will_gain\"><\/span>Advantages: What you will gain?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In this section I\u2019ll list only a few; the key benefits involved in adopting atomic design are:<\/p>\n<ul>\n<li><em><strong>Code Consistency<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>I know that it is a much-needed breather for every web developer out there. For any application to have the glitch-free performance the code consistency is essential.<\/li>\n<\/ul>\n<\/li>\n<li><em><strong>Components Reusability<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>The pain of breaking down every component into its lowest form, which is the atom, well you will definitely gain something from it.<\/li>\n<li>The elements on breaking down can be well analyzed and remixed accordingly.<\/li>\n<\/ul>\n<\/li>\n<li><em><strong>Easy Customization &amp; Development<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>By decoupling the existing components, one can easily manipulate the atoms to create new designs without having to start a fresh.<\/li>\n<\/ul>\n<\/li>\n<li><em><strong>Rapid Prototyping<\/strong><\/em>\n<ul class=\"no-bullets\">\n<li>A quick start in the production process, only once the final design is decided. And above all, with rapid prototyping, one can easily refine the final product accordingly.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The dynamic communities around the world should step outside their comfort line. One should not proceed with a notion that&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[153],"tags":[150],"class_list":["post-2087","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/posts\/2087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/comments?post=2087"}],"version-history":[{"count":8,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/posts\/2087\/revisions"}],"predecessor-version":[{"id":6922,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/posts\/2087\/revisions\/6922"}],"wp:attachment":[{"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/media?parent=2087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/categories?post=2087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.adroitte.com\/blog\/wp-json\/wp\/v2\/tags?post=2087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}