Atomic design methodology in UX - 7 things you need to know

UX and UI designers apply the atomic design methodology to make consistent design changes faster and easier. But sometimes we tend to use things because of their popularity and not because we actually know how to use them. Let’s see what atomic design really is, who can benefit from it, its pros and cons, and some practical tips.

1. What atomic design methodology is

Atomic design methodology is a powerful process for creating design systems that are modular, reusable, and scalable. The concept, developed by Brad Frost, is based on the idea that a design can be broken down into its smallest parts or ‘atoms,’ which can then be combined to form more complex components. What challenges can this solve? To build a coherent, hierarchical, and thoughtful interface design system, designers should stick to these 5 building stages in the design process: Atoms are the foundational building blocks of a design system, including elements like buttons, inputs, icons, and typography. Molecules are made up of atoms that fulfill a specific function, like form fields, search bars, and dropdown menus. Organisms consist of molecules that form a distinct section of a page, such as a header, footer, or product card. Templates provide the framework that combines all the organisms and establishes the page layout. Pages are the final stage of the design system, formed by merging templates and adding content.

Atomic design process. Source: Building ChimeKit with Atomic Design and a collaborative process

2. Beneficiaries of atomic design

Atomic design offers many benefits for a variety of professionals involved in digital product development, including designers, developers, product managers, and content strategists. Moreover, the methodology can be beneficial for cross-functional teams and your whole organization by creating efficient, scalable, and consistent design systems. UX/UI designers Designers are able to create complex designs for websites, mobile apps, and other digital products by starting with small building blocks. This approach makes the design process more effective. It enables designers to collaborate more efficiently by paying attention to small detailsthey may otherwise have missed. Sometimes it’s overwhelming for designers to start designing from scratch, even when working on the design of the same organization with the same branding. A reusable atomic UI design system can be very valuable in such cases. Developers Good collaboration between designers and developers is crucial for the success of any project. By applying atomic UX design they have a shared language of communication that includes a naming convention and a detailed style guide. With structured documentation available to any team member, there are fewer misunderstandings and better implementation of atomic UI design. Furthermore, using atomic UI design concepts can make it easier for developers to analyze requirements and estimate effort. Cross-functional teams The atomic design methodology is a highly structured process. It outlines clear steps for creating each component, from atoms to pages, and ensures that even non-design teams can understand the value of it. This streamlined approach is especially useful for organizations with large teams collaborating on multiple projects simultaneously. It allows designers and other professionals to clearly understand their roles and apply their skills accordingly. Organizations as a whole By following atomic UX design and atomic UI design principles, organizations gain greater consistency in branding and increased efficiency in collaboration, resulting in improved employee satisfaction. This approach allows companies to focus more on the customer and deliver high-quality products.

3. Advantages and disadvantages of atomic design

Atomic UI design has its own trade-offs, where the technological benefits gained, such as speed and consistency, come with workflow and process issues. However, this approach results in easier prototyping and scaling, a reconcilable design vocabulary, and ultimately, a higher quality user experience. According to Brad Frost, atomic design is a mental model that sees user interfaces as a cohesive whole as well as a collection of parts.

Pros

• Planning becomes effective
• Design and development time and effort decrease
• Communication and implementation improve
• User experience improves
• Designers are encouraged to be more disciplined
• Updating and removal are effortless
• Creating a style guide is simplified
• Components can be mixed and matched

Cons

• Newcomers may feel overwhelmed
• Inconsistent designs are difficult to code and maintain
• Implementing patterns that are not fit for the purpose can be risky
• Using pattern-based workflows may lead to components that work better in isolation rather than within the final product

4. Building a design system in practice

When it comes to putting theory into practice we start with the branding process. In cases where the client does not have an existing brand, we begin with wireframing. Wireframes serve as the foundational blueprint of the design, allowing us to map out the layout and structure of the interface without getting bogged down in visual details. These wireframes have all kinds of elements. We split them up into different pieces and put them in reusable components, which forms the design system. At their core, design systems provide consistent styling and interaction guidelines for teams. Atomic UI design systems are dynamic and evolve alongside the unfolding needs of a product or suite of products. Their effectiveness lies in their mandated usage, ensuring consistency across the design process. When one element is changed, it is updated across the board. An ideal atomic UI design system comprises code-based elements that developers can seamlessly integrate into interfaces, accelerating feature development and prototyping. Alternatively, designers can reuse design elements in prototyping tools, promoting efficiency and uniformity in the design workflow. There's no standard way of building an atomic UI design system, but these are the typical steps to follow:

Define your design principles: Establish clear principles and guidelines that represent your brand vision and core values of the design team.
Build a pattern library: Create a collection of reusable visual elements like color palettes, typography, icons, and imagery to streamline future designs and maintain a cohesive brand aesthetic.
Create a UI kit/component library: Build a collection of UI-focused components (e.g. buttons, widgets) for creating consistent and user-friendly designs.
Put together design process guidelines: Help designers execute tasks and use the design system in alignment with the design principles.
Document usage guidelines: Provide clear instructions for team members on how to contribute, report issues, and handle maintenance. This documentation enables efficient and effective teamwork.

5. How to maintain your design system

Your design system's maintenance should be super smooth in order for people to make changes quickly. This builds trust that it's a reliable source everyone can count on. One big advantage of atomic design is how easy it makes it to keep a design system organized. When you break everything into small, individual parts, you can make changes or updates at the smallest level and have those changes affect the entire system. For instance, if you want to change the color of a button, you only have to do it once at the smallest level, and it will automatically change everywhere that button is used in the atomic UI design system. However, create only the essential components you need when establishing an atomic UI design system. Avoid overthinking and focus on building components that currently serve the needs. You can substitute extensive documentation with user-friendly components that enable designers to reach effective design solutions quickly. Ensuring easy accessibility is crucial. Once your team gets used to the design system, they can recognize unused or missing elements.The design system will be up-to-date all the time, in case there is regular audit involved.This means there should be a well-functioning process and a designated person/team for proactive maintenance.

6. Practical tips for UX/UI designers

As a UX/UI designer, this approach can be a game-changer. By following these do’s and don’ts, you can create a scalable and consistent design system that can save time, increase efficiency, and improve the user experience. Use it for complex projects. The initial set-up can be time-consuming and challenging. Test UX concepts as early as possible. Gaining a better understanding of programming limitations and challenges is crucial. Don't rush the design process. As designers work from small to large components, to reach the final layout requires a lot of time. Create a unique brand identity. Digital products look very similar nowadays. Even small elements like microinteractions should be branded to avoid a generic appearance.

7. Two of the best - Google Material and Mailchimp

You don't have to start from scratch. Be inspired by pioneers like Google or Mailchimp who have already created and tested their design systems. Google Material Design System Google's design system is an excellent example of design system atoms. It started as a design language in 2014 but has since evolved into a functional framework of components, guidelines, and tools that promotes UI design best practices. You can learn how to create great-looking user-friendly apps with Google’s Material Design studies.The good thing about Material Design is that it is open source, which streamlines collaboration between developers and designers.

Google Material Design System. Source: Material Design time and date picker kit

Mailchimp Design System Apart from foundations, such as color or typography, Mailchimp can help with your email, marketing, business, strategy, or ad projects by offering useful tips and examples. They provide innovative design ideas and make complex tasks, such as creating automated email campaigns and newsletters, more accessible through approachable and intuitive UX.

Mailchimp Design System. Source: 10 best design systems and how to learn from them

+1 Atomic writing

Good wording can improve UX and provide clarity for decision-making. However, effective UX writing goes beyond functionality; it entices and delights users. UX writing serves to bridge the gap between design and content. Its absence leads to uncertainty and a deteriorating UX.

Google Assistant Overview. Source: Words matter: The true value of UX copy

Working in an atomic system makes it easier to align the work of UX designers and writers. This approach allows both designers and writers to build piece by piece, constantly refining and improving. They can plan things like character limits and the purpose of each heading. This saves time and effort later on. Plus, it brings writers and designers closer together, allowing them to better collaborate. When building an atomic UX design system, each block has a specific purpose and supports the bigger structure. Writing is similar; headings, sentences, and paragraphs are all units that support each other. If you remove one block, the whole structure changes. Brands that use atomic design can be identified by their clear and concise communication.

Takeaways

Atomic design methodology is a powerful, structured process for creating design systems that are modular, reusable, and scalable. By breaking down designs into smaller parts, atomic design ensures consistency in branding and increases efficiency in collaboration, also resulting in improved employee satisfaction. This approach benefits not only designers and developers but also cross-functional teams and organizations as a whole. While there are trade-offs, such as workflow and process issues, atomic design results in easier prototyping, a reconcilable design vocabulary, and ultimately, a higher quality UX. To make the most of the atomic UX/UI design approach, use it right and follow these tips. At Ergomania, we apply the same principlesto build both our own design systems and those of our clients. Creating design systems for our clients is more than just using the atomic approach. We work closely with them to understand user needs, constantly checking and testing. As design systems take shape, Ergomania can also provide training sessions for developers to ensure a smooth transition. Do you want a truly intuitive and user-friendly digital product? Then get in touch with us. We will be happy to help you to create your design system and more.