Material Design

Last updated
Material Design
Developer(s) Google
Initial releaseJune 25, 2014;10 years ago (2014-06-25)
Release(s)
Stable release(s) [±]
Android 1.11.0 [1]   OOjs UI icon edit-ltr-progressive.svg / 14 December 2023;8 months ago (14 December 2023)
iOS 124.2.0 [2]   OOjs UI icon edit-ltr-progressive.svg / 26 April 2021;3 years ago (26 April 2021)
Web 14.0.0 [3]   OOjs UI icon edit-ltr-progressive.svg / 28 April 2022;2 years ago (28 April 2022)
Written in HTML, CSS, Sass (v4), JavaScript, AngularJS, Angular, Java, Objective-C, Swift, Dart
Platform Android, iOS, Web
Type Design language software
License
WebsiteLatest Version

Archived Versions

Material Design (codenamed Quantum Paper) [4] is a design language developed by Google in 2014. Expanding on the "cards" 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 Material Design on June 25, 2014, at the 2014 Google I/O conference. [5]

Contents

The main purpose of Material Design is the creation of a new visual language that combines principles of good design with technical and scientific innovation. Designer Matías Duarte explained that, "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch." Google states that their new design language is based on paper and ink but implementation takes place in an advanced manner. [6] [7] [8]

In 2018, Google detailed a revamp of the language, with a focus on providing more flexibility for designers to create custom "themes" with varying geometry, colors, and typography. In 2021, a further evolution of the design language, titled Material You, was unveiled. [9]

Implementation

Material Design was to be gradually extended throughout Google's array of 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. [10] [11] [12]

The canonical open source implementation of Material Design for web application user interfaces is called Material Web. [13]

Updates

Material Design 2.svg
Material Design 2
Material Design 3.svg
Material You

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", [14] which 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. [15] 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 proprietary Product Sans font called Google Sans. [16]

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" [17] ), emphasizing increased animation, larger buttons, and the ability for custom UI themes to be generated from the user's wallpaper. [9] 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. [18] [19] [20]

See also

Related Research Articles

A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.

<span class="mw-page-title-main">Roboto</span> Open-source typeface family

Roboto is a neo-grotesque sans-serif typeface family developed by Google as the system font for its mobile operating system Android, and released in 2011 for Android 4.0 "Ice Cream Sandwich".

<span class="mw-page-title-main">Sidebar (computing)</span> User interface element on side of computer screen

The sidebar is a graphical control element that displays various forms of information to the right or left side of an application window or operating system desktop. Examples of the sidebar can be seen in the Opera web browser, Apache web OpenOffice, LibreOffice, SoftMaker Presentations and File Explorer; in each case, the app exposes various functionalities via the sidebar.

<span class="mw-page-title-main">Google Play</span> Digital distribution service by Google

Google Play, also known as the Google Play Store or Play Store and formerly known as Android Market, is a digital distribution service operated and developed by Google. It serves as the official app store for certified devices running on the Android operating system and its derivatives, as well as ChromeOS, allowing users to browse and download applications developed with the Android software development kit and published through Google. Google Play has also served as a digital media store, offering games, music, books, movies, and television programs. Content that has been purchased on Google Play Movies & TV and Google Play Books can be accessed on a web browser and through the Android and iOS apps.

Flat design is a minimalist design language or design style commonly used in graphical user interfaces (GUI), and also in graphical materials such as posters, arts, guide documents and publishing products.

<span class="mw-page-title-main">Android TV</span> Android operating system version for television sets and digital media players

Android TV is a smart TV operating system based on Android and developed by Google. It is available on television sets, soundbars, set-top boxes and digital media players. A successor to Google TV, it features a user interface designed around content discovery and voice search, content aggregation from various media apps and services, and integration with other recent Google technologies such as Assistant, Cast, and Knowledge Graph.

<span class="mw-page-title-main">Android Lollipop</span> Fifth major version of the Android operating system

Android Lollipop is the fifth major version of the Android mobile operating system developed by Google and the 12th version of Android, spanning versions between 5.0 and 5.1.1.

<span class="mw-page-title-main">Android Auto</span> Mobile app providing a vehicle-optimized user interface

Android Auto is a mobile app developed by Google to mirror features of a smartphone on a car's dashboard information and entertainment head unit.

<span class="mw-page-title-main">Product Sans</span> Geometric sans-serif typeface

Product Sans is a contemporary geometric sans-serif typeface created by Google for branding purposes. It replaced the old Google logo on September 1, 2015. As Google's branding was becoming more apparent on a multitude of kinds of devices, Google sought to adapt its design so that its logo could be portrayed in constrained spaces and remain consistent for its users across platforms.

<span class="mw-page-title-main">Fuchsia (operating system)</span> Computer operating system by Google

Fuchsia is an open-source capability-based operating system developed by Google. In contrast to Google's Linux-based operating systems such as ChromeOS and Android, Fuchsia is based on a custom kernel named Zircon. It publicly debuted as a self-hosted git repository in August 2016 without any official corporate announcement. After years of development, its official product launch was in 2021 on the first-generation Google Nest Hub, replacing its original Linux-based Cast OS.

<span class="mw-page-title-main">Fluent Design System</span> Design system created by Microsoft in 2017

Fluent Design System, officially unveiled as Microsoft Fluent Design System, is a design language developed in 2017 by Microsoft. Fluent Design is a revamp of Microsoft Design Language that includes guidelines for the designs and interactions used within software designed for all Windows 10 and Windows 11 devices and platforms. The system is based on five key components: light, depth, motion, material, and scale. The new design language includes more prominent use of motion, depth, and translucency effects.

Flutter is an open-source UI software development kit created by Google. It can be used to develop cross platform applications from a single codebase for the web, Fuchsia, Android, iOS, Linux, macOS, and Windows. First described in 2015, Flutter was released in May 2017. Flutter is used internally by Google in apps such as Google Pay and Google Earth as well as other software developers including ByteDance and Alibaba.

<span class="mw-page-title-main">Files (Google)</span> File management software

Files is a file management app developed by Google for file browsing, media consumption, storage clean-up and offline file transfer. It was released by Google on December 5, 2017 with a custom version for China being released on May 30, 2018.

<span class="mw-page-title-main">One UI</span> Software overlay by Samsung Electronics Limited

One UI is a user interface (UI) developed by Samsung Electronics for its Android devices running Android 9 "Pie" and later. Succeeding Samsung Experience, it is designed to make using larger smartphones easier and be more visually appealing. It was announced at Samsung Developer Conference in 2018, and was unveiled in Galaxy Unpacked in February 2019 alongside the Galaxy S10 series, Galaxy Buds and the Galaxy Fold.

<span class="mw-page-title-main">Google Podcasts</span> Podcast application

Google Podcasts was a podcast application developed by Google and released on June 18, 2018, for Android devices, and released on iOS devices in March 2020.

<span class="mw-page-title-main">Google Chat</span> Enterprise messaging software developed by Google

Google Chat is a communication service developed by Google. Initially designed for teams and business environments, it has since been made available for general consumers. It provides direct messaging, group conversations, and spaces, which allow users to create and assign tasks and share files in a central place in addition to chatting. It can be accessed through its own website and app or through the Gmail website and app.

<span class="mw-page-title-main">Google Messages</span> Messaging application developed by Google

Google Messages is a text messaging software application developed by Google for its Android and Wear OS mobile operating systems, while it's also available via the Web.

Windows 11 is the current major release of Microsoft's Windows NT operating system. Released on October 5, 2021, Windows 11 succeeds the previous major release, Windows 10.

References

  1. "Release 1.11.0". 14 December 2023. Retrieved 19 December 2023.
  2. "Release 124.2.0". 26 April 2021. Retrieved 18 May 2021.
  3. "Release 14.0.0". 28 April 2022. Retrieved 28 October 2022.
  4. "Exclusive: Quantum Paper And Google's Upcoming Effort To Make Consistent UI Simple". Techcrunch. 11 June 2014. Retrieved 11 June 2014.
  5. "Material design". PopArt Studio. Retrieved 10 April 2024.
  6. "Google's new 'Material Design' UI coming to Android, Chrome OS and the web". Engadget. Retrieved 26 June 2014.
  7. "Google's New, Improved Android Will Deliver A Unified Design Language". Co.Design. 25 June 2014. Retrieved 26 June 2014.
  8. "Google Reveals Details About Android L at Google IO". Anandtech. Retrieved 26 June 2014.
  9. 1 2 Bohn, Dieter (2021-05-18). "Android 12 preview: first look at Google's radical new design". The Verge. Retrieved 2021-05-19.
  10. Chris Smith (30 July 2014). "Google's Material Design is about to change the way we look at the worldwide web". BGR.
  11. "We just played with Android's L Developer Preview". Engadget. AOL. Retrieved 26 June 2014.
  12. "Google's next big Android redesign is coming in the fall". The Verge. Vox Media. 25 June 2014. Retrieved 26 June 2014.
  13. "Web – Material Design 3". Archived from the original on 2023-09-08.
  14. Hall, Stephen (2018-04-26). "What exactly is this so-called 'Material Design 2,' and what will it look like?". 9to5Google . Retrieved 2020-09-06.
  15. "Material Design". Material Design. Retrieved 2020-09-06.
  16. Hall, Stephen (2018-05-09). "Now we know: Google Sans is actually a size-optimized version of Product Sans". 9to5Google . Retrieved 2020-09-06.
  17. Material Design [@materialdesign] (October 27, 2021). "🎊 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" (Tweet). Retrieved October 27, 2021 via Twitter.
  18. Warren, Tom (September 10, 2021). "Google's Material You design is coming to Gmail, Calendar, and Docs on Android". The Verge . Retrieved September 19, 2021.
  19. Li, Abner (September 15, 2021). "Google Photos rolling out Material You redesign, but without Dynamic Color". 9to5Google . Retrieved September 19, 2021.
  20. "Google Contacts is already getting its Material You UI makeover". Android Police. 2021-07-29. Retrieved 2021-09-19.