Google Material Design

Google Material Design

“We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design”

Material design is a conceptual philosophy developed by the design team at Google to help designers create websites and apps that are accessible, practical and usable. It’s finer points are detailed in a living document that is publicly available, and it’s one of the more influential visual philosophies in web design, shaping the way people design and adopt new interfaces because of its clear usability guidelines. The visual language has rules for layout, style, animation, components, patterns and usability. The specifications define color palettes and typography, as well as provide layout examples for download.

According to Google, the goal of Material Design is to create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology, and develop an underlying system that unifies the different experiences across platforms and devices.

Overview

Google Material Design

Material serves as a container of information. It is expandable, collapsable and reforms based on user actions.

Image credit: Google

Material is the metaphor

Material Design is based on a theory of rationalized space. “Material” is inspired by paper and ink, rooted in tactility but open to imagination and magic. The surfaces and edges of material provide visual cues that help users quickly understand affordances. Yet the flexibility of material – its ability to expand and reform intelligently – supersede those in the physical world. Fundamentals of light, surface and movement convey to users how objects move, interact and exist in space.

Bold, Graphic, Intentional

The foundational elements of print-based design drive the language behind Material Design: grids, typography, space, scale, colour. These elements create hierarchy, meaning and focus. Deliberate palette choices, edge to edge imagery, large-scale typography and white-space create a bold and graphic interface that immerse the user.

Google Material Design Motion

Image credit: Jovie Brett

Motion provides meaning

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle, yet clear. Transitions are efficient yet coherent. Objects are presented to the user without breaking the continuity of the experience, even as they transform and reorganize.

Google Material Design Breakpoints

Image credit: Google

Material is Adaptive

All of Google’s guidelines actually encourage a designer to work with an adaptive layout. When thinking about layered interfaces it’s important to consider how the elements relate to one another.

Google recommends its standards because of a “flexible grid that ensures consistency across layouts, breakpoint details and how content reflows on different screens and a description of how an app can scale from small to extra-large screens.

Considerations include:

  • Breakpoints: Widths include 480, 600, 840, 960, 1280, 1440 and 1600 pixels
  • Grid: 12-column layout with margins and gutters (8, 16, 24, or 40 pixels) and a baseline grid
  • Surface behaviors: UI adapts to the type of screen so that surfaces are visible or toggled to hide
  • Patterns: Function is based on screen size, including reveal, transform, expand, reflow and divide

 

Google Material Design React UI Kit

Image credit: Material UI

Implementation

Material Design itself was announced on June 25th, 2014, at the I/O developer conference. As of 2015, most of Google’s mobile applications for android had applied the new design language including Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox, and to some extent the Chrome browser and Google Keep. In July of 2015 Google released a UI kit Material Design Lite, so that any website or app developer could make their products look more like android apps. Precisely because Material Design is simple, clean and performs well across all devices, we see it being adopted by designers across a variety of products, including some of our own work here at A.Y. Technologies.

Our project Rockstart implements the Google Material Design philosophy and was built using a css framework that makes use of Facebook’s React components called Material UI. Its a robust framework with excellent documentation, however, if you’re not comfortable with Facebook’s React, some developers find its JSX syntax unconventional. You can find the Material UI repository here.

An evolution of flat design, Material Design is a useful and very specific guide to designing UI solutions. Designers should be familiarizing themselves with and absorbing the guidelines that Google has released. However, designer’s shouldn’t feel pressured to adhere to Google’s guidelines. Every design challenge presents a unique set of circumstances that may require modification or customization to ensure the best experience. As well as in the case of colour and typography, Google Material Design has finite palette options that might not align with a design’s requirements. The same can be said for typography, as Material Design states 2 typefaces for Android and Chrome, Roboto and Noto respectively. Although they provide variety as full font families, in different scenarios a wider variety of typefaces may be desired or required. As always, designers should take the guidelines as simply that, and not rigid dogma.

Lesley Anderson

Lesley Anderson

UX/UI Designer at A.Y. Technologies
Lesley is a caffeine dependent life-form with an eye for pixel perfection. Her skill set is varied, including user experience design, user interface design, creative strategy and content creation. She helps clients discover the behaviours and expectations of their audiences and opportunities for lasting impressions.
Lesley Anderson

Latest posts by Lesley Anderson (see all)

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

©2019 A.Y.Technologies

Log in with your credentials

Forgot your details?