A couple of years ago I was perusing the web when I came across a thought-provoking article written by the one and only Brad Frost. It is a concept that has spread like wildfire in the development industry and rightfully so.
In a day where the majority of websites are built using a CMS (Content Management System), our websites are becoming more and more modular. Since the web is changing, the way we write code should adapt so that we deliver the best code that we can. We must understand that “we are not designing pages. We’re designing systems of components” (Stephen Hay).
Enter Atomic Design
The ideas and philosophies behind Atomic Design have been created with these ideas in mind. At the backbone, “Atomic Design is (a) methodology for creating design systems” (Brad Frost). This methodology is comprised of 5 parts:
As we look at these 5 parts, especially the first 3, we see that Atomic Design’s methodology relates highly to chemistry. What it is doing here is it is relating the building blocks of the web to the building blocks of all living things. That’s a short intro into what Atomic Design is, and I don’t want to go any further in the explanation of it then that.
The reason that I don’t want to get into more details is because my goal here is not to explain to you every detail of what Atomic Design is, but instead to let you know of a time it fell short. To fully explain where it fell short, let me tell you my own story with Atomic Design.
After I had read Frost’s amazing article my juices were pumping and I couldn’t have been more exited to take it back to my team of developers. The team of developers that I worked with at that time comprised of a very diverse set of people from all different countries. Therefore I was interested to see how they would react when I presented it to them.
The next day came and I logged on to work all excited thinking “these guys are going to love this as much as I do!” The only problem was that when I presented it to them for their feedback, they weren’t 100% sold, and for a viable reason. The terminology was to hard for some to grasp.
See they totally bought into the core concepts of Atomic Design but when it came down to what each of those components were called, it didn’t make sense to them. The reason it didn’t make sense to them was because they had not learned with chemistry. Thus for them, it was too hard to relate these different terms to the overall big picture.
What I so respect about that particular team is that even though they couldn’t pick up on all the terminology, they didn’t throw the concept out the door. Instead we rallied together to transform it to work for us. The way we made it work for us is by changing the 5 parts that make it up while still maintaining the overall concept. Our goal was to come up with terms that made sense to us and anyone we would on board in the future.
So we began spit balling ideas when we all of a sudden we landed on a set of terms that I in particular think are genius:
As you can see what we decided was to draw analogies from the process of building a structure. What we found was that just by tweaking these terms slightly, everyone was able to understand the full concepts behind what we were trying to implement.
Let’s Get Real
At the end of the day I’m not going to say that these same terms will work for everyone or that Atomic Design is flawed. This is just what worked for us.
I think what I learned the most, and what I hope you learn from this, is that we shouldn’t throw away great ideas just because some people on our team don’t understand them. Instead if our team is struggling, we should morph the ideas until they catch the big picture, thus allowing us to make better websites.
Create. Stop. Be Creative.
When I initially launched this post the title was “Where Atomic Design Fell Short”. I will be the first to let anyone know that I am not perfect and that I make mistakes. I am continually learning from advice from those around me. On Designer News Justin Barber commented that he thought my title was misleading and, after reading his reasons, I totally agree with him. Therefore I changed my title to be more accurate.
Again I want to thank Brad Frost for spurring on these ideas!