There’s a new phrase to watch out for when talking to your web designer: Material Design.

It’s a movement which treats web page elements like paper cut outs in the real world, and is inspired by Google’s designs for Android. It’s a general rule that where Google goes others will soon follow, so the same design principles are becoming more and more popular.

Material Design makes web page elements look as though they come from print-based design, and gives them a 3D feel. Objects have depth-effects like edges, lighting, and shadows, and it uses grid-based layouts.

Flat design banished the shadow box from our web pages. Now, it’s back with an interesting twist.

 

Key trends

Material Design takes websites back to the future, making the edges and surfaces of page elements visible, and using seams and shadows to make touchable elements user-friendly.

• Backgrounds resemble sheets of paper which can be re-sized, or shuffled, or bound together with other ‘pages’. They are called sheets of material, and common edges are called seams.
• Cards give users access to more detailed information – they can contain text and images.
• Print design tools like structural templates and baseline grids are also used.
• Some elements can be split for easier use, and then ‘healed’ together again.
• It uses muted backgrounds and bold colours for elements, inspired by road signs, sports courts, and contemporary architecture.
• The language uses different opacity of texts to stress important information, and icons contain 3D elements to make them pop on the page.

Google says the design language is based on the familiar look of paper and ink, but its elements come with the flexibility of intelligent on-screen expansion and reformation. It also uses responsive animations, and padding.

The aim is that users of all abilities can easily navigate sites using this design.

 

How it began

It all started with the card systems introduced in Google Now, and the company announced Material Design at San Francisco’s Google I/O conference in June 2014. Now, Material Design has been applied to most of Google’s mobile applications including Google Drive, Google Docs, Gmail, YouTube, and Google Maps.

It can now be used on most Android devices. The company aims to provide a consistent experience for users across its applications and platforms, and on all screen sizes.

 

The benefits

Many people are already using versions of it, and understand how it works. It’s also clear and provides a good user experience for your website visitors.

There is a clear, pre-defined set of rules for designers to follow, cutting down the explanation time between you and your designer. You can research the principles yourself, and see how they could benefit your web audience.

Objects which are layered on a page have a virtual feel as they react to touch or the roll-over of a mouse. Users naturally feel what you want them to do.

 

As the march to mobile-first content viewing continues, Material Design helps to provide a consistent experience however your visitors view your site, whether it’s on a mobile phone, tablet, or laptop.