Google’s Material Design: A design system with mass adoption
In the early 2000s, when the teams at Google started seriously considering how they might use systems to organize their engineering and design work, they went deep. Molecularly deep, in fact. Polymer, named after a substance that has a molecular structure made of similar units bonded together, was introduced at Google I/O 2013 as a toolkit of templated, yet customizable elements for designing responsive websites. Though the design world didn’t know it at the time, it was a preview of codename: Quantum Paper, or what we know today as Google’s Material Design. Material was the extension, or possibly the complement to Polymer, and gave Google a new reputation when it came to its treatment of and thoughtfulness around design.
The debut of Material at Google I/O 2014 indicated that not only did Google want to create consistency across all Android design and devices, but the simultaneous release of APIs proved Google’s interest in inviting third-party developers to participate in their new design system as well. This lead to mass adoption of Material and acted as the jumping-off point for the creation of hundreds of other design systems.
Translating paper to digital material
Google was already hinting about its affinity for bringing paper elements onto the screen in 2013 with its classic index cards approach, at one point reaching 30 styles of cards. Some designers called the approach minimalist flat design, while others pointed out elements that nudged it over to the skeuomorphic side. Material, the next iteration of the style, is perhaps the good-looking child of flat design and skeuomorphism with its simple shapes and tasteful shadows.
When Material was announced, Google highlighted that while real paper was the inspiration for their new look, this digital material could “expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." But paper doesn’t remain static when someone touches it – it folds, it depresses, it springs back to form, it wrinkles. So when Google translated all the properties of paper into digital material, it introduced a new element that would be a first for similar design systems – how things move. Specifically, pre-canned animations like the rippling of ink on a button when it’s clicked or tapped. The inclusion of movement added another layer to Google’s design system that spoke to the opportunity and evolution of design as technology develops.
A springboard for other design systems
While most modern design systems act as internal guideposts for teams, Google made it clear that Material was for everyone, everywhere. Developers and designers jumped at the invitation, quickly applying the prepared designs and animations to hundreds of thousands of interfaces and apps, and using Material as the springboard to create their own systems. Though the concept of organizing templated solutions had been around since Christopher Alexander, Material was the first time many in software design had encountered a design system, and unforeseen issues began to pop up. Namely, a shocking amount of variety in simple designs–Google counted 3,000 different versions of the core “action button” that developers had made on their own–and on the opposite spectrum, developers were worried about wandering outside the guidelines so they stuck to a style that soon made Material monotonous. Google’s answer? An easier way to use Material, called Material Theming, announced at Google I/O 2018. With Material Theming, developers and designers can make changes through simple tabs and sliders that allow for customizations within Material’s bounds. Matias Duarte, Google’s VP of Design, described it as “a design system for making design systems.”
Today, Google’s Material Design makes it easy for developers and designers to create interfaces and apps that look great, but the company hints the next phase of the design system will focus on the other important half of design—feel. So that one day anyone could specify an emotion, such as delighted or informed, and the system would use algorithms to spit back any number of suitable solutions.
Sources
https://en.wikipedia.org/wiki/Material_Design
https://www.youtube.com/watch?v=isYZXwaP3Q4
https://www.fastcompany.com/1672605/how-google-unified-its-products-with-a-simple-index-card