Apr 30, 2020

Atomic Design from a Designer's Perspective

Atomic Design is a methodology, and it is one of the possible ways to create a Design System. In the design community, Atomic Design may also be the most misunderstood method.

With its origin in software engineering, designers interpreted the method as a process to create Design Systems for designers. In principle, Atomic Design splits components into these categories: atoms, molecules, organisms, and templates for pages. These names are metaphors: You build molecules using atoms, organisms using molecules, and templates for pages using organisms.

If you translate this to design, you start out building the smallest useful objects first: atoms — for example, buttons, radio buttons and checkboxes with labels, or input fields. Next, you'd start combining atoms to molecules, such as a text input field and a button to become a search bar. Molecules combine with other molecules and atoms to form organisms. An organism could be the header of a web-page — comprised of a logo (atom), navigation (molecule), and the search-bar mentioned above. These organisms then combine with other organisms, molecules, and atoms to form templates for pages. The header from the previous example combined with a body and a footer could form a template.

While this sounds like it's going to work out brilliantly, it only really works for the software development side of product design, but not for visual-, UX-, and interaction-design. The last two steps (templates and pages) are useful for web-pages, but not for most web-applications.

When building components, on the atomic and molecular scale, things usually fit together nicely. Still, once you start building more complex components such as organisms or whole templates, visual incompatibilities start popping up, forcing the design process to iterate on atoms and molecules repeatedly and often out of context. This can also harm the Aesthetic Usability Effect in the process of designing a Design System.

Another problem for designers sometimes is a lack of intent. Usually, good design happens, when designers know what they are designing for. A Design System built for general-purpose or multiple products at once using Atomic Design has no specific application in mind. By interviewing designers, I found it often lacks a style guide. This lack of direction can lead to the creation of components which don't work well together and components nobody needs. It also leads to components that sort of fit all use-cases but are not a good fit for any specific case.