What is this thing “Atomic Design” I keep hearing about

Well, if you have been living under a rock then you might not know or head about this new way of “using a design system…?”. But worry no more, I will try my very best to give you a fast and dirty introduction so you have basic of what it is, terminology, why and after you can solve the big question… “Do I really need it?”.

What it is?

Atomic Design is a series of visual blocks that start with the very basic and go up to more complex visual building blocks, we got atoms, molecules, organisms, templates, and pages. You might head of this on the school where atoms create a molecule and a group of molecules forms an organism, this is just like that, the only thing is that we are not talking about biology.

Components

Atoms: Elemental parts of the page like colors, body text, form labels, and buttons.

Molecules: Groups of atoms that make a particular action, like a contact form.

Organisms: Groups of molecules organize by relevancy, hierarchy, and contrast, like course listings, and website footer. Molecules and Organisms might confuse you at first but just consider this, organisms are the bigger picture.

Templates & pages: This part is kinda self-explain with the name but they are the structure of multiple organisms, like home page templates and a contact page.

So, we just now covered the structure of the atomic design system and I’m pretty sure you might just be like, “right, now I know what an atom and a molecule are but what can I do with that? What’s the purpose of this?”, so here is how you can use this thing in your everyday design.

Imagine this, you are the Creative Director of this design agency based on LA, you need to create a couple of screens for the client and your design team is working on that, your freelance team too so you have at least 10 designers working on the same project, at different locations and time zones… Yes, you are doing the quality checking and all the work a Creative Director should be doing, how would you plan to do all the quality checking, and work and live with all this kind of work? This is where the atomic design comes into place.