The understanding of “atomic design ” is fragmented across the web and mobile industry. There are thousands of articles about “What is the atomic design?” available on the internet, therefore it becomes more confusing when you jump from one book or article to another. Everyone presenting different and irrelevant information, but our article is going to cover the maximum, relevant and easy to understand information about it. Below is a breakdown of what we are going to cover about atomic design.
2) Html periodic table
3) UI periodic table
4) Atomic design
6) UI Atoms
8) UI Molecules
10) UI Organisms
11) Atomic Design templates
12) Atomic design pages
13) Advantages of atomic design
Chemical reactions are represented by chemical equations, which often show how atomic elements( atoms, protons, electrons, and neutrons ) combine together to form molecules.
H2 + O2 -> H2O
So the above chemical equation showing hydrogen and oxygen atoms they combining together to form a water molecule. These molecules can combine further to form relatively complex organisms. Similarly in UX/UX design, some elements are combined to make interaction design, that I will discuss later in this article. But first, I have to give here some introduction to atomic elements. So Friends, Maybe you’re a bit angry at me for forcing you to revise memories of high school chemistry class. Because this is going to teach you a great methodology of UI designing. So I promise you will enjoy this article.
Html periodic table:
In previous lines discussed how all matter in the universe can be broken down into a finite set of atomic elements(protons, electrons, and neutrons).Similarly to chemical Periodic table “Mr. Josh Duck’s” defines a Periodic Table of HTML Elements.
UI periodic table:
Every front_End programming language has its own scripts of designs so there is one more periodic table called UI periodic table. It beautifully articulates how all of our websites, apps, interaction design, Product Design, and whatever’s going to craft/composed. So these elements can apply in the natural world to design and develop our user interfaces. “Engr, Muhammad Nawaz Rizvi” define and given the term ‘UI Periodic Table’.
So why are we introducing terms like atoms, molecules, and organisms? When we have terms like modules, components, elements, sections, and regions? Because the issues with terms like components and modules don’t have a sense of hierarchy but atoms, molecules, and organisms imply a hierarchy that anyone with a basic knowledge of chemistry can hopefully wrap their head around. I hope atomic design would work really well for you and your teams.
Atomic design is a methodology consists of five distinct stages working together to create user interface design systems in a respective hierarchical manner. The five stages of atomic design are:
Atomic design is atoms, molecules, organisms, templates, and pages methodology working together to create effective user interface design for web, mobile, and other interactive systems. Atomic design is not a linear process, but rather a mental model to help us in thinking user interfaces as both a cohesive and a collection of parts at the same time. So each of the five stages plays an important role in the hierarchy of our interface design systems.
Atoms are the basic building blocks of all matter. Each chemical element has distinct properties, and they can’t be broken down further without losing their meaning. (Yes, it’s true atoms are composed of even smaller bits like protons, electrons, and neutrons, but atoms are the smallest functional unit).Atoms combine together to form molecules, which further combine to form organisms.
Atoms of our interfaces are foundational building blocks that comprise all our user interfaces. These atoms include basic HTML/XML elements like form’s labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional. Therefore atoms include basic HTML or any other front-end language tags like inputs, labels, lines, and buttons, etc.
Because each atom in the natural world has its own unique properties. So a hydrogen atom contains one electron, while an oxygen atom contains two electrons. Similarly, each interface atom has its own unique properties, such as the dimensions of image/card it’s size, border, blur, shadow and font sizes of headings.
Chemical molecules are groups of two or more atoms held together by chemical bonds. These combinations of atoms take on their own unique properties and become more tangible and operational than atoms. In chemistry, molecules are groups of atoms bonded together for the new purpose and distinct new properties. For example, water molecules have their own unique properties and behave quite differently, even though they’re made up of the same atomic elements (hydrogen and oxygen).
In interfaces, molecules are relatively simple groups of UI atoms (elements) functioning together as a unit. For example, a form label, search input, and button can join together to create a ‘search bar’ molecule. A ‘search bar’ molecule is composed of a labeled atom, input field atom, and button atom. When we combined (bonded), these abstract atoms suddenly have a purpose. The label atom defines, what users have to search? So the input field atom defines enter some text and button atom define submits the form. The resulted ‘search bar’ molecule is a simple, portable, reusable component that can be dropped in anywhere, where search functionality is needed. Therefore, creating simple UI molecules makes testing easier, encourages reusability, and promotes consistency throughout the interface.
Chemical Organisms are assemblies(set) of molecules functioning together as a unit. These relatively complex structures can range from single organisms all the way up to incredibly sophisticated organisms like human beings.
Organisms are relatively groups of molecules of complex UI components. These organisms form distinct sections of an interface. Let’s revisit our ‘search bar’ molecule. Therefore a ‘search bar’ can often be found in the header of many web/mobile apps, so let’s put that ‘search bar’ molecule into the context of a header organism. This header organism is composed of a ‘search bar’ molecule, logo molecules, and primary navigation molecule. We see these types of organisms in almost every app that we use.
The header forms a standalone section of an interface, even though it contains several smaller pieces of interface with their own unique properties and functionality. Therefore UI Organisms can consist of similar or different molecule types. Now that we have organisms defined in our design system, we can break our chemistry analogy and apply all these components to something that resembles a web/App page.
Atomic Design templates:
Now, friends, it’s time to say goodbye to our chemistry analogy. The language of atoms, molecules, and organisms carry with it a helpful hierarchy for us. But ultimately we must step into language that is more appropriate for our final output and makes more sense to our clients, Trying to carry the chemistry analogy too far might confuse your stakeholders and cause them to think you’re a bit crazy.
Templates are page-level objects or frames that place components into a layout and articulate the design under the content structure. The template defines a page’s skeleton. With our previous example, we can take the header organism and apply it to a homepage template. This homepage template displays all the necessary page components(organism, sections) functioning together, which provides info about relatively abstract molecules and organisms.
Another important characteristic of templates is that they focus on the page’s underlying content structure rather than the page’s final content. So it’s very helpful to articulate important properties of components like image sizes and character lengths for headings and text passages.
Atomic design pages:
Pages are specific instances of templates that show what a UI looks like with real representative content in place. Building on our previous example, we can take the homepage template and pour representative text, images, and media into the template to show real content in action. The page stage replaces placeholder, wireframes or patterns content with real representative content to bring the design system to life.
In UI The page is that stage where you see all those components coming together to form a beautiful and functional user interface. Pages are essential for testing the effectiveness of our design system. In this stage we check does everything look great and function as it should? If the answer is no, then we repeat our process and modify our molecules, organisms, and templates to make better our design. So that’s atomic design consists of these five distinct stages concurrently work together to produce effective and informative user interface design systems.
Advantages of atomic design:
What’s atomic design good for? This is a valid question, so the atomic design provides us with a few key insights that help us in creating more effective, deliverable UI design systems. One of the biggest advantages of atomic design provides the ability to quickly shift between abstract and concrete. This atomic design allows designers to traverse between abstract and concrete.
The atomic design provides us a way to navigate between the parts and the whole of our UIs.Atomic design help in creating a well-crafted design system. This atomic design gives us a language for discussing the structure of our UI patterns and also the content that goes inside those patterns.
Atomic design is not a linear process. So don’t consider these five stages of atomic design as “Step 1: atoms; Step 2: molecules; Step 3: organisms; Step 4: templates; Step 5: pages.”Instead, think of the stages of atomic design as a mental model that allows us to concurrently create final UIs and their underlying and structural design systems.
Why I write this article?
Firstly, there is seemingly a clear need for more articles on UX, I found a few experts bothering to define UX. So I decided to write this article because I wanted there should be an article where the reader learns in the easiest and efficient way. Hopefully, this article will be helpful for beginners and experts, this article takes you one step ahead in the UX field. If you like it please comments on and share it with your friends. For UI/UX services to let us contact. You can check out our projects. Stay in touch with us Linkedin, Facebook, Pinterest, Dribbble.
*Open rights for students and teachers so they can use this article for their assignments and other documents. We appreciate it if you give a reference to our site in your documents