Atomic Design Methodology

For website and web app design & development, as always, my goal for UI is about to keep it consistent, reusable, easy to maintain and well dealing with new requirements during the long term development.

Coincidentally, one day I read about the idea of Atomic Design. I found it is a great way of UI thinking for every project. let me elaborate this idea bit more. 

Atomic Design, from my research, is a methodology comes with 5 concepts to help making our UI developing more systematic.

1. Atoms

Atoms serve our interface as foundational block.

For example: the basic HTML element that cannot break down, like 'input', 'button'.

For example: svg icons, logo, special image. 

2. Molecules

Molecules are relatively simple groups of UI functioning together as a unit.

For example: 'search form' consist with two atoms ('input','button')

3. Organisms

Compare with Molecules, Organisms are more complex UI components composed of groups of molecules, atoms or even organisms.

For example: Web site Header (contains navigation = 'organisms', sign in form = 'Molecules', logo = 'atoms')

For example: Category block (contains many individual divs)

For example: 3 columns defined rows (contains 3 divs in a row)

4. Templates

Templates are page-level objects that place component into a layout.

For example: how many rows, up-down, or left-right layout for a page

5. Pages

Pages are specific instances of templates that show what a UI looks like with real representative content in place.

Over all, the purpose to classify the elements and components is to help with entire UI consistency, element reusing, representing. We don't have to follow the exact 5 stages for building websites, but assembling reusable widgets like icons, layouts, forms, or any common staffs is recommended.