Material Design

Material Design is a design system or visual language that enables designers and developers achieve a unified UI/UX across devices and products. It's perhaps Google's first serious focus on design, rather than technology alone. By giving app creators design guidelines and tools, Google hopes to bring a consistent experience to users of its products and platforms, especially with Android.

Why "material"? Users feel and understand materials. By making design obey real-world effects at a level of abstraction, the interface will be more natural and intuitive to users. However, realism is not taken to the extreme like skeuomorphism. Material Design improves upon flat design by adding real-world effects. Materials have thickness. They cast shadows. They are solid and cannot pass through other materials. They obey laws of physics. These have been used in the creation of Material Design.

Discussion

What's the backstory for Material Design?
A comparison of different design philosophies. Source: Kline, 2015.
Early human-to-computer interfaces were command line interfaces. When graphical interfaces were invented in the 1980s, designers attempted to represent real-world objects digitally so that users could relate to icons and buttons due to their familiarity. Design elements had a sense of realism. We called this design philosophy skeuomorphism.
As users became tech savvy, such realism was no longer necessary. Meanwhile, better device displays allowed designers to add more details. In fact, too much detail can distract users from content and functionality. UI designs therefore moved towards minimalism that had solid colours, clear typography, no shadows and functional focus. This is what we called flat design. Its roots can be traced to the 1920s and later popularized by the Swiss Bauhaus School. Flat design was adopted by Microsoft Windows 8 (2012) and Apple's iOS7 (2013). With the rising popularity of mobile devices, flat design was easier for designers and users across device screen sizes.
Flat design had its critics for causing usability issues and limiting variety. What if we could combine elements skeuomorphism and flat design? Material Design does this by using material as the metaphor.
What are the key principles of Material Design?
We can identify three key principles:
- Material is the metaphor: By using shadows and animation, we create surfaces, edges, their relationships and their interactions. Inspired by materials and objects in the real world, Material Design aims to obey the laws of physics but also go beyond.
- Bold, graphic, intentional: The idea is to create immersive user experience while giving emphasis to user actions and core functionality. Typography, edge-to-edge imagery (without margins), ample whitespaces and bold colours are just some techniques to achieve this.
- Motion provides meaning: Motion must maintain focus and continuity of user experience even as objects transform and reorganize. It also provides useful feedback to user actions. User actions are seen as users giving energy to the UI.
Nick Summers has shared more details of the above principles.
What aspects of the interface does Material Design cover?
Material Design guidelines cover the following (and more):
- Motion: Duration, guided focus, path of movement, fading, etc.
- Style: Colour, icons, imagery, typography, etc.
- Layout: Units and measurements, floating action buttons, grids, spacing, layout structure, responsive layout, etc.
- Components: Buttons, cards, menus, lists, dividers, tabs, widgets, sliders, etc.
- Patterns: Launch screens, navigation, notifications, search, settings, scrolling, etc.
- Growth & communications: onboarding, feature discovery, gesture education, etc.
Why does pressing a button make it rise up from the surface?
A pressed button rises from the surface. Source: Adapted from https://i.stack.imgur.com/LzOSw.png
We normally think of a button as being raised from a surface in default mode. When pressed, it goes down towards the surface. In Material Design, buttons behave in the exact opposite manner. The z-axis property gives a component its elevation with respect to the surface. The surface is the digital device's display and components can only rise up (positive z values). Thus, button press should be seen as user interacting with the button and making it come towards the finger.
How is motion conveyed?
Material documentation states,
Motion in the world of Material Design is used to describe spatial relationships, functionality, and intention with beauty and fluidity.
Motion is inspired by physics with attention to gravity and friction. A ripple effect from the point of touch conveys user input. New surfaces emanate from components that create them. Transitions happen in arcs. Surfaces can be push, divide or join with each other. They can create hierarchy by interacting and stacking on top of each other with attention to surface thickness. Materials that grow, shrink or fade do so by decelerating or accelerating in time. Upward movement starts slow since we have to work against gravity and vice versa for downward movement. Transformations can originate from object's current location or from the center of final surface. Materials can move along any axes but z-movement is meant for user interaction.
What tools has Google released to help designers working on Material Design?
Apart from design guidelines, Google supports designers with many tools and resources:
- Gallery: A tool to manage design iterations and get feedback.
- Remixer: Collaborate in real-time by adjusting colours, animations and more on the fly.
- Resizer: An interactive viewer that helps designers test material design breakpoints across desktop, mobile, and tablet.
- Color Tool: Create colour palettes, test accessibility, preview and share.
- Device Metrics: A handy reference for sizing your UI across multiple devices.
- Stage: Allows for dynamic interfaces with interactive motion.
- Icons: A library of hundreds of material icons.
- Material Components: Provides modular and customizable Material Design UI components. It comes in variants of Android, iOS and Web.
Can you give some pointers for using Material Design in Android apps?
Android documentation talks about three goals:
- Enchant the user. Combine beauty and simplicity. Be crisp and meaningful with typography.
- Make life easier. Make the interface intuitive. Don't overwhelm.
- Amaze the user. Empower them to try new things and be inventive. Allow for new workflows.
Muneer gives more descriptions of the above.
Android comes with Material themes, lists, cards, and more. Shadows and layering can be created by using the Z property (surface elevation). A variety of Material animations can be used out of the box but developers can also create custom animations. In addition, a comprehensive Material Design training is available online.
What frameworks out there support Material Design?
Among the free Material Design CSS frameworks are Materialize, MUI, Surface and Material-UI. Material Design Lite and Material Components for the Web are frameworks from Google folks. Google's Polymer has a category named Paper that includes Material Design components.
Many frameworks add Material Design support for existing front-end frameworks: Viu for Meteor, Vuetify.js for Vue.js, ember-cli-materialize for Ember.js, Ionic Material for Ionic, Material-UI for React, Angular Material and LumX for Angular.js, Material Design for Bootstrap and Phonon Framework for Cordova.
Beyond frameworks, there's a curated list of 300+ Material Design resources that developers will find useful. This includes colour palettes, icon sets, fonts, layout templates, UI kits, widgets, backgrounds, wallpapers, articles, design inspirations and more. Since animation is important in Material Design, Paul Andrew provides a list of animated Material Design examples for inspiration.
Are there any criticisms of Material Design?
Developers used to flat design, may take more time to implement Material Design. They also have to learn and code for motion, which is an important design aspect. The design language is itself controlled by Google and not open sourced.
Nate Swanner has said that, "Material Design wants to make you feel as though you're touching something tangible, but you're not. You. Are. Tapping. A. Screen." He goes on say that he doesn't care for the 'clever' animations. Android apps running on iOS tend to use Material Design. This violates iOS platform conventions and angers iOS users. Also, a taste of Material Design within iOS is unlikely to influence users to switch to Android.
Rune Madsen gives specific examples of Material Design where Google's rules of design either constrain designers or simply ignore how designers actually work. For example, designers should be allowed to use bright colours for body text if they want to. The design guidelines also tend to enforce a certain style that's hard to break away from. Designers will be stuck with Google's branding. For that matter, Google itself is not adhering to the Material Design guidelines.
Are there any criticisms of design systems in general?
A criticism of design systems is that they create a design monoculture. They also tend to benefit the designer more than the user. Users will obey a horrible system rather than complain. In fact, one Google designer stated that, "Material Design is a way for designers to get what they want."
In 2018, Google addressed some of this criticism by allowing users to customize the styling while retaining the consistency, usability and discoverability of Material Design. So it's not just about design guidelines but also about tools to adapt to specific design needs and branding.
In contrast, Amazon did not have a well-documented design system. Rather, it evolved an effective UI based on user feedback and continuous improvement.
Could you compare Material Design with its alternatives?
Historically, we've had skeuomorphism and flat design for digital user interfaces. Flat design is more performant than skeuomorphism and distraction-free. But it may look boring and have usability issues. Skeuomorphism may look too real, distract users from content and render slower. Material Design combines the best of both. It has good documentation but developers may feel constrained by what Google considers as right.
It's been said that between flat design and Material Design, the differences are subtle, yet critical. While Material Design is still flat, it considers the third dimension along the z-axis. Material Design attempts to bring the real and the digital worlds closer. It's richer in interaction and user experience.
IBM Design Language is an alternative that's been commented as a copy of Material Design. In 2010, Microsoft introduced Metro design language that uses flat design and typography. An evolution of Metro is Microsoft's Fluent Design, which was applied to Windows 10 in October 2017.

Milestones

2007

Some Google designers attempt to create a unified design across the company's products and platforms. It is named Kanna. The project doesn't take off due to lack of management support.

2011

The new Gmail (on the right) after redesign using Material Design. Source: Adapted from NBC News, 2014.

The growth of compute power and broadband access gives UI/UX increasing importance. Mobile forces design to be taken seriously. Project Strawman aims to "redesign Google". Gmail is redesigned with flatter buttons, and more whitespace and margin. A year later, Google Now uses cards and well-designed typography. These changes are elements of what later becomes Material Design.

Jun
2014

Originally codenamed Quantum Paper, Google announces Material Design at its annual developer conference, Google I/O, in San Francisco. In November 2014, Android Lollipop becomes the first Android release to use Material Design.

Apr
2016

Faiz Malkani states that Material Design has not achieved a grand unification it hoped for. He concludes that it can happen only if Material Design sheds the "Google branding" and looks beyond Android.

Oct
2016

Material Design gets a new website to bring together guidelines, tools and resources in one place.

Dec
2016

Since the spec is a living document, it's frequently updated. In 2016, this is when the last of five updates to Material Design guidelines is released.

Apr
2017

Google releases Color Tool for designers working with Material Design. Designers can create new colour schemes, test accessibility and preview colours with this.

Mar
2018

Google is reportedly testing Material Design for its Search but it appears that only some users are seeing this new layout.

May
2018

At Google I/O, Google announces that designers can customize material components for their product. Tool such as Material Theme editor, icon packs and colour palettes enable this. The idea is to separate functionality from styling so that all apps don't end up looking the same. As an example, Google releases GMail with such a customized Material Design.

Oct
2021

Google announces that it's dropping Material Design UI components for its iOS apps in favour of Apple's UIKit. This is to save Google developers extra work in customizing Material Design to Apple's framework. Going forward, Google's iOS apps will begin to look more like iOS apps than Android apps.

References

Article Stats

2050

Words

Authors

Edits

Chats

Likes

11K

Hits

Cite As

Devopedia. 2022. "Material Design." Version 8, February 15. Accessed 2024-06-26. https://devopedia.org/material-design

Contributed by
4 authors

Last updated on
2022-02-15 11:49:22

Improve this article

design languages frontend user experience

Material Components
Materialize
Material-UI
Skeuomorphism
Flat Design
Fluent Design

Material Design

Discussion

Milestones

References

Further Reading

Article Stats

Cite As

See Also

Material Design

Discussion

Milestones

References

Further Reading

Article Stats

Author-wise Stats for Article Edits

Cite As

See Also

Article Warnings

Login