Atoms

Atoms

Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.

Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.

Like atoms in nature they’re fairly abstract and often not terribly useful on their own. However, they’re good as a reference in the context of a pattern library as you can see all your global styles laid out at a glance.

66 STASHED

3 LIKES

Atomic Design | Brad Frost

bradfrost.com

MORE IDEAS FROM THE ARTICLE

What is Atomic Design

Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:

  1. Atoms
  2. Molecules
  3. Organisms
  4. Templates
  5. Pages

75 STASHED

8 LIKES

Organisms

Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

We’re starting to get increasingly concrete.

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 list of social media channels. But a “product grid” organism might consist of the same molecule.

66 STASHED

Pages

Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see.

Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around.

66 STASHED

1 LIKE

Templates

At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.

Templates are very concrete and provide context to all these relatively abstract molecules and organisms. Templates are also where clients start seeing the final design in place.

66 STASHED

Molecules

Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.

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

Building up to molecules from atoms encourages a “do one thing and do it well” mentality.

66 STASHED

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEAS

Nowadays, people worry about a “desert scenario,” where no new particles will be found for many decades to come, if ever.

This point of view is wrong.

The first two decades of this century have been pretty successful for physics:

  1. the discovery of the Higgs particle
  2. the detection of gravitational waves
  3. the first image of a black hole

95 Percent of the universe is missing. 

The aim of physics is to understand in a precise, mathematical way all manifestation of matter and energy in the universe.

12 STASHED

4 LIKES

Contemplating the End of Physics

quantamagazine.org

Body Rejuvenation

The body replaces itself with a new set of cells every seven to ten years. This has been discovered by Swedish molecular biologist, Dr. Jonas Frisen.

When it comes to aging, our DNAs remain the same from the day of a cell's birth throughout its lifespan, however, most new atoms are taken in through the air we breathe, the food we consume, and the liquids we intake.

19 STASHED

3 LIKES

Does your body really replace itself every seven years?

science.howstuffworks.com