2014-05: Atomic Design

This is a throw back from a few years ago, but read a news clipping this morning that reminded me of, so I wanted to get it out there.

When I was in my previous role, I used to use the concept of “products and by-products” for the work that we did.  The product is the deliverable, the by-product (even though it has a bad connotation), is the wast that wasn’t part of the final project deliverable,  but that can be reused for future projects.

Over the course of the 5 years that I was at that company, that thinking evolved a bit, or became a bit more nuanced, and became “Atoms, Molecules, Matter”.  Let me walk you through this a bit more.

Atoms: Atoms are the most fundamental unit of a project.  It’s a specific data element (e.g.: Age of population), or a specific functional component (e.g.: Text Input Form), that can be used over and over in different ways.  Atoms on their own don’t serve much purpose beyond being the building block for something else.

Molecules: Molecules are combinations of atoms that can be used.  They have more functionality than atoms and can be used to build up matter.  For example, you could use a a text input form combined with with a “search” button, and a piece of text that says “enter your search query here”, can now be seen as a search input molecule.  All the logic can be retained in that molecule.  But the molecule is only part of the answer, because you can only do a little with.

Matter: Different molecules can be brought together to form something that has a lot of functionality, and that is actually useful… that’s matter.  In the “search” example above, the front end search molecule (the form), and the back end that presents results (which also includes the algorithms to send out search requests) can now be seen as a search matter.  This “search” matter can now be used to search for information, and can be easily re-used without having to go back to the building block.

There’s got to be a fourth level, but I have not found its name yet…  Something that brings all the matter together.