Atomic Design 2.0

Above all the use of the Internet on mobile phones and tablets, modern communication technologies led to a paradigm shift in visual communication.

Most designers have realised that the metaphor »page« has become obsolete.

More and more devices with different resolutions have necessitated radical rethinking in the design process. More than that, we can no longer get past rethinking how we communicate with our clients and what the results of a visual concept could be.

Since the Middle Ages, people have organized information mainly in books. Their most important structural element was the page. When the WorldWideWeb came into operation, it was clear that information was also organized into pages there. For a long time, this worked well, more or less. However, today we are in a world with countless output and viewing devices whose contents are changing dynamically; animations, interactions, and information merge in the WordWideWeb today into a multidimensional medium. The metaphor »page« has long since reached its limits.

If you want to create professional, modern web design today, don’t miss thinking about the workflow. Most people realized that Photoshop layouts are only good for fixing a design idea or for matching shapes and colors but not for reproducing a »user experience« that is at least halfway harmonious.

Whether different viewports, mouse or touch statuses, dialogue boxes, reloaded AJAX content, interactive animations or simple sliders, in order to map all possible states of a single page, one would need countless screens in a modern web design, and these would still not reflect a »look and feel«. Click dummy tools such as InVision are also largely unsuccessful.

The creation of countless screens is also extremely time-consuming. They are not self-explanatory and all too often have too much room for interpretation. This often leads to misunderstandings and unintentional UX experiences, especially in technical implementation.

The customer is often misunderstood because he is not fully aware of all the consequences of a complex usage process or of the different responses from his appearance.

However, this fact has not yet been recognized by most customers, as they still like to request classic screens and use them as a decision-making criterion when choosing their internet agency, for example, in pitches.

Thus, it has become necessary for the agency to break up this traditional process and to teach the client the new, iterative process. This includes, in particular, saying goodbye to the page metaphor and understanding that the basis of a good website today is a design system or a modular pattern library.

Atomic Design

In the summer of 2013, American front-end designer Brad Frost presented his new design approach »Atomic Design« (http://atomicdesign.bradfrost.com) to the public. This is based on a scientific approach to design, which means that functioning, i.e., good web design in all its individual elements, must be of a consistent and modular structure.

Conversely, when you look at a website under the auspices of Atomic Design, that is, a design splits it into its smallest single parts, all its weak points and contradictions are much more clearly visible than in the state of use, which makes comparisons and a holistic view of all elements more difficult due to its diversity.

This approach was not new in principle. Many designers have intuitively worked at least somewhat modularly for a long time. Since the Art & Crafts movement and Bauhaus, there have also been similar design theoretical considerations and postulates, but in their simple metaphorics and in the application focused on websites, as Brad Frost describes his system, Atomic Design is very contemporary, plausible and above all useful.

The analogy to the physical world, in which matter consists of atoms and molecules that in turn form cells and form organisms, gives the model its metaphorical tools. Instead of designing the actual website, an »atomic designer« builds a design system instead, which is the basis of the website to be designed and not the other way round. Consequently, one starts in small things and then gradually works oneself up to the big one; iterative steps backwards are possible and certainly necessary at any time. The advantage of this workflow is obvious: it avoids inconsistencies and ensures that the created design system is a unified whole. In addition, an Atomic Design can be realized much easier technically, because HTML and CSS, the web follows the same hierarchical principles.

Brad Frost’s Atomic Design System distinguishes five components:

Atoms

• are the smallest components for an interface
• cannot be further dismantled
• good for use as overview reference

Molecules

• As in chemistry, molecules are a combination of several atoms. A search field consists of the atom label, an input field and a send button.
• form the smallest organizational unit and consist of several atoms

Organisms

• are compositions of several molecules
• often represent standalone, usable components

Templates and Pages

• are compositions of several organisms
• reflect possible usage scenarios of a web application
• usually make up the largest grouping organizational unit

To create an Atomic Design System, Brad Frost and his friend Dave Olsen have created the Pattern Lab (http://www.patternlab.io), an open source tool to create a modular Atomic Design System using PHP and Mustache as template engine.

I have implemented several projects with it. It works, but the creation is very complex and the handling is very brittle. Patternlab does not offer a user interface or administration panel. With its console mode of operation, it is more aimed at experienced frontend developers than designers. This is a circumstance that I have long considered a pity, because many UX designers don’t have the necessary skills.

I also recognized a few inconsistencies in Brad Frost’s approach, that really bothered me:

• Atoms consist of CSS attributes, sometimes of HTML tags. This is inconsistent.
• The »pages« layer seems to be completely superfluous for the atomic design process and is based on the old, inconsistent »pages« metaphor. It does not extend the design system functionally and offers no added value.
• Five layers (finally only four, since the »page« layer only represents a doubling of the template layer) were often not enough for me to represent a complex design system based on patterns.

That was the reason why I started to develop my own tool besides my UX projects: Atomic Kitchen.

Atomic Kitchen

I think that with Atomic Kitchen, I have fixed a few weaknesses in the theoretical Brad-Frost substructure on the one hand, but on the other hand, I have also created a much more intuitive tool compared to PatternLab.

My idea of atomic design is to create a layer for CSS attributes only. The elements of this layer represent the smallest, indivisible unit; they are called »styles«. No HTML tags are merged with CSS attributes.

The CSS styles are connected to an HTML tag and optionally assigned a class name. The specific composition of the CSS styles forms a certain »atom«. The styles are thus the properties of the atoms. The atoms themselves act as functional or content carriers, i.e., they always bind a content or function to itself, which is enclosed by the atomic HTML tags. An atom can have various states, such as »hover« or »last-of-type«. Atoms represent the smallest information units in this system.

Atoms are then organized into ever more complex forms: molecules, organisms, segments and templates. There are now a total of six levels instead of five (four). This means that more complex nesting is now possible.

The »page« level, which in my opinion does not add any value to the atomic design system, has been completely abandoned.