Categories
Random

What is Atomic Design Pattern?

Atomic Design is the one of methodology that can accelerate the process of creating modular designs.

Atoms

Basic building blocks in HTML tags, such as a form label, an input or a button.

Molecules

Grouping atoms together, such as combining a button, input and form label to build functionality.

For example, a form label, input or button aren’t too useful by themselves, but combining them together as a form and now they can actually do something together.

Organisms

Combining molecules together to form organisms that make up a distinct section of an interface (i.e. navigation bar)

Organisms can consist of similar and/or different molecule types. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and a list of social media channels. But a “product grid” organism might consist of the same molecule (possibly containing a product image, product title and price) repeated over and over again.

Templates

Consisting mostly of groups of organisms to form a page — where clients can see a final design in place.

Pages

Pages are specific instances of templates.  An ecosystem that views different template renders. We can create multiple ecosystems into a single environment — the application.

Leave a Reply