Material Design is Google’s design language, which is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Originally introduced in 2014, Material Design has gotten more popular recently, as many designers have started integrating it into not only their Android projects but other web-bound projects as well.

Is material design for you?

Something that I’m sure you’ll agree with is that great designs are unique and functional. With “functional” probably being the more important parameter.

Therefore, when thinking about adapting the material design principles and creating digital material, first try to relate them to the goals that you want to achieve with your design.

Mainly, answer the following question for yourself, “Are material design guidelines and principles in line with what I want to achieve?”

1. Get familiar with the main resource

If you want to learn material design, the best starting point possible is the official resource released by Google

It’s being kept up-to-date and it explains all important details about material designs that you need to know to build a great User Experience.

What’s great here is that it doesn’t only cover Android-specific aspects of material design, but discusses material design as a whole in relation to any app design or web design project.

I highly encourage you to at least get through the first chapters of that documentation to get familiar with the basic principles.

2. Understand the “material” in material design

The name material design is far from coincidental. Basically, the whole idea behind the principles of material design is to make designs resemble the real world and real-world objects, but only at a certain level of abstraction.

You don’t want to make your design look overly realistic up to a point where it impersonates the real-world equivalent of a given element. What you do want, however, is to convey the idea of “material” to the user. In other words, Material design uses the physical world as inspiration and creates a new visual language that resembles some of the properties of the world.

Here’s the thing. We as humans understand materials. We know how metal feels, we know what a wooden desk looks like. We can also distinguish layers of stuff lying on other things. For example, we can recognize a pencil on a piece of paper on a desk.

In material design, you need to learn how to convey the same hierarchy of elements by only using the absolute minimum of design tools, such as shadows, shades, etc.

visual hierarchy in design
Visual hierarchy in design

3. Use shadows to convey hierarchy

The original flat design didn’t have shadows and it caused usability issues. In material design, shadows are no longer considered as unnecessary chrome. Surface, edges, realistic shadows and lighting are the main tools of material design. They help designers to covey the properties of real-world objects. Adding depth to your designs is crucial, but you have to be careful to only use the minimum effective dose.

For instance, shadows are your main tool to convey the hierarchy of various elements that combine into a complete design. By deciding what casts a small realistic shadow on what, you’re presenting the visual hierarchy of the elements and the layers they are on.

What matters here is the overall structure of the design and if your shadow structure as a whole makes sense to the human eye – if it portrays the concept of real materials.

using shadows to show visual hierarchy

4. Use bold colors

Color palettes are an essential part of the design language that a team uses when creating products. Being bold, graphic, and intentional is one of the three main principles of material design.

Material design surely is a minimalist type of design. In other words, it doesn’t get to utilize many design tools and stylistic tastes. Therefore, designers have to go around this restriction and find another way to create meaning and create the right focus.

One of the few things that are left is color. More accurately, bold color, and oftentimes loud colors.

Bold colors serve a really important role in material design (and flat design too, for that matter), they make things fun and make interacting with the design enjoyable to the user.

An example of a colorful design:

using color in design
Using color in a design

5. Use primary color and accent color

To create a great user experience, it’s recommended to limit your selection of colors by choosing three hues from the primary palette and one accent color from the secondary palette.

The way to adapt this to any type of design could be to select three hues that will make up your primary palette, plus one color that’s going to act as the accent.

Your primary colors can be used for things like backgrounds, fields, boxes, fonts, and other key elements of the interface. The accent color is just what the name suggests – it gives you additional leverage when you want to display the main element on a given screen/page.

Needless to say, the accent color needs to be in high contrast to the primary hues.

log-in screen vs splash screen
A log-in screen vs a splash screen

6. Utilize whitespace

Material design gets a lot of ideas from traditional print design and the principles it brought us.

For instance, whitespace is an important element in any material design, and it can improve your typography and text layout immensely.

In fact, whitespace is the most effective tool for creating great user experience. Whitespace creates focus, grabs the user’s attention and brings it to a particular element (something that beginner designers often have trouble understanding).

So in short, utilize some large-scale typography for headlines, add a lot of whitespace, and don’t be afraid to have a lot of blank spaces in your designs overall.

sign-up screen on webpage
A sign-up screen on a webpage.

7. Use edge-to-edge images

Material design is really image-friendly. What I mean here is that if you decide to include any images in your design, you should give them a leading role.

Images in material design are featured edge-to-edge – in a full-bleed manner. This means that there are no margins between the edge of the image and the edge of the window/screen.

When done correctly, this creates a truly memorable user experience for the person who uses a product, and also gives the designers some additional design tools among the rather small set of pre-approved shadows, color palettes, and layers.

screenshot of Twitter banner using edge to edge pictures
Twitter banner using edge-to-edge images.

8. For image-based designs, extract colors from the images

Speaking of images, Google encourages us to extract the colors from the images that we’re using in our designs, and then make them part of the color palette.

It’s hard to argue with this reasoning. Doing such a thing is sure to create a consistent experience for the user, making the impression that everything falls into place nicely and just fits overall.

image-based design with pop art overlay
Visual representation of taking colors from original image.

9. Incorporate motion

In Google’s own words, motion provides meaning.

Material design utilizes the same principle and uses motion to interact with the user, effectively letting them know how to use the design.

What to put in motion? Simply give the user some feedback about the action they’ve just performed. For example, did they click a button? Was there an animation to confirm that the input was received.

The versatility of Material Design motion language made it possible to use it in various products. Even large-scale products such as YouTube and Google Chrome incorporated motion in core interactions.

motion being used in app design
Motion being used in an app

10. Make motion authentic

“Authentic” is the keyword here. The days of fake motion – things just moving about the screen – are long gone. Right now, if you’re going to incorporate motion, you might as well make it real according to the laws of physics – to make it align with the way real-world objects interact with each other.

Google devotes a whole section in the material design guidelines to the concept of authentic motion

In those guidelines, they explain how to introduce mass and weight, acceleration and deceleration, and how easing works (a way of making animation seem more natural by changing the speed of movement at different moments in time).

In material design, motion is only as good as its ability to mimic the motion of real-world objects. This is the only way in which motion will enrich the interface and make it more understandable to the user.

11. Make everything responsive

One of the main principles of material design is to make the resulting work accessible and usable on any device and any screen size. Above all else, the goal is to make the experience consistent. That way, the user doesn’t get confused if they switch from one device to another, as they don’t get a completely new interface displayed to them.

With good material design, they can transition without any obstacles and just continue using the app/site right from the point they left off.

Naturally, this means that the design needs to be responsive. Luckily, with modern frameworks, you get much of the scaffolding already built, so making your work responsive shouldn’t be that big of a challenge.

12. Remember, everything’s in the details

One of the main elements that make material design so difficult to execute flawlessly is that it’s so heavily simplified.

For instance, with skeuomorphic design, the guideline was simple, “make every element of the design resemble its real-life equivalent as closely as possible.”

This is where things like this came into existence:

iPhone calculator app
Skeuomorphic calculator in Apple iOS 5.

Or this:

a detailed design layout

With material design, it’s a bit simpler, yet more complicated at the same time.

For the most part, material design is a game of details. You need just a little realism to convey the main functionality and purpose of the thing you’re designing, but at the same time, you don’t want to make things too skeuomorphic.