Atomic Design for web component.

Atomic Design for web component.

We’re not designing pages, we’re designing systems of components. — Stephen Hay

So many techies asking me the same question. Why in angular and react having a component based design approach?

Web technology is continuously evolving and there are many new different technologies are introduced and it is really buzzzz about angular2/4/5 and React components.

Out of above I really love word Component. Because we are not designing web pages. We are designing systems by building components.

A lot of buzz around new web technologies, but everyone focuses on establishing foundations for color, typography, grids, texture and the like. I think this is more about how your UI should look like, it’s not about the How we can manage and compose the web pages?

UI showcase this type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. I am more interested in how we can construct the design in a more scientific way. Is there any methodology for this? Yes!!!

Atomic design term coined by Brad Frost.

Atomic design pattern has inferencing from chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.

Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.

  • 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.)
  • 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.
  • Organisms are assemblies of molecules functioning together as a unit. These relatively complex structures can range from single-celled organisms all the way up to incredibly sophisticated organisms like human beings.

By now you may be wondering why we’re talking about atomic theory, and maybe you’re even a bit angry at me for forcing you to relive memories of high school chemistry class. But this is going somewhere, I promise.

This is simply how all matter in the universe can be broken down into a finite set of atomic elements. As it happens, our interfaces can be broken down into a similar finite set of elements. Josh Duck’s Periodic Table of HTML Elements beautifully articulates how all of our websites, apps, intranets, hoobadyboops, and whatever are all composed of the same HTML elements.

Enter into Atomic Design Methodology

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

Five stages of Atomic design are

  1. Atom
  2. Molecule
  3. Organisms
  4. Templates
  5. Pages

Let us discuss each stage in details.

  1. Atoms:- Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button. Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations. Like atoms in nature they’re fairly abstract, means in the natural world atom has its own unique properties.
  2. Molecules:- In chemistry molecules are the group of abstract atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems. For example, a form label, input or button aren’t too useful by themselves but combine them together as a form and now they can actually do something together. Developing simple components help UI designer and developer adhere to follow unit testing, single responsibility and develop reusable component very easily.
  3. Organisms:- Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface. Organisms can consist of similar or different molecule types. While some organisms might consist of different types of molecules, other organisms might consist of the same molecule repeated over and over again.
  4. Templates:- Now say goodbye!! to chemistry. Trying to carry the chemistry analogy too far might confuse and its bit crazy. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like the layout in action. Templates are very concrete and provide context to all these relatively abstract molecules and organisms. Templates are also where clients start seeing the final design in place i.e the somehow we can say it is the wireframe. Templates are page level object that articulates the design’s underlying content structure.

You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is.

Mark Boulton

5. Pages:- Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see. This is the actual page with actual content. Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around. It is at the page stage that we’re able to take a look at how all those patterns hold up when real content is applied to the design system. Does everything look great and function as it should? If the answer is no, then we can loop back and modify our molecules, organisms, and templates to better address our content’s needs.

Let us sum up atomic design in a nutshell.

TL;DR

  • Atoms are UI elements that can’t be broken down any further and serve as the elemental building blocks of an interface.
  • Molecules are collections of atoms that form relatively simple UI components.
  • Organisms are relatively complex components that form discrete sections of an interface.
  • Templates place components within a layout and demonstrate the design’s underlying content structure.
  • Pages apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.

This is my understanding of this topic. For more details.

Reference link.

In order to apply this methodology in real life projects, created one tool called Pattern lab, feel free to check it out on Github.

The advantage of this methodology:-

  1. You can mix and match components.
  2. creating a style guide is simple.
  3. Easy to understand and maintain layouts.
  4. The code is more consistent.
  5. No focus on pixel perfect (scale perfect ) design.
  6. More modular project structure.
  7. Quicker prototyping.
  8. Easy to add, update and remove new components.
  9. Single responsibility principle and don’t repeat yourself these things easily achieved.

If you enjoyed this article, please don’t forget to Clap.

For more stories.

Lets connect on Stackoverflow , LinkedIn , Facebook& Twitter.