What is Material Design and How Can It Be Used?

Posted / 03 March, 2016

Author / Enginess

material design

Material design is a design language developed by Google to help designers and end users replicate Google’s work, and explain why things in Google look and respond the way they do.

 

What is material design?

Material design is a design language developed by Google which, at its core, is an extremely sophisticated and well defined set of guidelines to help both designers and end users replicate Google’s work as well as explain why things in Google look and respond the way they do.

The goal of material design is to better unite fundamental design principles with technology.

Material design has three core principles:

1. Material is the metaphor

Our on-screen design should be a metaphor for off-screen things, especially pen and paper.

This means that on-screen buttons should look like real-life buttons, elements should have shadows, and “the fundamentals of light, surface, and movement” need to be respected.

Material design uses the idea that user experience is enhanced when elements on a screen mirror (to an extent) how those things looks in the off-screen world.

For example, a pop-up ad – it should have a subtle shadow, because all 3D objects have shadows.

material design in print

 

2. Bold, graphic, and intentional

 Everything that we design should be deliberate and big. No more wishy washy colours like beige.

Be bold! Use magenta!

The takeaway here is that material design aims to guide designs that make sense straight away, is easy to follow (e.g. bold colours, headlines), and creates a clear and uncluttered experience (for example, with negative space).

material design UI kit

 

3. Motion provides meaning

Motion can be used to help move the user and create meaning, in particular, movement is especially useful in providing feedback to the user.

For example, on Android, when you hold down an icon, it pops out a little to tell you that it’s ready to be moved. That small movement is a great way to communicate with the user. That’s what material design aims for.

Google Material Design

 

Why Material design is important

Now that we understand that material design is a set of guidelines that's trying to make technology more usable, let's put it into a larger design context.

First, material design is important in the context of flat design.

We’ve been talking about flat design, or elements of it, for years. Material design represents the first major shift away from that trend, although parts of it like the principle of material being the metaphor even pushes back towards early-2000s skeuomorphic design.

  

 

This is a big deal.

For the first time, elements have become less flat, and as a result have become easier to use – without losing any of the beautiful minimalism of flat design.

Second, material design approaches design on screens from a much more tactile direction than other design languages or approaches have before. The material design guidelines place all objects on screen within a 3D matrix, rather than 2D. That is, in the material design world, objects (like a text box, for example) actually occupy space.

That unique approach makes it both extremely intuitive for users, as well as easy to understand as a designer.

  

The last reason that material design is a big deal is its ability so span screen sizes.

When material design was first announced in November 2014, we were still thinking pretty decidedly in three screen sizes – mobile, tablet, and desktop.

However, material design was intended to be functional across a much wider range of screens, from watches to TVs, and incorporating features such as screen agnostic motions to inform users.

material design screen sizes

Wrap up

We feel that Google’s material design has proven overwhelmingly successful in improving user experiences.

With a subtle shift away from flat design, material design embraces the fact that we all still live in the off-screen world, and most importantly, Google has created detailed guidelines that make it much easier for web designers and developers to deliver fantastic UIs – all with simplicity and finesse.

Plan your project right - a step-by-step guide to ensure a successful digital project launch. Read now.

Topics

See all ≫ ≪ Hide all

Subscribe to Enginess Digital Insights


Share the insights /