Material Design

{{short description|Design language developed by Google}} {{confused|Materials & Design|materials science|industrial design}} {{Infobox software | name = Material Design | logo = Google Material Design Logo.svg | caption = Material Design 3 on Android 12 | logo size = 100px | screenshot = 270px | collapsible = Yes | screenshot upright = 350×250 | screenshot size = 250×250 | developer = Google | released = {{Start date and age|2014|6|25}} {{collapsed infobox section begin |Release(s) | titlestyle = background-color:#eee }} | ver layout = stacked | repo = {{Plainlist| * '''Web''': {{GitHub|https://github.com/material-components/material-components-web|link = hidden}} * '''Android''': {{GitHub|https://github.com/material-components/material-components-android|link = hidden}} * '''iOS''': {{GitHub|https://github.com/material-components/material-components-ios|link = hidden}} * '''Flutter''': {{GitHub|https://github.com/material-components/material-components-flutter|link = hidden}} }} {{collapsed infobox section end}} | programming language = HTML, CSS, Sass (v4), JavaScript, AngularJS, Angular, Java, Objective-C, Swift, Dart | platform = Android, iOS, Web | website = Latest Version *[https://m3.material.io/ Material Design 3] Archived Versions *[https://m1.material.io/ Material Design 1] *[https://m2.material.io/ Material Design 2] | genre = Design language | license = {{Plainlist| * Android, iOS: Apache-2.0 License * Flutter: BSD-3-Clause License * Web: MIT License }} }}

'''Material Design''' (codenamed '''Quantum Paper''')<ref>{{cite web|title= Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple|url= http://www.androidpolice.com/2014/06/11/exclusive-quantum-paper-and-googles-upcoming-effort-to-make-consistent-ui-simple/|website=Techcrunch|date= 11 June 2014|access-date= 11 June 2014}}</ref> is a design language developed by Google in 2014. Expanding on the "cards" UI that debuted in Google 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 2014 Google I/O conference.<ref>{{cite web|title= Material design|url= https://www.popwebdesign.net/material-design.html|website=PopArt Studio|access-date= 10 April 2024}}</ref>

The purpose of developing Material Design was to create a novel visual language, synthesizing the classic principles of good design with the innovation and potential of technology and science. Head designer Matí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 and skeuomorphic interaction concepts, but its implementation is more advanced.<ref>{{cite web|url=https://www.engadget.com/2014/06/25/googles-new-design-language-is-called-material-design/|title=Google's new 'Material Design' UI coming to Android, Chrome OS and the web|website=Engadget|date=25 June 2014 |access-date=26 June 2014}}</ref><ref>{{cite web|url=http://www.fastcodesign.com/3032378/googles-new-improved-android-will-deliver-a-unified-design-language|title=Google's New, Improved Android Will Deliver A Unified Design Language|website=Co.Design|date=25 June 2014 |access-date=26 June 2014}}</ref><ref>{{cite web|url=http://www.anandtech.com/show/8207/google-reveals-details-about-android-l-at-google-io|archive-url=https://web.archive.org/web/20140628013652/http://anandtech.com/show/8207/google-reveals-details-about-android-l-at-google-io|url-status=dead|archive-date=June 28, 2014|title=Google Reveals Details About Android L at Google IO|website=Anandtech|access-date=26 June 2014}}</ref>

In 2021, Google revamped the design language, with the new language being titled Material You (Material Design 3).<ref>{{cite web |url=https://medium.com/@sotti/android-design-history-material-design-3-material-you-9088dbe448f4 |title=Android Design History — Material Design 3: Material You |author=Pablo Costa |date=October 19, 2025}}</ref> It provides more flexibility for designers to create custom themes with varying geometry, colors, and typography.<ref>{{Cite web |title=Material Design |url=https://m2.material.io/ |access-date=2025-06-03 |website=Material Design |language=en}}</ref>

In 2025, the next evolution of the design language, titled "Material 3 Expressive", was unveiled.<ref>{{Cite web |title=Material Design |url=https://m3.material.io/ |access-date=2025-06-03 |website=Material Design |language=en}}</ref>

== Implementation == Material Design has been gradually rolled out across Google's web and mobile products, providing a consistent experience across all platforms and applications. Google has also released application programming interfaces (APIs) for third-party developers to incorporate the design language into their applications.<ref>{{cite web|author=Chris Smith|date=30 July 2014|title=Google's Material Design is about to change the way we look at the worldwide web|url=http://bgr.com/2014/07/30/google-drive-material-design-update/|publisher=BGR}}</ref><ref>{{cite web|title=We just played with Android's L Developer Preview|url=https://www.engadget.com/2014/06/26/android-developer-preview-hands-on/|access-date=26 June 2014|website=Engadget|date=26 June 2014 |publisher=AOL}}</ref><ref>{{cite web|title=Google's next big Android redesign is coming in the fall|url=https://www.theverge.com/2014/6/25/5841302/google-announces-the-next-android|access-date=26 June 2014|website=The Verge|date=25 June 2014 |publisher=Vox Media}}</ref>

The canonical open source implementation of Material Design for web application user interfaces is called Material Web.<ref>{{cite web |title=Web – Material Design 3 |url=https://m3.material.io/develop/web |url-status=live |archive-url=https://web.archive.org/web/20230908161851/https://m3.material.io/develop/web |archive-date=2023-09-08}}</ref> However, there are other official ways to do so, such as, for example, using Flutter<ref>{{Cite web |title=Material Design 3 for Flutter |url=https://m3.material.io/develop/flutter |access-date=2026-03-28 |website=Material Design |language=en}}</ref> or Jetpack Compose<ref>{{Cite web |title=Material Design 3 for Jetpack Compose |url=https://m3.material.io/develop/android/jetpack-compose |access-date=2026-03-28 |website=Material Design |language=en}}</ref>.

== Updates == {{multiple image | align = right | image1 = Material Design 2.svg | width1 = 127 | caption1 = {{align|left|Material Design 2 (2018)}} | image2 = Material Design 3.svg | width2 = 127 | caption2 = {{align|left|Material Design 3 (2021)}} }}

=== Material Design 2 === 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 on Android Pie.<ref>{{Cite web|last=Hall|first=Stephen|date=2018-04-26|title=What exactly is this so-called 'Material Design 2,' and what will it look like?|url=https://9to5google.com/2018/04/26/what-is-material-design-2-examples-launch-io/|access-date=2020-09-06|website=9to5Google|language=en-US}}</ref> 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.<ref>{{Cite web|title=Material Design|url=https://material.io/blog/google-material-custom-theme/|access-date=2020-09-06|website=Material Design|language=en}}</ref> The updated guidelines further heavily emphasize white space, rounded corners, colorful icons, and bottom navigation bars. Google began utilizing a special size-optimized version of their proprietary Product Sans font called Google Sans.<ref>{{Cite web|last=Hall|first=Stephen|date=2018-05-09|title=Now we know: Google Sans is actually a size-optimized version of Product Sans|url=https://9to5google.com/2018/05/09/google-sans-vs-product-sans/|access-date=2020-09-06|website=9to5Google|language=en-US}}</ref>

=== Material Design 3 (Material You) === At Google I/O in May 2021, Google announced a new concept on Android 12 known as "Material You" (also known as "Material Design 3"<ref>{{Cite tweet |author=Material Design |user=materialdesign |number=1453409331697885192 |date=October 27, 2021 |title=The latest in Material Design is NOW available. With Material Design 3, our next generation of the system, we're introducing Material You — a new set of features that help make your apps more personalized. Give it a try → goo.gle/m3-material-io #AndroidDevSummit |access-date=October 27, 2021 }}</ref>), emphasizing increased animation, larger buttons, and the ability for custom UI themes to be generated from the user's wallpaper.<ref name="materialyou-theverge">{{Cite web|last=Bohn|first=Dieter|date=2021-05-18|title=Android 12 preview: first look at Google's radical new design|url=https://www.theverge.com/22439777/android-12-design-features-widgets-first-look-google|access-date=2021-05-19|website=The Verge|language=en}}</ref> 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 the Pixel 6 and Pixel 6 Pro smartphone series.<ref>{{Cite web |last=Warren |first=Tom |date=September 10, 2021 |title=Google's Material You design is coming to Gmail, Calendar, and Docs on Android |url=https://www.theverge.com/2021/9/10/22666355/google-material-you-design-gmail-calendar-docs-android |access-date=September 19, 2021 |website=The Verge}}</ref><ref>{{Cite web |last=Li |first=Abner |date=September 15, 2021 |title=Google Photos rolling out Material You redesign, but without Dynamic Color |url=https://9to5google.com/2021/09/15/google-photos-material-you/ |access-date=September 19, 2021 |website=9to5Google}}</ref><ref>{{Cite web |date=2021-07-29 |title=Google Contacts is already getting its Material You UI makeover |url=https://www.androidpolice.com/2021/07/29/google-contacts-is-already-getting-its-material-you-ui-makeover/ |access-date=2021-09-19 |website=Android Police}}</ref>

=== Material 3 Expressive === At The Android Show: I/O Edition in May 2025, Google announced "Material 3 Expressive" for Android 16 and Wear OS 6. This version of Material Design shares similarities with its predecessor, and includes improved animations and a more colorful and fun design.<ref>{{Cite web |date=2025-05-13 |title=Android and Wear OS are getting a big refresh |url=https://blog.google/products/android/material-3-expressive-android-wearos-launch/ |access-date=2025-05-13 |website=Google |language=en-us}}</ref> It was gradually rolled out to Pixel phones (Pixel 6 and newer) and the Pixel Tablet, beginning in September 2025.<ref>{{Cite web |last=Malik |first=Aisha |date=2025-09-03 |title=Google brings Material 3 Expressive to Pixel 6 and newer devices, along with other features |url=https://techcrunch.com/2025/09/03/google-brings-material-3-expressive-to-pixel-6-and-newer-devices-along-with-other-features/ |access-date=2025-09-12 |website=TechCrunch |language=en-US}}</ref>

== References == {{Reflist}}

== External links == {{Commons category}} * {{Official website}} ** [https://m1.material.io/ Material Design 1] ** [https://m2.material.io/ Material Design 2] ** [https://m3.material.io Material Design 3]

Category:2014 software Category:Graphical user interface design languages Category:Google Category:Touch user interfaces