Tips for What Web Designers Can Learn from Google's Material Design

The new language for Google in terms of visual design is called Material Design. This was released in 2014 about half way through the year and it's starting to really gain a lot of attention and focus from people who care about design. There are all sorts of interesting things that you can learn as a web designer from this language. Here are a few of them.

Flexibility Is King

You can have every interesting element of design in the book, but if it the design isn't flexible in terms of displaying on screens of varying size, then it's entirely useless. The material Design approach works specifically to make sure that there's a certain unity among the various different screens people will be using.

After all, while people are still viewing design on the Internet on PC computers, they are also viewing them on many other devices as well including tablets, mobile phones, e-readers and everything in between such as laptops, netbooks and other devices.

In the past, people have tried to solve the varying screen size and shape problem by having different basic sizes for basic sized screens. So there was one for a standard PC screen, one for a standard mobile phone screen, and so on.

The problem is that the standard size for mobile screens is a concept that is quickly going away. The only way to do this now is through a language that is flexible and unifying in terms of showing things in a standard way regardless of screen size.

So basically, the Google language shows the way for web designers in this aspect. Your design should have code that can make it actually fit a screen properly in terms of whether the material is going to be shown long ways like a tablet, or vertically like a mobile phone, or in terms of just a few inches for a mobile phone or many inches for a PC or large tablet.

But, it should also be unifying, meaning when you look at the same design on multiple different devices, you should notice similarities in design across all of those devices so that people using the different devices don't get confused. For example, the Google Maps app with the new design always has a similar look with the map on one part and the instructions for travelling in another, always in similar proportions and always with similar design elements.

Otherwise, you will confuse people terribly.

Extra Dimensions

Another interesting thing you can learn as a designer from Google is that it helps to be inspired by real world elements. For example, Google uses a lot of extra dimensions within its design that is similar to stacked paper in real life. It also uses shadows to help focus the eye on objects and understand the simulated dimensions of objects.

Physics

Obviously the design and physics of motion within an Internet frame won't be the same as the way they are in the real world because you're actually coding for it directly. But that doesn't mean there can't be similarities. When people set out to try to move something on the screen they are going to expect it to move in a way that is somewhat consistent at least with how the object might move in real life.

This means that it's important to try to anticipate the expectations users have about this if you want to make their experience smoother and easier on them, just like the new Google system tries to do.

In general, there's a lot you can learn from the Google Material Design system as a designer. It can certainly help to play around with the system a bit to see what else the design interface is achieving that makes it so successful so that you can have some chance of being that successful with your own design as well. It will be the patient designers who are the most observant about the success of others that do the best in the end.