How to apply Analogy to Design Systems

In a world where progress and technology change the pace, fast-development is the standard. And for teams and professionals to keep up with this, efficiency is a key ingredient. A good way to illustrate this is to look at how real estate development has changed over the past decade. Have you noticed how some modern skyscrapers are built lately? Essentially it’s possible to build an entire kitchen or bathroom off-site and plug these elements into a floor on-site like LEGO pieces. They call it “modular construction” and it is a revolutionary process that brings flexibility, speed and of course, efficiency.

The same principle applies, on another scale, to the world of digital products.
If you are familiar with web design, you have probably heard of “design systems” and “frameworks”. Both terms basically serve to define styling guidelines on creating digital interfaces but sometimes all the jargon and complexity of industry concepts can be overwhelming to people who need to share the same practices.  

In 2016 Brad Frost, a web designer and consultant, wrote a book called Atomic Design where the use of analogy came to the table to transform modular concept ideas into something much more simple to understand.

So, what is Atomic Design?

Atomic Design is a methodology for creating design systems. There are five distinct levels in Atomic Design:

1. Atoms
2. Molecules
3. Organisms
4. Templates
5. Pages

Imagine you’re creating a website. One of the elements every user interface needs to have is a button. In Atomic Design this would be considered an atom, the smallest piece of an interface. Also in this category, can be included abstract elements like colour palettes, fonts and even more invisible aspects of an interface like animations.

On the next level, let’s say you combine this button with a label and an input field, you have a molecule called the search box. Moving on, you decide that this search box is part of the header. In this case, you’re combining molecules to create an organism called main navigation.

At the template stage, the chemistry analogy is substituted with a language that makes more sense to the client-facing interaction. Templates are built by grouping organisms to a framework of placeholders. It’s here where the design starts coming to life.

Finally, pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an authentic idea about what the user is going to see on the final design.

Everything is connected

One of the main advantages of the Atomic Design approach is that all components of a Design System respect the same organic hierarchy which makes the scalability and management easier. For instance, by changing the colour of an atom, the whole page will be affected immediately.

But never forget, this is just a principle, a technique. The challenge designers and developers have to face is how to use Atomic Design to create original experiences. Creativity needs to be the guide to explore opportunities to use this toolbox to extend design thinking outside of any box.

Are you considering creating a new digital experience? GMD experts are here to help you on that journey. Contact us to learn more about how we can help you.