Atomic design: the most natural thing in the world

date
Picture of workshop atomic design of interface Krëfel

By Clovis Six, UX Researcher at Internet Architects

When it comes to design, you cannot beat nature. Look at how a tree is made, for example: a smart construction of different cells for specific functions (provide structure, get the photosynthesis working, reproduction, etc.), combined into functional units (branches, leaves, blossoms, etc.). Notice how many of these elements are constantly reproduced: trees have dozens of branches and hundreds of leaves. It is simple and it works. It is called atomic design.

In digital development, this notion of reusable building blocks is gaining popularity. More and more designers appreciate its benefits regarding efficiency and standardization. Start with the atoms, which are the smallest elements that you’ll work with, such as a specific block of content like a title or description, links or images. These are elements that are rarely used separately – a link needs a couple of words to describe why you need to click on it, an image accompanies a bit of copy as well, etc.

But with these atoms you can start building molecules, which are still very simple, but already combine a few atoms. The ‘Home’ or the ‘Search’ button, for instance, which contain an image and a link. Molecules are the easiest to re-use – even in different websites.

Image of atoms, molecules, organisms

Here comes the content

A bit more complicated than molecules are the so-called organisms. These are usually identified by their function, such as the fields to enter your address in a form (you can have different forms on your website, but there is often no need to change the address fields, so why not re-use them?) or the code that checks whether the password people filled in is strong enough. 

By combining molecules and organisms you can create templates, such as a product page, a team page, a contact page, etc. These are of course the naked constructions, without any content. Nevertheless, it allows you to already go to your stakeholders and start discussing what you came up with. It’s important at this step to discuss the system, not the pages. By filling the templates with content you create the end result: pages. Even though content is only added to the templates in such a late stage, do not make the mistake of waiting until then to actually create the content. Better is to start writing content from the very beginning and let it mature together with the project.

More fun, more engagement

The advantages of atomic design are simple enough. Not re-inventing the wheel every time will save you a lot of time. Moreover, organisms are usually very basic functions, which are not exactly very challenging to write. By re-using those elements you will save yourself a lot of tedious work.

But there are some other advantages as well. Since you are basically putting together a big jigsaw puzzle, why not set up some workshops with your co-workers and everybody else who is involved? Dive into the different possibilities, get creative with these reusable components – the result might be totally different from what you had in mind at the start. This way, the whole process of building a website becomes a lot more fun and involves more stakeholders, leading to a more satisfying result. If you like, you can even use our presentation on atomic design, which you can find here.

Picture at workshop of atomic design interface krefel

Digital design can be a tough job, but atomic design – simply using the principles of nature – can make the process a lot easier. And the result so much more rewarding. Remember this when your next project comes along…  


More news

How to get on top of your website’s performance

date
Picture of running contest with athlete in starting blocks

A faster website only bears fruit. Like we’ve told before: your customers’ time is your money. As your website loads faster, less people will abandon your website, they will stay longer and ultimately your bounce rate will benefit. A good performing website even impacts SEO, making sure it’ll be easier for (potential) customers to find you. A faster website improves conversion, it increases visitor satisfaction and it reduces visitor abandonment.

more about this news article