When it comes to creating a Digital Design System, teams have several popular design methodologies to choose from, two of the most prevalent: Atomic Design and Google Material Design. These two approaches differ in their fundamental principles and practical implementation, however that doesn't mean the use of either is mutually exclusive.
Atomic Design focuses on breaking down design elements into their smallest components, such as atoms and molecules, and then building them up into larger components and layouts. This approach emphasizes modularity and reusability, making it ideal for creating scalable and consistent design systems. This is what we did at AT&T. Because of the vast number of applications that we were addressing, we needed to create a system that could be eased in through simple changes such as through CSS. So our focus was on creating a set of UI controls (buttons, sliders, pagination, etc), as well as a common font/typography set. That was the initial roll out, with more comprehensive modules to follow.
On the other hand, Google Material Design offers a comprehensive set of guidelines and components that prioritize visual and interactive consistency across different platforms. This approach is characterized by bold colors, natural motion, and tactile surfaces, aiming to create a unified and intuitive user experience. One of the benefits of Google Material elements is the familiarity with end users. You can still adjust the elements to align to your branding, however the bar is lowered for recognition and learnability by end users.
View the video speaking to the testing of the initial roll out of the AT&T Design System.
While these two design methodologies have their distinct strengths, it is important to note that they can be effectively utilized together to create a comprehensive and versatile design system. That's what we did at Western Digital. By combining Atomic Design's modular approach with Google Material Design's unified guidelines, designers aren't reinventing wheels and leveraging elements that are already tested as accessible. Benefits are faster development, increased consistency, and improved accessibility. This hybrid approach allows for greater flexibility and adaptability while ensuring a seamless and cohesive user experience across various platforms and devices. So when trying to decide which framework to select, there is great value in leveraging the strengths of both Atomic Design and Google Material Design to create an effective and impactful design system.