Atomic Design: How to Design a Modular Website

Often, technical terms in web design aren't more than empty words. The term "Atomic Design" is one of them. All it does is allow its inventor to spread his philosophy with a memorable name. Nonetheless, it is worth looking into the content.

Atomic Design: This is What's Behind the Word

The term "Atomic Design" has been haunting the web for nearly half a decade. Invented by Brad Frost and supported by an entire e-book, it is still waiting for its triumph. Or is it? This depends on how you look at the phenomenon. If you haven't heard of "Atomic Design" yet, you've come to the right place. I'll briefly explain the theoretical approach, so we're all on the same page. If you end up developing a more profound interest in the concept, use the links to Brad's websites, and his e-book, above. [caption id="attachment_104642" align="aligncenter" width="595"] The five components of atomic design. (Illustration: Brad Frost)[/caption] "Atomic Design" is meant in a literal way. It starts at the atom as the smallest component of a design. An atom, for example, is an HTML tag, a font, or another unit of the design system that can not be reduced any further. A molecule is a conglomerate of multiple atoms that solve a task together. This could be an HTML form, for instance. The next unit is called organism. Here, multiple molecules assume a specific role. An organism would be a complete header, footer, or the area with recent news. I think you can imagine what I mean. This where Frost leaves the chemistry analogy. The organism is followed by the template, a pre-stage of the actual page. The latter is the page available to the user, with all active contents, while the templates are where these contents are meant to be placed in. And that's pretty much it.

Atomic Design: The Only Thing That's New is the Term

Huh, some web designers will realize that they've never done this in a different way. However, they would've never thought about using these terms to describe it. If you're in the same boat, I welcome you. This is my understanding of the situation as well. Of course, it sounds excellent and pseudo-scientific if we talk about atoms, molecules, and whatnot. This doesn't provide any value, though. It only makes sense to build pages on a foundation of templates that we've filled with different functions and layout blocks. It doesn't matter if I call it atoms, molecules, or something entirely different. [caption id="attachment_104646" align="aligncenter" width="595"] The periodic table of HTML elements. (Illustration: Josh Duck)[/caption] Thus, saying that atomic design is just old wine in new tubes is justified. Which also answers the question of whether atomic design is a success or not: it is successful, but not under this name tag. ** I can see one advantage of using these terms, even if it's more of a psychological one. By speaking of atomic design, we create a mindset that points us in the right direction. This results in us focusing on the details of the design approach, rather than randomly designing the right way. It should be undisputed that a design approach should always start at the smallest, and end with the largest component. Responsive design is one of, but not the only factor forcing this approach on us. Whether we're doing it voluntarily or not, there are valid reasons for the method.

Arguments for Design Kit Systems

Although houses can look very different, the construction industry has agreed on one shared modular system, which every house is more or less based on. Ceiling, wall, and roof elements are building blocks; delivered and takes as the raw material. The same goes for windows, doors, and so forth. The only individual aspect is the number of different building blocks and their appearance. The same goes for our branch. Even if you claim to build every page individually, obeying the requirements set by the client, the truth is that every one of us has stockpiled snippets for all kinds of different functionalities over the years, and is happy to use them over and over. This is nothing to be ashamed of, but rather proof of reason, especially looking at it from a business perspective. This already starts with the wireframing. The wireframing is a conception method that visually depicts the approach of atomic design. In rough content blocks, we sketch how the pages will be structured, and where which functionality is to be expected. This lets us get an idea of the project from top to bottom without us getting lost in the design details. One could say that atomic design helps users to keep an overview. Of course, the other mental approach already helps with the creation of reusable code blocks. Without this approach, you could be less focused on this aspect. Summarizing the advantages of the method, whether you call it atomic design or not, we get a neat list with some use value: You Have a Collection of Modules to Assemble in Any Way Desired If you strictly stick to this approach, you have an arsenal of ready-to-use function modules that you can put together in any way you want to. Within the given hierarchy, you're free to do whatever you want, allowing for the fast creation of prototypes or more. Your Style Guide is Pretty Much Created Automatically Since you're designing on an atomic level, you can use the components as a style guide. Or, put differently, you don't need one at all, as using the small components automatically results in a consistent design. The code base is consistent by nature as well, contributing to a more natural understanding of the function modules. Your Design Aspirations Remain More Practical If you can design freely, you tend to design a layout page-based. This is normal and what everyone's used to. When sticking to atomic design, it's more about creating a working design that looks good with the given building components. Due to the patchwork approach, "mobile first" is the native maxim. Logically, the prototyping, if that's what you want to call it, speeds up as well. Your first drafts will be done much faster. Your Website is Easier to Take Care of If you consequently stick to the hierarchy of atomic design, removing, replacing, or relocating blocks is easy. This doesn't make active care of your website as easy as 123, but it is no rocket science either. The Approach Can be Extended Once you've internalized the atomic approach, you'll notice that your HTML markup is not the only thing that can benefit from this. CSS, JavaScript, and other technologies allow for the same process as well. Especially JavaScript has some potential here. Conclusion: Atomic Design in Itself is a Good Thing As you can see, atomic design is a good thing. Whether that's what you want to call it or not is up to you. If you're going to play around with Brad's concept, check out Pattern Lab. Here, you can get used to the thought model. If you know bootstrap, this won't be challenging. Featured image by D koi on Unsplash