Molecular magic with Atomic Design.

How did the need for atomic design arise?

To take you briefly into the mindset of the mental father of atomic design, we travel to picturesque Pittsburgh Pennsylvania a few years ago. Web developer and designer Brad Frost was a pleasant and capable designer who slowly saw the love of his work disappear into repetition and responsive design.

From earlier times, many designs were developed using the sacred house style guide. This thread became so decisive that the content and structure of the page were less important than adhering to the style guide. Also, in this way, each page was viewed as a stand-alone task. Each page was a task you started anew.

Then the internet was flooded and taken over by devices. All these screen sizes had to be welcomed smoothly and all content translated visually flawlessly. Pixel-perfect pages had to be set up for the iPad, iPhone, Galaxy range and dozens of other 'crucially important' resolutions, starting again and again with a page design.

This responsive design process is outdated and time-consuming even by heaven's standards. In addition, we see that this process often creates small, as well as large, inconsistencies between pages, or, for example, a company's website and application. Today, it's all about a friendly, simple and consistent User Experience.

Frost felt it was time for an innovation in website and application design. He was keen to adopt a less linear and more easily broken down methodology. The question on his mind was: 'What are the simplest components, what is the lego of design?'

The Vietnam veteran and the find.

His search for a methodology to design, mainly larger, design interface systems led him past other fields and industries: more people had a desire to streamline and unclutter these kinds of large processes.

Thus, it soon became apparent that compartmentalising processes are all used in the design of cars, ships, buildings and e.g. games.

Where once an entire car was assembled on the assembly line, in Ford's first Model T factory, things are a bit different these days. Hundreds of processes have been outsourced to other companies and these are delivered as part of the car. Instead of all the circuit boards, screens, screws and wires, GPS systems, CD and DVD players and other standalone products come into the factory.

For web design, however, he couldn't find particularly much that looked enough like clear compartmentalisation. He did find examples of further developed style guides, such as style tiles or site style sheets. Where a house style was sometimes a bit too vague and unclear, these style sheets are better geared to web design and certainly make the lives of designers and developers a bit brighter.

Consultation with your client using style tiles, for example, can often be tricky anyway because, lacking imagination, little can be seen of the final look of the page. It's all still too abstract.

After a while, Frost felt a longing for instruction, a feeling that took him back to school. In high school, he had enjoyed a particularly strict chemistry teacher, an imposing Vietnam veteran with a stout moustache.

Americans are taught the structure of chemical reactions at the atomic level, the periodic table and, of course, a lot of other things. For example, that hydrogen (2H2O) consists of 2 hydrogen atoms and 1 oxygen atom, they have to note and study as follows:

In this way, students can see how different atoms can come together to make more complex molecules. Elaborating further on the picture Frost saw in his mind in this regard, he thought of the next logical step, organisms. After all, when enough molecules come together you get another higher form of matter, or life. From single-celled life to immeasurably complex humans, we are all ultimately made up of atoms.

Everything in the universe can be completely broken down to atoms. The atom is the tiniest functional unit known. Although atoms consist of electrons, protons and neutrons, only when put together do they have certain functionality.

Of course, while this is a slight oversimplification of how the universe works, it obviously needs to be scaled down a tad to cover the overwhelming load of web design. Once properly inspired by his mustachioed chemistry teacher, Frost devised a periodic table for web design, to which all the elements of a web page can be traced.

This table gives an at-a-glance overview of all the elements that can be in a website. All websites ever created can be traced back and broken down into all these HTML elements. Since you can parse and divide them completely, it is also possible to start building from this perspective.

'Atomic Design' was brought to life with this in mind.

The order and the advantage.

The design process of atomic design is divided into five different stages. Atoms, molecules, organisms, templates and pages. These five stages are intertwined in a purposeful and hierarchical way and ultimately translate into a functional interface design.

Responsive design is a complicated and linear process that quickly becomes neither clear nor efficient. It was not at all surprising that there ended up being 50-60 Photoshop files for a website. You clarify the homepage, the other pages and all possible functionality using designs. Then you have to redesign and reposition all this for tablet and mobile which drastically increases the total number of files.

Atomic design should be seen more as a mental matrix where, at the same time, an overview of the whole is maintained and a collection of parts can be seen. Making a small adjustment afterwards is then not a major intervention but a smooth revision.

This way, you have a good foundation to work with as a developer or designer because you have already seen all the building blocks of the project.

Molecules

Attached atoms evolve into molecules to multiply or add functionalities. For example, by merging the atoms; buton, input field and a title field, you can create a 'Subscribe to newsletter' molecule.

When certain atoms are joined together to form a molecule, that molecule communicates certain functionality. The result is a simple, reusable and flexible component that can be placed and modified anywhere as needed.

Now, design has always been done in steps and pieces but rarely has an entire stage been dedicated to this process. When all the required functionalities can be covered by created molecules, you get a powerful and uncluttered image of the style. This makes it possible to shape everything to exactly the same idea, be it on web, an application or print.

This is a developer principle that means you should break down functionalities into as many small parts as possible; let one particular function do one particular thing. Ever since the early 1990s, the 'Do one thing and do it well' principle has been a basic need within programming.

When you fill a single molecule with too many complex tasks, it can make software and/or websites unmanageable and cluttered. One molecule counts one functionality. This is how you keep everything, from concept to testing, crisp and clear.

Organisms

You have made logical molecules out of all the atoms, your molecules cover all the required functionality and the time has come to start developing organisms. These are relatively complex User Interface components composed of multiple molecules.

Think back for a moment to the newsletter molecule just used as an illustration. You often see such a molecule in the footer of a website or interwoven somewhere in the contact section. The footer, which combines several functionalities (read molecules), is in this case an organism. These organisms form a clearly delineated part of your page with multiple functionalities within its boundaries. They are flexible and easy to redecorate for minor adjustments.

Thanks to this segmentar approach, you can form your own perfect context for all the molecules you need. Functionality is built from the bare minimum and you won't encounter blocks designed for a single purpose.

Have you accommodated all functionalities in organisms? Then a practically ready-made template building kit emerges. Finally, in the design process, we can start creating something that will actually resemble a website or the final product.

Templates

It is also finally time to abandon the chemical analogy and switch to more recognisable practices. Indeed, with templates, you arrive at the content structure of the project and start weaving the different organisms together according to the content to be rendered.

Previously, this was done at the front of a project, creating wireframes. What should go where and what repeatable blocks do we see in the preliminary design? By doing this process only after designing practically all components, you get a powerful and much more appealing wireframe due to the presence of already designed organisms.

The main difference between templates and pages is that the former mainly focuses on the underlying structure of the content. What kind of information should be here later and not what literal information am I going to put here. The design has to take into account the dynamic nature of content, hence it is good to look at sizes of images and amounts of text beforehand.

Pagina’s

We have arrived at the fifth, final and most concrete step of atomic design. This is the final product of your design work, the thing that the client has to look at and that which its users are going to see. Completing a template with the right content can be very satisfying.

It is also essential for testing the functionalities of the underlying system. At the page level, we can only really see how all the molecules and organisms behave when there is real data in it. Does everything actually look as we had hoped? Does everything work as it should?

Is the answer no? Then we will dissect such an organism or molecule again, build it up until the part works properly and put it back in the website.

So what are the concrete benefits of this molecular magic?

Currently, we see several methodologies and practices that work nicely, why switch to atomic design? There are certainly some distinctive points that argue in favour of atomic design.

One of the biggest advantages of atomic design is the simplicity with which you can swap the abstract for the concrete. You see everything as a part and its corresponding whole, going back from a template to a particular atom is very easy if you have gone through the five steps neatly.

As a designer, when I am working on a specific part I am in detail mode, I am very close to the subject. When we then want to see how this plays out as a whole we zoom out and look at the whole page.

When you step back like this and look at how the part relates to the whole, you are constantly changing perspective, from abstract to concrete. These two facets of design are inseparable and this fact is embraced by Atomic Design.

After building your atoms, you immediately have a clear and unified style guide for your entire project. Once your molecules and organisms are standing you have a child's task of prototyping for subsequent designs or functionalities.

Thanks to modularity and the use of the single responsibility principle, you get cleaner and more readable code. Besides cleaner code, it is also easier to create a more modular design of the file structure behind the code.

Made possible by logical structure and 0.0 of redundant code or unused framework functions.

In my opinion, the most magical power of atomic design is the ease with which you create consistency across a wide range of media. In the beginning, I talked about the inconsistencies that easily creep in with responsive design and the dangers of this. Today, the User Experience is a crucial element of the experience of a product or company and consistency is incredibly important in this regard.

Recognisability of your work or brand ultimately increases usability. A user will eventually recognise patterns in your design and therefore be able to interact with your applications or other digital services faster.