Atomic Design chapter 2

by Brad Frost

​

One would say that UXUI is like chemistry. 

atoms = building blocks

molecules = unique properties

organisms = assembly

​

There is 5 stages into working with interface design system.

​

1. Atoms - HTML, form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

​

2. Molecules - molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.

​

3. Organisms - smaller, simpler components in action and serve as distinct patterns that can be used again and again. 

​

4. Templates - layout and articulation of the design’s underlying content structure.

​

5. Pages - how UI looks like in real perspective.

​

Simple is better for computer experience. Atomic design helps people shift from abstract to concrete design.

​

A well-crafted design system caters to the content that lives inside it, and well-crafted content is aware of how it’s presented in the context of a UI. Atomic design gives us a language for discussing the structure of our UI patterns and also the content that goes inside those patterns. 

​

​

​