Reading Time: 2 minutes

What is Material web design?

It seems that the prevalence of responsive web design has made almost every contemporary website somewhat look-alike. They tend to share the same key features – flat design, long scrolling, hamburger menus and so on. It is not strictly a bad thing, AWWWARDS argues, as it only the  reflection our constantly changing online behaviours and preferences.  

It was last year when Google introduced ‘Material Design’ – a new design lingo that was praised for changing the game. But it wasn’t until recently Google has started testing material design on their desktop search results page to a handful number of users, according to Android Authority.

Is it better than flat design?

If everyone is happy with the current flat web design, why bother with material design? ‘Material design starts with mobile but then extends beyond any other devices’, says the Next Web. And above anything else, a material design is about setting priority on UX.

The key characteristic of the new design is its use of ‘shadow effects and the concepts of movement and depth’ so that designers can create a more realistic-looking design for users. It is also known for its layered interface, reminiscent of having multiple layers of paper piled together to give a realistic perspective.  

material web design

(Image via)  

To give you a real life example from Google’s latest testing on desktop search results, the differences are actually not very apparent. ‘The alterations are subtle, and some users might not even notice them immediately. However, the close observer will notice that search results on this new design are divided onto clean white ‘cards’ that appear to float over the off-white background thanks to faint drop shadows. Also new is a firm grey bar that runs along the top and calls to mind the kind of interface that we’re used to seeing on mobile devices.’ – via Android Authority.

material web design

(Image via Google Material Design)

So, at least from the definitions, it seems just another clean, UX-focused design trend, which is not too foreign from what we already have. It’s just the white cards on a grey background, to exaggerate it. Right? Yes, it is essentially minimalist, and predominantly focused on usability.  In fact, material design owes many of its design concepts from the flat design and other up to date techniques. While both the latest flat aesthetic and material design tend to have common features, the latter allows more contrast – depth and shadow. From The Next Web, the material design’s ‘effects are needed to create more three-dimensional spaces and to mimic lighting’. And don’t be mistaken with the trend prior to flat design – because this time designers are embracing these layers, depth and shadow purely to improve user experience instead of decorative reasons.

What are the shortcomings?

So, it is not a massive alteration. But many websites such as YouTube, Reddit and the likes have reportedly started to adapt some provisional material design-based update, says the Verge. But interestingly, it is not an utterly perfect picture. As pointed out by some already, the provisional layout of Google’s search result page uses more white spaces, which inevitably limit the number of results shown on the screen. Arguably, that would eventually mean more scrolling as a result of less content displayed, and therefore negatively affecting the key usability issues.

Another interesting article points out that ‘Google apps don’t look right on iOS devices because they don’t fit in with the expected design language. If you live in an iOS world, Material Design apps just look like they are half-finished’. But then again, if it’s all about usability, then we don’t need to like it? To take this to another level, should we be celebrating the diversity of design on iOS, as pointed out by The Next Web?



Leave a Comment