| Material Design | |||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
 | |||||||||||||||||||||||
 Material Design 3 onAndroid 12 | |||||||||||||||||||||||
| Developer | |||||||||||||||||||||||
| Initial release | June 25, 2014; 11 years ago (2014-06-25) | ||||||||||||||||||||||
| |||||||||||||||||||||||
| Written in | HTML,CSS,Sass (v4),JavaScript,AngularJS,Angular,Java,Objective-C,Swift,Dart | ||||||||||||||||||||||
| Platform | Android,iOS,Web | ||||||||||||||||||||||
| Type | Design language | ||||||||||||||||||||||
| License |
| ||||||||||||||||||||||
| Website | Latest Version Archived Versions | ||||||||||||||||||||||
Material Design (codenameQuantum Paper)[4] is adesign language developed byGoogle in 2014. Expanding on the "cards" UI that debuted inGoogle Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Google announced the initial version of Material Design on June 25, 2014, at the 2014Google I/O conference.[5]
The purpose of developing Material Design was to create a novel visual language, synthesizing the classic principles ofgood design with the innovation and possibility of technology and science. Head designerMatías Duarte explained that "unlike real paper, our digital material expands and reforms intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Material Design is based on paper-and-ink as well asskeuomorphic interaction concepts, but implementation happens in a more advanced manner.[6][7][8]
In 2018, Google revamped the language titled Material You (Material Design 3), providing more flexibility for designers to create custom themes with varying geometry, colors, and typography.[9]
In 2025, the next evolution of the design language, titled "Material 3 Expressive", was unveiled.[10]
Material Design have been gradually extended throughout Google's array of web and mobile products, providing a consistent experience across all platforms and applications. Google has also releasedapplication programming interfaces (APIs) for third-party developers to incorporate the design language into their applications.[11][12][13]
Thecanonicalopen source implementation of Material Design for web application user interfaces is called Material Web.[14]
After the 2018 revamp, Google began redesigning most of their apps based on an updated set of principles and guidelines dubbed "Material Design 2", which appeared onAndroid Pie.[15] It provided a larger focus on customization of the basic Material Design components to adapt to the branding of the products in which it is being used.[16] The updated guidelines further heavily emphasizes white space, rounded corners, colorful icons, and bottom navigation bars. Google began utilizing a special size-optimized version of their proprietaryProduct Sans font called Google Sans.[17]
AtGoogle I/O in May 2021, Google announced a new concept onAndroid 12 known as "Material You" (also known as "Material Design 3"[18]), emphasizing increased animation, larger buttons, and the ability for custom UI themes to be generated from the user's wallpaper.[19] Material You was gradually rolled out to various Google apps on older Android versions in the following months, and acted as a major focus on thePixel 6 andPixel 6 Pro smartphone series.[20][21][22]
AtThe Android Show: I/O Edition in May 2025, Google announced "Material 3 Expressive" forAndroid 16 andWear OS 6. This version of Material Design shares similarities to its predecessor but has increased animation and is more colorful and modern.[23] It was gradually rolled out toPixel phones (Pixel 6 and newer) and thePixel Tablet, beginning in September 2025.[24]
a subsidiary ofAlphabet | |||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
Italics denotediscontinued products. | |||||||||||||||||||||||||||||||||||||||||||||||||||||
