Understanding Atomic Design & How It works

As a self-taught designer with experience in visual and communication design, diving into UX design was an entirely new challenge for me. I realized UX or HX is not designing beautiful visuals, It’s about creating & enhancing experience between human being s & technology.

I’ve been delving deeper into design principles and reading various books. One of the notable reads I came across is Atomic Design by Brad Frost.

Atomic Design

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.

The five stages of atomic design are:

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

https://atomicdesign.bradfrost.com/chapter-2/

Atomic Design is a methodology created by Brad Frost, inspired by chemistry.

Under this framework, atomic elements combine to form molecules, which then become organisms, and so on, just like in high school science.

Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time

— Brad Frost

Designing Systems

Create design systems, not pages

Brad highlights the concept of the “page” in his book, noting how deeply it has become ingrained in the vocabulary of the internet.

The page metaphor has been an essential part of web terminology since the early days. When Tim Berners-Lee invented the World Wide Web, his goal was to enable seamless sharing and linking of documents among colleagues at CERN and academics worldwide.

From the outset, the page metaphor offered users a familiar framework to navigate the emerging World Wide Web.

To put simply, this image would summarize them all.

https://atomicdesign.bradfrost.com/chapter-2/

Modular Design

As the machine age shifted to the computer age, computer scientists developed object-oriented programming and key modular ideas like separating tasks and focusing on single responsibilities. The World Wide Web emerged from this environment, so it’s no surprise that modular design quickly became a key principle in web architecture.

Modularizing content

Get your content ready to go anywhere, because it’s going to go everywhere.

— For A Future-Friendly Web

We must understand that the device and web landscape is becoming bigger and more diverse all the time.

Organizations are realizing the importance of creating modular content to reach their audiences across different platforms. Content management systems are evolving from simple web publishing tools into systems that can easily create and manage modular content. While custom solutions like NPR’s COPE (Create Once, Publish Everywhere) platform have existed for years, modular thinking is now becoming more common in mainstream content management systems.

Systematic UI design

We’re not designing pages, we’re designing systems of components.

— Stephen Hay

Ethan Marcotte introduced the concept of responsive web design with three key principles: fluid grids, flexible media, and CSS media queries. These elements gave designers the essential tools to create layouts that adapt intelligently to any screen size.

There is much more about creating style guide & design system.

Stop, collaborate, and listen

Let’s take a quick look at how establishing design direction works across different disciplines:

1. UX Designers can create lo-fi sketches to establish basic information architecture and some anticipated UI patterns.

2. Visual Designers can gather the teams’ aesthetic values by conducting a 20-second gut test exercise, then create style tiles and element collages to explore initial design directions.

3. Front-end developers can set up project dependencies, stub out basic templates, and write structural markup for patterns the team anticipates using in the project.

Design system makers and users

First and foremost, it’s important to acknowledge that there will always be individuals within the organization who help create and maintain the design system, as well as those who will use it.

There may be overlap between these two groups, but establishing the roles of makers and users is important nonetheless

The design system makers are responsible for creating, maintaining, and governing the system. They must collaborate closely to ensure that the system is intelligent, flexible, scalable, and meets the needs of both users and the business. On the other hand, design system users are the teams throughout the organization who will utilize the system’s interface patterns for specific applications.

Make it adaptable

A common misconception about design systems is that once they’re established, they become an infallible and unchangeable source of truth. This rigid mindset can lead to your design system efforts backfiring.

Establishing a clear governance plan is crucial for ensuring that your design system can adapt and thrive over time. A solid governance strategy begins by addressing key questions about managing change. Consider the following:

• How are new pattern requests handled?

• How are old patterns retired?

• What happens when bugs are found?

• Who approves changes to the design system?

• Who is responsible for keeping documentation up to date?

• Who actually makes changes to the system’s UI patterns?

• How are design system changes deployed to live applications?

• How will people find out about changes?

Conclusion

Atomic design is a very interesting and still valuable methodology in design systems. I think this would have contributed to the use of “components” and “variables,” which are more widely accepted now.

Nevertheless, this drill was another priceless learning experience for me!