Material Design — Getting Started Guide for UX Designers

There are a lot of resources out there that describe what Material Design is all about and when it should be used. But I still haven’t found an article that summarizes all assets provided by Google to get you started with a UX design project specifically using the Material Design Principles.

So the goal of this article is to walk you through the process of downloading the various assets you need and then the next article will be focused on creating a mobile, web and desktop app using the Material Design concepts to design my own version of the Google Play app.

Figure 1 — Consistent UX design across various platforms

So let’s begin by downloading some basic templates from the Google Material Design team:

A. Color Palette
This is available for photoshop, sketch or illustrator design process.
Download: https://material.google.com/resources/color-palettes.html

Figure 2 — Color Palette for Material Design

B. Breakpoints or Device Dimensions

Google provides a pretty detailed set of breakpoints or device dimensions that you should consider:
Download: https://material.google.com/resources/devices.html

Generally, I design layouts for the following four categories:

• Extra small devices / Phones (<768px)
• Small devices / Tablets (>=768px)
• Medium devices / Desktops (>=992px)
• Large devices / Desktops or TVs (>=1200px)

C. Layout Templates
Next step is to download the layout templates for various platforms so you can start thinking about how your content can be presented in various formats.
Download: https://material.google.com/resources/layout-templates.html

Figure 3— Consistent UX Design using Google Material Design. Image Credit: Google

D. Fonts

There are some of the must have Roboto and Noto fonts before you start designing your Material Design based project:

Download: https://material.google.com/resources/roboto-noto-fonts.html

E. Sticker Sheets and Icons

Last but not the least, grab all of the sticker sheets and material design icon library available as PNGs as well as as a font for your use.

Download: https://design.google.com/icons/

Now that you have all the assets that you need, the next article will be focused on build our own version of a consistent Material Design based Google Play UX design across web, phone and tablet devices.