Material design
   HOME

TheInfoList



OR:

Material Design (codenamed Quantum Paper) is a
design language 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. Objectives Designers wishing to give their su ...
developed by
Google Google LLC () is an American Multinational corporation, multinational technology company focusing on Search Engine, search engine technology, online advertising, cloud computing, software, computer software, quantum computing, e-commerce, ar ...
in 2014. Expanding on the "cards" that debuted in
Google Now Google Now was a feature of Google Search of the Google app for Android and iOS. Google Now proactively delivered information to users to predict (based on search habits and other factors) information they may need in the form of informational ...
, 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 Google I/O (or simply I/O) is an annual developer conference held by Google in Mountain View, California. "I/O" stands for Input/Output, as well as the slogan "Innovation in the Open". The event's format is similar to Google Developer Day. Hi ...
conference. 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. 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. Google released Material Theme Editor exclusively for the
macOS macOS (; previously OS X and originally Mac OS X) is a Unix operating system developed and marketed by Apple Inc. since 2001. It is the primary operating system for Apple's Mac computers. Within the market of desktop and la ...
design application Sketch.


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 interface An application programming interface (API) is a way for two or more computer programs to communicate with each other. It is a type of software interface, offering a service to other pieces of software. A document or standard that describes how ...
s (APIs) for third-party developers to incorporate the design language into their applications. The canonical implementation of Material Design for web application user interfaces is called
Polymer A polymer (; Greek '' poly-'', "many" + '' -mer'', "part") is a substance or material consisting of very large molecules called macromolecules, composed of many repeating subunits. Due to their broad spectrum of properties, both synthetic a ...
. It consists of the Polymer library, a
shim Shim may refer to: * Shim (spacer), a thin and often tapered or wedged piece of material ** CPU shim, a spacer for a computer heat sink ** Shim (fencing), a device used in the sport fencing ** Shim (lock pick), a tool used to bypass padlocks * Sh ...
that provides a
Web Components Web Components are a set of features that provide a standard component model for the Web allowing for encapsulation and interoperability of individual HTML elements. Primary technologies used to create them include: * Custom Elements: APIs to ...
API for browsers that do not implement the standard natively, and an elements catalog, including the "paper elements collection" that features visual elements of the Material Design. Google also has created an accompanying icon set licensed under the Apache 2.0 license.


Updates

After the 2018 revamp, Google began redesigning most of their apps into a customized and adapted version of Material Design called the Google Material Theme, also dubbed "Material Design 2", which heavily emphasizes white space, rounded corners, colorful icons, bottom navigation bars, and utilizes a special size-condensed version of Google's proprietary
Product Sans 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, Goo ...
font called Google Sans. At
Google I/O Google I/O (or simply I/O) is an annual developer conference held by Google in Mountain View, California. "I/O" stands for Input/Output, as well as the slogan "Innovation in the Open". The event's format is similar to Google Developer Day. Hi ...
in May 2021, Google announced a new concept on
Android 12 Android 12 is the twelfth major release and 19th version of Android, the mobile operating system developed by the Open Handset Alliance led by Google. The first beta was released on May 18, 2021. Android 12 was released publicly on October ...
known as "Material You" (also known as "Material Design 3"), emphasizing increased animation, larger buttons, and the ability for custom UI themes to be generated from the user's wallpaper. 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 The Pixel 6 and Pixel 6 Pro are a pair of Android smartphones designed, developed, and marketed by Google as part of the Google Pixel product line. They collectively serve as the successor to the Pixel 5. The phones were first previewed in A ...
and Pixel 6 Pro smartphone series.


See also

* Carbon Design System by IBM *
Flat design Flat design is a minimalist design language or design style commonly used in graphical user interfaces (GUI) (such as web applications and mobile apps), and also in graphical materials such as posters, arts, guide documents and publishing pr ...
*
Fluent Design System Fluent Design System (codenamed "Project Neon"), 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 (popularly known as "Metro") ...
* Human interface guidelines *
Metro (design language) Microsoft Design Language (or MDL), previously known as Metro, is a design language created by Microsoft. This design language is focused on typography and simplified icons, absence of clutter, increased content to chrome ratio ("content be ...


References


External links

* {{Google Inc. Computer-related introductions in 2014 Design language Google Graphical user interfaces Touch user interfaces