Google’s Material Design

At Devoxx 2014, a large amount of presentations involved Google’s Material Design and Polymer. Before we dive into Polymer, it might be useful to have a look at some of the design guidelines proposed by Google. These guidelines are bundled into a style guide, named Material Design.

What is Material Design?

Material Design is a set of guidelines that are useful for modern designers. These people are challenged with the daunting task to create a design that not only targets desktops, but also the web and mobile devices. These are totally different applications, sometimes being developed by different teams. To make the user experience intuitive and consistent over these multiple platforms, a strict set of rules need to be defined.

Google’s Material Design consists of two components: material and motion. The material component provides context in design. It’s the surface and elements that are visual to the user. Material also acts in a certain way. For example, material can cast shadows. These real-life properties of materials are included in the guidelines for an intuitive look and feel.

The motion component makes sure that there is some kind of continuity in your product. Animations are supposed to give meaning to your actions. The user experience should be fluent and uninterrupted.

material-design-1

Material

In material design, material has a lot of properties. First of all you will need to grasp that material design is a 3D world that is displayed in 2D. Each material and component has a width, height, but also a thickness (1dp). This thickness allows the material to cast shadows, and by animating these shadows, the designer can make the 2D material move over the z-axis.

material-design-2

Guidelines for color and typography will make your important content stand out. It will allow the user to make a bold statement.

material-design-3

Components

Material design not only shares guidelines for high level principles, it also defines guidelines for specific components. Google also implemented these guidelines in an open source framework called Polymer. We’ll have a closer look at some of these components.

Buttons

There are three different types of buttons. The most iconic one is the Floating Action Button (or FAB short). This is a button that represents the most logical action in the current context (for example: the add-functionality when you are in a calendar application).

material-design-4material-design-5material-design-6

Cards

This material can be used as a viewport and as a dialog. You can make a collection or grid of cards in your applications to show a more visual type of list.

material-design-7

Lists

Material Design also covers lists. A list consists of a single continuous column of sub-divisions of equal width called rows. These rows hold content and can vary in height. These lists are best suited to display a homogeneous data type or sets of data types.

material-design-8

Conclusion

Google’s Material Design is a goldmine when you are looking for modern design information that is applicable across different platforms (mobile/web/desktop). The comprehensive guide is a must read for everyone that are developing layouts and designs.

The properties of material and motion reflect the realistic world and that’s why these interfaces look and feel so intuitive. Being optimized for touch, these designs are set for the future.

If you are looking for an example application that uses the guidelines of material design, Google’s example quiz-app topeka is a great showcase for Material Design, Polymer and Paper Elements.

Advertisements

One thought on “Google’s Material Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

About Arvraepe