Google’s Material Design is a design system that helps teams build high quality digital experiences across different platforms. One of the best parts of Material Design is that it provides guidelines, implementation, standards, and code for different components used across different technologies – web, React, Angular, iOS, Android, etc. This presents a great advocacy to use Material as a standard for an enterprise where different technologies are used across various applications. But should you rely on Material?
Variations Across Different Technologies
It turns out that the design and implementation of the components provided by Material for different technologies are different altogether. Let’s say an organization has decided to use Material as their design system and there are two projects using two different technologies, one Angular and another a static website driven by a CMS. Material has a separate set of components for Angular and another separate set for web (expand the components section on the left).
A button component’s style in Material Angular is completely different from its web implementation. The Angular version has a Stroked Button variant, while the web version has an Outlined Button variant. If we need to use the outlined button in Angular app, it would need to be styled separately. The case with a stroked button would be similar. It needs separate styling in the web app. Likewise, a text field input also has different styles and interaction in both the web and Angular versions. Either of them will need additional styles added to match each other. Which one should be used as a standard now?
This discrepancy in the implementation of components across different technologies is sure to add perplexity for the developers and designers working on different projects. Moreover, if Material’s Angular components get an upgrade, the custom components need to be upgraded manually as well. This adds unnecessary developer overhead in maintaining and testing components not supported by a particular variant of Material (be it Angular or web or React).
One begins to wonder why the brains behind Google’s Material did not put much thought into creating design and implementation guidelines for components across different technologies in a homogenous manner. The absence or changes in implementation of components across different technologies creates much confusion and development overhead among the teams using them. A comprehensive and meticulous review of Material’s design system and its components is absolutely necessary if it is going to be used as a standard across different technologies in an organization.