New to Material Design? 12 Principles You Need to Know

Material design has gotten really popular recently, as many designers have started integrating it into not only their Android projects, but other web-bound projects as well.

Just to remind you, the concept was first introduced by Google in their Google I/O 2014 keynote. This presentation has been viewed more than 1.5 million times to date and it’s still being treated as the main overview of what material design is and how we should be thinking about it.

Is material design for you?

So the first question we’re going to attempt to answer today is whether or not material design is something you should learn and begin using in your work.

However, like usual with these types of questions, there isn’t a one-size-fits-all answer.

Let’s try approaching this from a different angle then.

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. In other words, design beauty just for the sake of it is pointless.

Therefore, when thinking about adapting the material design principles, first try to relate them back 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?”

(Note. It’s probably a good idea to read our previous post before going through this one. Here it is if you haven’t seen it yet: Is Flat Design a Web Design Standard That’s Here to Stay? In it, we go over the biggest differences between flat and material design and also list some pros and cons of both trends. This should provide you with some additional help when choosing a design approach.)

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 the fine details that go into building material designs.

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 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, 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.

Here’s the thing. We – 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 stuff. For example, we can recognize a pencil on a piece of paper on a desk.

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

3. Use shadows to convey hierarchy

Surface, edges, realistic shadows and lighting are the main tools of material design. 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.

4. Use bold colors

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 shouty.

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:

5. Use primary color and accent color

Google’s official docs say:

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: 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.

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 focus, grabbing the user’s attention and bringing 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.

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 an enticing experience for the user, and also gives us – the designers – some additional design tools among the rather small set of pre-approved shadows, color palettes, and layers.

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, make an impression that everything falls into place nicely and just fits overall.

9. Incorporate motion

In Google’s own words, motion provides meaning.

Motion is one of the key components of good material design. After all, we’re used to experiencing motion in the real world. It helps us understand how things work and where we should direct our attention.

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? Animate it to confirm that the input was received.

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 and how things work in the real world.

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-life items. 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:

Or this:

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.

When in doubt, just browse some online galleries for inspiration.

What do you think? Have you experimented with material design yet? Do you think it can be used for more than just Android app design – the purpose for which it was originally introduced?