We published our 17 crucial web design trends for 2015 a couple of weeks ago, and this is the first in a series of posts looking at each trend in a more in depth manner.

This week, the meeting point between flat design and skeuomorphism: material design.

Material design 

Material design is a visual language created by Google. The manifesto that has been set out is an ever-evolving and constantly iterated document, but the fundamentals are fairly clear once you get through the somewhat intimidatingly pretentious language.

Although the ‘synthesizing of classic principles of good design with the innovation and possibility of technology and science’ does have a certain optimistic charm to it.

The overriding goal is to develop one system that allows for a unified user experience across all devices, platforms and screen sizes.

The general rule is that mobile functionality (swiping, tapping) should be primary, but mouse, keyboard, touch and mouse must be as important. 

Material as metaphor

To quote Google:

The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

So basically it’s not quite the wholesale junking of skeuomorphism like we might have expected, but it’s a significant step into a whole new visually representative language.

Skeuomorphism is quite simply the practise of making something artificial appear real and the most famous modern example of this can be found in the iPhone’s yellow papered, ring bound Notes app and the rickety-bookcase-aping Newsstand app.

Since the introduction of iOS7, this design trend has become more and more unpopular, and quite right too.

Most of us have been interacting with the digital world for half our lives now, we no longer need the patronising comfort of a button on a digital screen to look exactly like a button in the real world. The faster we consumers get used to this, the faster digital design can move forward.

However within flat design there is a tendency for buttons to disappear into the background, forming a seamless wall that can leave the user bewildered and frustrated that they can’t find functions that aren’t clearly defined, especially if they don’t have any previous experience with the interface.

This is where material design comes in. The surfaces and edges of elements in material design provide visual cues that are grounded in reality. Realistic lighting also helps to define objects and divide space.

The use of familiar tactile features also helps users quickly understand the relation between an object and its environment. 

Bold intentional graphics

The principals of print based design are not only there to appear visually attractive but also to guide your experience using hierarchy, meaning and focus.

Bold solid colours, sharply defined edge-to-edge imagery, large-scale typography and intentional white space helps to create an immersive user experience.

Meaningful motion

User actions are the primary focus, the person interacting with the design controls the experience rather than the other way round.

Action should also take place in a single environment and interactive objects should be presented to the user without breaking continuity even as the experience changes.

There is vast amounts of information on the Google Design website going into greater technical detail with regards to environmental properties, 3D design, animation and responsive interaction, so if you’re interested do check it out.

Examples

In the meantime, I’ve rounded up some current examples of material design.

(Some of these examples are courtesy of Thomas Vanhoutte and Stanfy.)

Gmail Inbox

For more information check out our review, Gmail Inbox: does email need a reboot?

Calculator

Message sent

Newspaper

Player interface

Events listings

Flight information

Music player

Phone contacts

To do lists

Further reading

For more on web design from the blog, check out our crucial web design trends of 2015, also these 14 joyful examples of micro UX and 20 examples of beautifully persuasive ecommerce design

Christopher Ratcliff

Published 14 January, 2015 by Christopher Ratcliff

Christopher Ratcliff is the editor of Methods Unsound. He was the Deputy Editor of Econsultancy. You can follow him on Twitter or connect via Google+ and LinkedIn

686 more posts from this author

You might be interested in

Comments (1)

Avatar-blank-50x50

Dirk Shadoe, CEO at DS inc

What is material design? It's not a brand new visual language invented by Google, although they claim it and you parrot their party line. It's actually Google admitting that, after more than 5 years of sad and arrogant denial of standard ux principles, that drop shadows, rounded corners, colored backgrounds, animations, and buttons that look like buttons are great UX after all. It's also Google trying to take credit for the responsive design movement they only started using well after the fact and likewise didn't invent. Sheesh it's like Apple claiming to have invented mp3 players and cell phones.

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.