Google's Material Design And App Quality Guidelines

Material Design is an Android-oriented design language created by Google, supporting onscreen touch experiences via cue-rich features and natural motions that mimic real-world objects. Designers optimize users' experience with 3D effects, realistic lighting and animation features in immersive, platform-consistent GUIs.

See how Material Design fits into UX design.

Material Design – Why Users trust "Realer" Interfaces

Material Design emerged as Google's brainchild in mid-2014, codenamed "Quantum Paper" and representing a fresh "ink-and-pen" approach. With Material Design, the goal is to deliver high-quality output consistently across platforms, giving users control over clearly indicated, pleasant-looking components that behave like real-world objects. Unlike the portrayal of culture-relevant items (e.g., wastebaskets) in skeuomorphism, with Material Design designers apply basic, natural laws from the physical world, principally concerning lighting and motion. The idea is that by mimicking the physical world, we reduce users' cognitive loads through careful attention to layout, visual language and pattern library, maximizing predictability and eliminating ambiguity. Material Design's "card" concept serves as a system for layering elements and animations; it also permits a more personalized experience (e.g., showing followers on Twitter).

"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."
— Matias Duarte, VP of Material Design at Google

It's vital for Material Design to meet users' expectations of how components should behave. For instance, onscreen objects are more credible if they follow the laws of gravity.

Author/Copyright holder: Google LLC. Copyright terms and licence: Fair Use

Three simple elements – one instant message

"Magical" and "Predictable" – an Indispensable Paradox

To apply Material Design effectively, you need to understand these principles:

The metaphor of material
You take the concept of tactile reality, and you:
- Design to offer users attributes they find familiar as affordances. Immediately recognizable real-world features such as buttons should instantly let users see what to do. Surfaces and seams/edges must complement these by offering hints. Use realistic light/shadowing to divide the design space and reveal moving parts.
- Use an adaptive design – ensure hierarchy, colors, icons and spatial proportions are consistent across all devices through adaptive version selection.
Bold, graphic and well-chosen elements add meaning and are pleasing to the eye
- Make designs bold so users notice hierarchy instantly and can focus and draw appropriate meanings. Excellent color and whitespace use, strong imagery and large typography across the screen help users become immersed in the experience.
- Design to prompt users to act, and show functionality by emphasizing icons and surfaces as cues.
Make messages with motion
- Put users in control by showing changes resulting directly from their actions.
- Make animations play out in a single environment/stage, in continuous flowing movements.
- Ensure responses are clear, but subtle: no jerky/unpredictable movements.

It's critical to combine bold, deliberate design choices with subtlety regarding their natural reactions to user input. For example, if the user drops a selected item into a group of objects, the latter should move aside, accommodating it. In Material Design we try not to let objects do magical things, such as vanish or move on their own. Instead, we translate the familiarity of the limited, physical world onto screens that have unlimited potential. YouTube's infinite scrolling exemplifies this.

Author/Copyright holder: Google LLC. Copyright terms and licence: Fair Use

Using contrasting surface fills to depict elevation

Material Design, Redesigned

In May 2018, Google released a revised version to remedy a major problem – the original guidelines were restrictive, emphasizing function over style. Because apps created in line with these looked alike, many app makers disliked Material Design. Google had to balance Material Design's consistency with the capacity for differentiation – to grant designers the flexibility to adapt it to brand needs. Version 2 features not only new guidelines but also a tool suite (including new icon packs and a Material Theme editor) you can use to customize your designs. Therefore, you can fine-tune aesthetics to suit your organization's brand presence while you build on the foundation of timeless natural laws.

Author/Copyright holder: Google LLC. Copyright terms and licence: Fair Use

2DP outlined icons for maximum readability wherever you apply them

Learn More about Material Design

You'll find Google's Material Design guidelines and library here: https://design.google/resources/ and here: https://material.io/design/

Learn how to create interfaces that mimic real-world objects: https://www.interaction-design.org/courses/how-to-create-intuitive-products-by-imitating-physicality

A detailed piece on standing out with Material Design: https://usabilitygeek.com/10-guidelines-material-design/

An enlightening do's-and-don'ts guide to Material Design: https://uxplanet.org/dont-risk-making-a-crappy-ui-use-material-design-520ebaceffe4