Atomic Design Methodology

Brad Frost

Uxcel. Atomic Design by Brad Frost

Atomic design is like building blocks for creating websites or apps. There are five stages: atoms, molecules, organisms, templates, and pages. Changing something in an earlier stage affects everything that comes after it.

The main goal of this methodology is to guide the creation of a consistent and well-organized design.

Atoms

Atoms are basic elements like form labels, inputs, buttons, and other basic properties like colors, fonts, and border-radius that can’t be broken any further. At an individual level, atoms are abstract concepts with no real meaning.

Molecules

Molecules are made up of atoms bonded together. They are simple UI components like buttons, checkboxes, inputs, and similar elements functioning together as a unit.

Organisms

Organisms refer to complex UI components made up of groups of molecules and/or atoms and possibly other organisms. These are relatively complex sections of a user interface that form distinct parts of a system.

Templates

Templates show how the design will come together but don’t have real content yet. They are like a skeleton and a crucial step in the design process.

Pages

Pages are built on templates, with real content added. They’re not yet functional products, but they show the finished look, feel, and content of the design.

In practice, you can create a set of consistent UI elements, like buttons and labels, and mix them in different ways to make more complex layouts and templates. This way, you’re not just making individual pages; you’re building a well-organized and expandable system.

References

1. Uxcel | Lesson “Atomic Design by Brad Frost”
2. Atomic Design Brad | Frost