Even design has its own ‘atoms’
“We’re not designing pages; we’re designing system of components,” says Stephen Hay
Prologue
Before we continue, I just wanna make it clear that I’m just throwing stuff here to help me memorize for what I’ve learned from all sorts of resources I looked into back in 2023 (and who knows, maybe I’ll drop by later once my brain needs a refresher).
Why am I talking about Atomic Design?
You might wonder: Why, all of a sudden, did I begin to talk about Atomic Design? After all, I don’t work in design, and I’m not studying computer science or something of the sort. It might seem kind of random, huh?
So, after college, I was hanging out with this friend of mine who had made the transition to a tech job. Just so you know, we both studied urban studies. He suggested that I look into some tech courses, stuff like product management, design, software engineering, and all that. I was then curious, especially by what it has to offer for a design-in-tech job. It all started with taking this free online course on UX design, and that’s when I first discovered Atomic Design.
So, what exactly is Atomic Design?
Atomic Design is a bit like arranging building blocks for creating a user interface. It is a methodical approach that helps designers build systems with clear order and structure.
Brad Frost, the brains behind this concept, came up with this idea to make it easier to create and maintain pattern libraries. Basically, you start with simple components and piece them together to form more complex ones.
Get Riz’s stories in your inbox
Join Medium for free to get updates from this writer.
Atomic Design has five stages, each playing a crucial role in the hierarchy of any design system:
- Atoms
- Molecules
- Organisms
- Templates
- Pages
To help illustrate these concepts, Let me use Duolingo as an example.
Atoms
Just like what chemistry teaches us, atoms are the smallest units. They are the foundation of our interface, including basic elements like buttons, icons, and text styles.
Molecules
In this molecule stage, we start combining atoms to create slightly more complex elements. Think of it as arranging basic building blocks to form new groupings, such as labels and text fields or search bars and buttons.
Organisms
When you bring molecules together, you get even bigger components. This stage serves as separate areas of an interface, such like navigation menus or footers.
Templates
Templates are where we start putting all those pieces together. Here, we begin to arrange organisms together to form pages. Think of templates as blueprints for webpage layouts.
Pages
Pages are the final stage of atomic design. This is where we add all the final details, turning wireframes into fully functional designs.
What benefits does this Atomic Design bring?
- Applying Atomic Design will allow you to the consistency across your website or product.
- Atomic Design makes it easy to adjust or remove sections of a webpage.
- Atomic Design helps with fewer components in design system.
- Atomic Design make things easier for coders since it simplifies coding.
