An Introduction to Google’s Material Design

 6   Tweet
!

Note: This post hasn't been updated in over 2 years.

material_design_featured

When you hear the phrase “material design” it may evoke the mental image of an interior designer oscillating between choices for drapery fabric. Strangely this metaphor wouldn’t be too far off from Google’s new design specification. While there are plenty of differences between the physical and digital world Google is attempting to bridge that gap for a more relatable UI design process.

Material Design is a design language created for Google Android’s new OS which was announced in Summer 2014. Although the spec primarily focuses on touch-based mobile app design it should be possible to extrapolate the same ideas into web design. While the online documentation is quite detailed I found it to be confusing in some places. For this guide I want to lay out the more essential info to explain the purpose of Material Design and how it will affect the interface design process.

What is Material Design?

Google has put together rigorous online specs for their Material design language. There’s a lot of Material design jargon to skim through but summarily it was made for Android to create a better foundation for user interfaces. Material design has a focus on physical material like our interior designer from earlier who finally settled on a polyblend of linen and cotton drapery.

But digital interfaces are not created from the same material as curtains or drapes. Google’s Material design considers material to be a homogeneous digital “fabric” created with pixels. Users can tap, swipe, or pinch this material fabric and it will move according to user interaction.

Mobile interfaces are created out of layered material objects like rectangular bars or circular buttons. Content(text, imagery, video) is laid flat onto material.

google material splash

Confused? Hopefully not but let’s evoke some more imagery to clarify. Each piece of material is considered to be a separate object inside the digital world. So an app with a white background actually uses a full-length piece of material colored white. A blue navbar is then stacked on top using a different piece of material. So a user interacts with different pieces of material as if they were real physical objects.

Material design basically covers the goals & objectives for handling these interactions. Motion, depth, fundamentals of light, content hierarchy, these are just a few topics mentioned in the documentation. Since this is still a new concept I’d expect further updates from Google as time goes on.

The important thing to remember is that Material design is a language. It’s not just a UI kit or collection of interface elements, but rather a new way of talking about and looking at interfaces.

Material Surfaces

Each material object is measured using device independent pixels, or dp. This unit of measurement is a physical unit which can be converted to inches or millimeters based on the device’s screen size. These units allow designers to create interfaces which are independent of a particular screen resolution.

Material design uses dps to measure the height, width, and depth of material. Since digital material is considered “real” it lies on a 3-dimensional coordinate system with X, Y, and Z axes. The following image should elucidate my point:

google material diagram spatial height width

This diagram is from Google’s spatial objects page in the Material design specs. Layering material objects will create a sense of depth much like in the real world. Content, however, lays flat on the material. Compare this to how a tattoo lays flat on skin or how printed ink lays flat on paper.

Depth is created using light which casts a shadow onto material lower in the hierarchy. The primary light source is flowing down from the screen, so as objects move closer to the screen they cast a darker shadow. Most design elements are still “flat” but use subtle shadows to distinguish between material depth. Light & shadow is a big topic but skim through the docs if you’re curious to learn a bit more.

Content Behavior

Content is the main attraction which persuades users to download a copy of your super awesome project. Mobile apps are created with material – but without any content the apps are just blocks of empty forsaken material. People use apps to check weather, snap photos, read news, or fritter away hours on social media. Content is what drives interactive behavior.

When users interact with content they are also interacting with the material. Tapping a video or selecting text should feel natural. Swiping a button or switch across the screen should faintly mimic the real-world process. Behavior should feel intuitive based on the user’s goal.

google material splash components

Material design is obviously geared towards mobile interaction but similar ideas can be extended to mouse clicks. Since touchscreen applications are more physical they require more attention to detail. Take a look over the Material design components to see a few examples of content merged with interfaces.

Animation & Motion

Mobile apps have been utilizing motion ever since the original iPhone hit store shelves all those centuries ago. Now it seems like technology has caught up to innovation and it’s possible to create motion with sliding menus, buttons, modal windows, even icons. It’s not a question of possibility but a question of necessity.

Material design places a great deal of focus on motion. It’s considered to be a response mechanism to user interaction which can oftentimes mimic reality.

When pushed, some objects glide faster than others. When pressed, some objects compress deeper than others. If you were busy sleeping during 10th grade Newtonian physics don’t sweat it – most of this stuff is common sense. Google has an entire section dedicated to authentic motion.

animated android calendar app material design

The example above is from a Dribbble shot created by Ehsan Rahimi. It does a good job illustrating a more obscure use of motion. In real life you probably won’t see a button expand into a new alarm page. But in the digital world it makes sense considering the button’s action is meant to create a new alarm. Once you go beyond basic motion you can think of ideas like this to greatly improve the user experience.

Google’s magic material has some basic properties which it can perform like stretching, merging, dividing and regenerating. It’s probably made of the same stuff as SpongeBob except it’s not sentient(I hope). Also it’s worth noting that material can move on any axis typically based on user interaction.

There’s a lot more stuff related to material properties but the gist is that material behaves like a digital surface ordered into a hierarchal structure. Motion is used to demonstrate the relationship between a user’s interaction and how the material is readjusting itself.

Interface Icons

One last tidbit I want to cover is the use of icons. Flat trends have remained prevalent in this new design language and icons are no different. When crafting your own interface icons the biggest thing to remember is consistency.

I should mention that I’m not talking about product icons(also called app icons). These are the icons you find on the home screen when first launching the application. A lot of planning goes into product icon design yet it doesn’t always play a role when designing the interface.

User interface icons are referred to as system icons in Material language. The goal is to create icons that are instantly recognizable at any size. This typically means very low detail and one solid color. Google has a slew of their own examples but I also found a free pack of Material system icons created by Walmyr Carvalho:

material design system icons freebie iconset

The icons have been released as PNGs and if you use Sketch feel free to download the editable file as well. I feel that these icons resemble the perfect balance between simplicity and detail in regards to Material design. They’re easy to recognize and they all look very consistent.

Closing

I hope this post distilled the elaborate subject of Material design into the most crucial elements. Once you understand what Google means by the word “material” everything else starts to make a lot more sense. If you’re itching to test your material design skills why not download one of Google’s pre-made templates? This is a great way of getting your hands dirty without building your own objects from scratch or dirt. Wireframing with twigs is so last year.

Compared to mobile app design the field of web design is quite relatable, although not exactly the target market for Material design. But many of the same principles do apply to the web and you can test some in this material playground hosted for free on Github. With more time I expect Material design to become a wildly popular topic amongst app designers with lots of new tutorials and free resources online.

Browse Material Design on GraphicRiver →

  • Can’t wait to see what the Envato community comes up with in this space.

  • ruizh

    Thank you men! very good (Y)

  • Jason Newton

    Nice resource buddy. Thanks for sharing.

  • This is really awesome. Nice of you to share. Thanks mate!

  • Great list. But unfortunately its only graphic design mockups. Material design is not about graphics. Its new web design tool which is css/programming language. To make a mockup in Illustartor or AE is easy , but to design a website, create site architecture and etc it’s more difficult. Especially when there are not many examples arround. If you are interested to see best examples of websites built with material design ( so far) I have made list of my favorites here : http://materialdesignblog.com/15-awesome-examples-of-material-design-done-right/ . Further more i am expecting that soon Envato team will launch contest for material design themes! 🙂

  • Олег Семёновых

    super, thanks)