Blog

Google's New Material Design

material_design_imageIt looks like Apple might have some competition. Google announced its new (and very impressive) material design at its most recent I/O in June.

Let's just say, this new interface is a serious gamechanger. 

We've seen a lot of success from this company in the past, but Material Design takes the cake. At last year's I/O, Google shared minor updates to existing products but this year they seemed more focused. From the clean design to the more human-like feel, one may predict that Google is on its way to taking over the world (or maybe just our digital screens). 

With the anticipation of the release of the new design and Android L, Google is keeping us busy as we await the opportunity to test out the new interface. Along with the previews, Google created an extensive eBook describing everything and anything a techie would want to know about the new Material Design, ranging from specs to animation to layout.

Our team has compiled a list of everything you need to know about the new Material Design (minus the tech jargon).

What is Google's Material Design?

Clean, focused and minimal. These are just a few of the adjectives used to describe Google's new Material Design. An easier user interface and navigation were key focus points as designers laid out the foundation for the new design.

Simple slide or swipe options allow you to easily open and close apps and windows. When you receive a notification, a pop-up will appear in a card form and you can swipe to either interact or dismiss it. 

Material is a Metaphor

Google's use of realistic lighting to divide space and indicate moving parts is what makes Material Design's layout so clean and focused. The principles of light, surface and movement are key to relaying how objects interact and exist in space in relation to each other.

Designers utilized the shadows of realistic lighting situations by using actual pieces of paper to mark movements and divide space. The flexibility of the material on the screen pushes the boundaries of the physical world, without actually breaking laws of physics. 

What Will Material Design Achieve? 

When building this new interface, Google had a few goals in mind.

One main focus was to create a visual language that combines classic principles of a good design with the innovation and feasibility of technology and science. 

Another focus was developing a single underlying system that allows for a unified experience across multiple platforms and devices. One design does not mean that one size fits all.

Essentially, Google has created a system that works with a touch, mouse or keyboard, as well as on a computer, cell phone and tablet screen. This allows someone to begin a design on a phone and easily change to working on it on a laptop or tablet. 

With more than 300 million monthly active users of Chrome, another goal was to integrate the mobile web to the platform. Designers have enhanced the mobile web experience by enabling material design experience on the mobile web, redesigning recents to help you multitask and extending capabilities on app indexing. 

Lastly, Google designers emphasized the point that your content is the focus. Simple designs are easier to understand and navigate. Moreover, it places the focus on your content rather than anything else. 

Cool New Features

The new features of Material Design allow for a more fluid motion and a more intuitive experience. Bolder graphics and the use of realistic lighting are just some of the ways that designers created a user-friendly interface. Colors include ones that are in the 500 range starting with primary colors and then filling in the spectrum.

Improvement in animation has allowed for transition from one screen to the next to be more fluent. The tiniest features have been analyzed once, twice and even three times, because users really do notice these small details. 

Cards

Cards provide a means of displaying information and data in various forms. With the new update, cards have a distinct subset of cards with unique behaviors and formatting. A collection is compromised of a set of heterogeneous data types in a coplanar layout. 

Each card will have its own information such as a note with an action or a note with an action and a picture. 

Animation

With new animation features, your touch is rewarded with motion. When you touch an icon on the menu, a splash of color will appear as an indicator of touch feedback. For example, when dialling numbers, a ripple touch effect will occur. 

Color

Bold and intentional. The color schemes chosen by Google designers on each and every page was no mistake. Typography, grids, space and use of imagery do more than just please the eye. These elements create meaning, purpose and make the experience more user-friendly.

Font

The old typeface, Roboto, has been updated and renovated for the new system. This font has been extensively refined so that it will work on a wider set of platforms. The new, wider and rounder Roboto is clearer and crisper. 

What People Are Saying About Material Design

So what are other designers saying about Google's new pride and joy? As for the new interface that will be displayed on Android L, Android users have reacted positively so far.

As for design concepts, other top designers have been thoroughly impressed with Google's work. Renato Valdés, co-founder of Human, commented that this is another great step for Google, proving design is becoming more and more important in their culture. 

Others say that Google could even go further with the design details. Grace LaRosa, senior experience designer at R/GA, says that Material does not strike her as something that seems like such a massive departure from Google's current design language. She did say though, that what is newest and most noteworthy is how well documented and systematic the language is.

As for the general consensus? Most designers and viewers believe that Material Design is a big step in the right direction.

What do you think of Google's new Material Design? Let us know in the comments below!

Topics: Creative