Modular design always seems like a great idea. Sometimes it works. Sometimes, as was the case with modular cell phones, it’s a disaster.
But what about modular web design? What if you could build a website from a few basic building blocks and keep reusing those major “modules” over again?
What could you do better or more efficiently if this were the case?
Fortunately, a new trend in web design is on the rise. And it looks a lot like modular web design.
Let’s dig in and see what it’s all about.
1. What Exactly Is Atomic Design?
Basically, atomic design is all in your head. It’s a made up hierarchy of reusable components. But, it’s a useful construct.
There are five stages of this logical interface design system: atoms, molecules, organisms, templates, and pages.
Atoms are the building blocks of your website. They’re the smallest HTML elements.
Buttons, labels, input fields and other small HTML elements are all apart of the atoms category. You can’t include larger HTML elements, even if they seem small.
And, HTML comes with a cousin. CSS style rules like fonts, colors, and dimensions are also within the atoms classification.
The idea behind atomic design is bottom-up design. You start with the atoms and work your way up.
Molecules are made up of…you guessed it! Atoms!
Molecules are the reason atoms exist in atomic design. They give each atom an overall design or purpose.
There is a logic to each molecule. They must work well together. Otherwise, the design is utterly unusable.
Take a title and the author’s byline from a blog as an example. The one without the other won’t do.
The author’s byline isn’t useful except with blog titles. You can’t use it on a sales page or a contact page.
These two atoms must be used as a molecule. You will format each the same throughout the whole blog, so why not keep those HTML codes together in all instances?
Kingdom, phylum, class, order, family, genus, species… I memorized this in high school Advanced Biology and it’s never left my mind. But atomic web design organisms are different than us carbon-based ones.
These organisms are made from web design “molecules.”
Organisms are essentially much larger sections of code. If we take an example molecule from earlier — a title and a byline — and then combine it with another molecule — the top image placeholder and the meta-tag placeholder — you have a reusable organism.
Now, organisms look like molecules and molecules look like organisms. And really, the two definitions are fuzzy.
But the point is they’re reusable pieces you can match with other reusable pieces. Organisms are just less flexible than molecules.
“One of these things is not like the others…” But wait, weren’t we talking about chemistry and biology?
It seems that the creator thought the science metaphor had gone too far. I mean, ecosystem or biome would have worked…but whatever.
Templates are the page level structure without the final content. You’ve selected all of your organisms and placed them in order.
You now have a blog page template where you simply plug in the content. And, it gives the designer a peek at how the molecules and organisms fit together.
They can re-arrange before getting to the final stage.
This is the final test. It’s where the user interface gets fine-tuned.
The step between templates and pages is nothing like the step between organisms and templates.
The template is a culmination of every part that came before. But, a page is the marriage of content with the template.
The great thing about atomic design pages? They’re not permanent. You can go back and change an atom out or a molecule or a whole organism if it doesn’t fit.
This is the ultimate in modular web design.
2. But Why Should I Use It?
I’m no web designer. But from the little I know about HTML, it seems that a modular, reusable system would make all steps to building a website from scratch faster.
And what I’ve researched tells me this is true.
Consistency in Code
Here’s the thing about computer languages: They’re never concrete. One coder does it one way, another thinks that’s disorganized idiocy and does it another way.
There is no consistency from one person to another. And, it’s hard to read and implement.
With atomic design, a whole team of developers can work with the same coding patterns. It’s like creating a team gold standard.
When your whole team starts out by creating common parts to work from and compiling those, every step onward is easier.
If you need a specific atom, you just consult the list.
Say you need a “submit” button. You don’t have to go through all of the pages created previously to find it. Just consult the list of atoms.
An Inherent Style Guide
The work of creating a style guide disappears. As a team, you’ll essentially build a style guide as you build the list of atoms and molecules.
You won’t be forcing style decisions at the last minute. It will all be there before you’ve built anything.
See It All Before It’s Done
Diagrams will still be useful with atomic web design. In fact, they are essential in organizing your molecules and atoms.
Companies like Slickplan can help atomic web designers see all their modules and how they fit together. Once you diagram with your atoms and molecules, you can replace or delete any element.
In more “by the seat of your pants” web design, the number of components goes up exponentially. But, if you create all of the components before building the website, you end up limiting the number.
This streamlines the process and creates a searchable database you can use over and over again.
Simplify Your Life
Organization and simplification are what increase productivity in web design. If you can adopt a design philosophy like atomic web design, you’ll increase the number of websites you can produce and reduce production time.
If you’re interested in more web design, check out our other articles.