Huy's Notes
Atomic Design

Atomic Design

#reading #thinking #design

Article: https://bradfrost.com/blog/post/atomic-web-design/

Terminologies

  1. HTML elements, font, colors, ... are considered as an atom
  2. We combine atoms into a molecules, just like how we combined many elements into a reusable group (think about searchbox element or an address input group — which has address, zipcode, city fields, ...)
  3. Groupping many reusable groups, you have an organism. Think of this as a complex but standalone and reusable components, like a Header component, or a Dropdown list, a Map, a Calendar component, ... — These are the building blocks of a web page.
  4. Next, a template, is a set of components putting together, come with placeholder content, providing context of all the building blocks. It's the final product of a design like an HTML wireframe.
  5. Lastly, a page, is a specific type of templates where all the placeholder being replaced with real content, has the highest level of fidelity and this is where most of the review rounds happen (think of a complete mockup in your Figma documents)

Why use Atomic Design?

It gives us an ability to travel back and forth from abstract and concrete, from the smallest thing possible in the system and zoom out to a whole complete system where all the elements bounds together.

We can easily tweak or change things and see how everything react as a whole.

Referred in


If you think this note resonated, be it positive or negative, please feel free to send me an email and we can talk.