UI Like Chemistry; Atomic Design.
In this article, you will find;
- Who is Brad Frost?
- What is Atomic Design?
- Five distinct of Atomic Design.
- When, Why and Where should we use it?
Who is Brad Frost?
He is the owner of Atomic Design idea.
If you just want to focus on learning what Atomic Design is, you can skip this part, but I recommend you to read because It is also important to learn how and why something came from whom.
Simply, Brad Frost is a web designer located in Pittsburgh, PA. He spends most days and nights creating Web experiences that look and function beautifully on the never-ending stream of connected devices. He travels all over the world speaking about Web design, and has worked with brands Nike, Tiffany, AOL, Entertainment Weekly, HP, MasterCard, L’Oreal and more.
I’m leaving some related links below.
- Seminar about Atomic Design from 2015.
- Book about Atomic Design, wrote in 2015.
- A recent podcast/interview with Brad Frost.
- Official site.
What is Atomic Design?
Atomic Design is a design approach inspired by nature. It is based on the concept of atoms and molecules in chemistry, where small elements (atoms) come together to form larger structures (molecules) with unique characteristics. This concept is applied to design by creating a set of building blocks or “atoms” that can be combined to create larger design elements or “molecules.”
The Atomic Design process consists of five stages: atoms, molecules, organisms, templates, and pages. Each stage builds upon the previous one, with the first three stages corresponding to the atomic and molecular concepts in chemistry. By following the Atomic Design principles, designers can create a structured approach for building design systems and pattern libraries.
- Atoms
- Molecules
- Organisms
- Templates
- Pages
In Atomic Design, atoms are the smallest design elements or basic HTML components. They represent individual design principles, such as colors, fonts, animations, or single images. Atoms are the building blocks of a design system and cannot be broken down further. They serve as the foundation for the interface and include elements such as buttons, inputs, labels, and icons.
When designing, atoms are the first step. For example, a designer may start by choosing a color or typography that fits the brand, and then design small elements such as buttons and icons that will be used throughout the design. Atoms are similar to Lego blocks, as they can be combined to create larger structures or “molecules,” which are the next stage in the Atomic Design process.
After creating the basic design elements or “atoms,” the next step in the Atomic Design process is to combine them to create larger structures called “molecules.” Molecules are reusable components that can appear multiple times across the site, such as a form paired with a button, a card with an image, or a highlight box. In this stage, the atoms retain their individual characteristics, but are grouped together to form a new entity with its own distinct properties.
For example, by combining the avatar atom with name and title labels, other atomic elements, we can create a profile molecule. Just as in chemistry, the same atoms can be combined in different ways to create unique molecules for use in design. However, at this stage the groupings are still relatively simple collections.
As we move to the Organisms stage in the Atomic Design process, the design elements become more complex, consisting of collections of atoms and molecules. An organism is a group of molecules that come together to form a larger, more complex component. For example, the “profile” molecule, which consists of an avatar and label elements, can be added to an app header for a profile page, along with navigation, a background cover photo, and other molecules, to create a header organism.
A navbar and the footer of a website are examples of organisms, as they are made up of multiple molecules and atoms that work together to form a larger, cohesive element. In the Organisms stage, we design these more complex components by bringing together smaller design elements in a structured way.
Once the atoms, molecules, and organisms have been created, the next step in the Atomic Design process is to design a template, which is a group of organisms that can be reused across the site. Templates provide a modular approach to content structuring, allowing designers to easily create a consistent structure for different pages on the site.
Designing templates can be an enjoyable process, as it allows designers to experiment with different arrangements of organisms until they find the structure that works best for their product. The templates stage is a chance to play around with the various design elements and see how they fit together to create a cohesive whole.
The final stage in the Atomic Design process is the page, which is a combination of templates populated with real content. This is where all the different levels of design come together to create a finished product. Pages are instances of templates, and in the design process, it can be helpful to create a few variations to account for different types of data, such as different profile information or languages.
Building out to the page stage allows designers to test for these variations and make global adaptations to their templates. It is also possible that not all organisms will be used in every template, and pages are where designers can adjust which parts of the template are displayed. Pages are typically the stage at which clients and internal stakeholders review the design, as it allows them to see the full fidelity of the design in one place and identify any weaknesses or areas that are not working well. However, it is also helpful to share the design at the template stage to get feedback earlier in the process.
When should you use Atomic Design?
There are three main stages in the process of designing a user interface: sketching, wireframing, and mockup. In the sketching stage, designers experiment with various high-level concepts and ideas. The wireframing stage involves settling on core patterns and applying them consistently across the design, without incorporating colors or effects. In the mockup stage, designers incorporate their style guide and convert the wireframes into development-ready, pixel-perfect screens.
While it is never too late to organize designs into an Atomic Design library, it can be too early to do so. During the sketching stage, concerns about consistency and simplicity may hinder creative thinking. It may be more effective to incorporate Atomic Design in the wireframing stage, when patterns are being duplicated across user flows. Alternatively, the mockup stage may be the best time to adopt Atomic Design, as the design process is nearing completion and the more constrained approach of Atomic Design can be appreciated as a way to support and guide existing designs.
Why should we use it?
There are several benefits to using the atomic design approach for creating design systems:
- Consistency: Atomic design helps to create a consistent user experience across multiple products and platforms. By breaking down the design system into smaller, reusable parts, designers can ensure that elements such as typography, layout, and color are consistently applied throughout the system.
- Flexibility: Atomic design allows designers to easily modify and update their design system as needed. By breaking down the system into smaller parts, designers can more easily update and maintain individual elements, rather than having to redesign the entire system from scratch.
- Scalability: Atomic design is a scalable approach, which means it can be easily adapted to different screen sizes and devices. This is particularly useful for designing for the web, where designs need to be responsive and adaptable to a wide range of screen sizes and resolutions.
- Efficiency: By following a structured process, atomic design can help to streamline the design process and reduce the risk of errors or inconsistencies. This can save time and resources, allowing designers to focus on more important tasks.
Where can we use it?
The atomic design approach can be applied in a variety of contexts, including:
- Web design: Atomic design is often used in web design to create consistent and cohesive user experiences across multiple pages and devices.
- User interface design: Atomic design can be used to create user interfaces for software applications, mobile apps, and other digital products.
- Product design: Atomic design can also be applied to physical products, such as consumer electronics or home appliances.
- Graphic design: Atomic design can be used to create cohesive branding and visual identity systems for businesses, organizations, and other entities.
Overall, atomic design can be used wherever a consistent and cohesive design system is needed, whether it’s for a digital product, a physical product, or a visual identity system.
That was all for basic Atomic Design.
As I come across different and interesting topics about web development, I will keep continue to come up with different stories.
