Different cover for file packs

Work smarter, not harder with Google’s Material Design

Google has been slowly taking over the internet—and the world—for some time now. On average, Google processes 40,000 search queries every second, which translates to over 3.5 billion searches per day. And as of December 2016, Google and its parent company Alphabet, Inc. have acquired over 200 companies in and around the San Francisco Bay Area. Thankfully, in its crawl towards total domination, Google hasn’t forgotten about design.

At the 2014 Google I/O conference, Google introduced Material Design—a design language that seeks to combine the principles of good design with the reality of technology and web. Their hope was to provide a unifying user experience across the entire platform of Google apps and integrations, especially when moving from platform to platform and device to device.

This language was created out of an internal, personal need for the Google design team. With the move to a flatter Gmail UI in 2011 and a card-based system for Google Now in 2012, the team started to build the framework for Material Design. This largely entailed the use of spaces and shadows to highlight (or hide) certain parts of a mobile layout and create a hierarchy of information. By the end of 2016, most of Google’s mobile applications had applied Material Design to their UI, helping to create a consistent experience across the Google app library.

Google Design
Elevation of material objects create a hierarchy of information. Credit: Google

Google Design
YouTube, Google Calendar, and Google Drive. Credit: Google

Google’s Material Design language revolves around three principles:

1. Material is a metaphor: Though a language for web and technology use, ‘material’ is grounded in the reality of tactile feedback and traditional paper and ink. Surfaces behave according to the principles of light, surface, and shadow that we see in everyday life, and edges interact with one another in a very real way.

2. Bold, graphic, and intentional: Elements and style are based on the foundation of good print design. Material adopts grids, scale, color, templates, and type to effectively and strategically create hierarchy, meaning, and focus within the user experience setting.

3. Motion provides meaning: Motion is grounded in real world physics and movements, with user interactions serving to subtly transform the environment while providing direction and focus. Motion creates energy, and natural animations help create an immersive and purposeful user experience.

In an effort to make the language more accessible to web teams and designers alike, the Google Design team created Material.io in 2016. This site houses the principles, techniques, and guidance of the Material Design initiative, along with any releases and components that support them.

Google Design
A visualization of some Material Design guidelines. Credit: Manual Creative

Along with the launch of Material.io, new tools were released to help teams work, prototype, and design products and applications.

Resizer is a popular tool that helps designers quickly view and test typography and image breakpoints across different devices and platforms, while Device Metrics is an exhaustive list of device sizing, aspect rations, resolutions, and densities. The Color Tool helps users create and apply color palettes to the UI using the Material Design guidelines on color and can help with the accessibility and readability of users’ color palettes.

Two tools only available through the Early Adopter Program—Gallery and Stage—aim to help teams with their design workflow. Gallery simplifies the process by putting iterations, presentations, and feedback all in one place. Stage is being developed by the teams behind Form and Pixate, two prototyping services that were acquired by Google in 2014 and 2016, respectively. The beta tool allows designers to prototype and test movement much earlier in the process and helps to speed up the workflow along with an iteration and feedback tool like Gallery.

Design is never done, because the world is always changing. But Google’s Material Design initiative is a unified system created to help you and your team get to a solution quicker and easier. In conjunction with a perpetual beta strategy for web development, a fast and iterative UX/UI design process is becoming more possible. And, by incorporating the guidelines and principles of good, cohesive design into your experiments, you can help users purposefully and efficiently interact with your product, leading to better results and happier customers.

Andrew Speight, Former Production Designer
Andrew Speight

Related Articles

defense contractor
Insights from the 2024 Defense One Tech Summit
The recent Defense One Tech Summit held in Pentagon City, VA, provided a fascinating glimpse into the future of defense technology. From AI and quantum computing to hypersonics and drone swarms, the event highlighted several…
Read More
How to go cookieless in 2024: What marketers need to know
Beginning the first week of 2024, Google is set to being phasing out third-party cookies. With cookied inventory accounting for 78% or more of programmatic ad buys, the post-cookie era will bring about a seismic…
Read More
How brands are using AI and more to deck out social feeds for the holidays
As the holiday season approaches, businesses are gearing up for the annual online shopping frenzy. With consumers increasingly turning to the digital realm for their holiday purchases, social media advertising has become a crucial tool…
Read More
INBOUND 2023: The brave new world of the AI boom
Earlier this fall, several members of the Grafik marketing team attended INBOUND, a cutting-edge marketing and technology conference hosted by Hubspot. The event was jam-packed with insights, innovation, and inspiration, with two dominant topics that,…
Read More