Material Design On The Web

What is Material Design?

Material Design is a UI design language developed by Google, primarily for use within their mobile operating system ‘Android’. While its primary use is on mobile, Material Design can be used on more than just a phone; their design language can be seen on smartwatches, the screen in the middle of your car’s dashboard, and the web.

Material Design focuses on animation and shadows (depth) to help the user understand where everything on their screen fits in. The animation helps them understand where something came from and where it’s going. The shadows show the user what’s important and what’s not.

If you’re new to Material Design, I recommend spending a little time on their design guidelines to understand the basics of it.

Where Material Design Excels

Google’s design language is great to so many people for so many different reasons, I’ll cover what I think is great about Material Design.

Beautiful Right Out of The Box

Material Design provides a gorgeous interface right out of the box. While it’ll be pretty generic if you don’t bother customising it, it will still look pretty nice. Earlier in Android’s history if you were a developer and not a designer or didn’t have a designer, it was pretty certain that your app was going to be relatively ugly. Material Design partially fixes that with its default theme. Unless you go out of your way to make it ugly you’ll probably be fine.

Familiarity

Material Design builds upon what people have come to expect from apps on their phone, it’s got all the basics which people are used to. Toolbar at the top, hamburger icon in the top left to reveal a drawer for navigation, three dots (kebab menu) at the top right to show less important items, etc. Since Material Design has all these things, any smartphone user should find it easy to use and feel right at home (Except this time their home is a little more stylish than the last time they saw it).

Consistency

In the past Android has never had the best reputation when it comes to consistency among the design of applications, whether or not those were made by Google themselves or a third party developer. No matter where you went on Android, you’d find something out of place. As mentioned before, Material Design at its core is easy to implement no matter who you are, which means developers can just use a starter project in their app and be good to go. Now that apps are slowly beginning to look the part, Android finally feels on par with Apple’s iOS in terms of design and consistency across the OS.

Where Material Design Falls Short

The Web.

Material Design fails on the web and fails hard. There are a few circumstances where the design language works well on the web, but those circumstances are far and few between. Most websites are dense with information, whether that information is text, data or images. Material Design has a lot of large elements such as the navigation drawer on tablets and desktops. The navigation drawer reaches all the way up to 325px in width. The toolbar goes to 64px in height on tablet and desktop. Both are relatively large numbers, which means there’s a large amount of space which is now unusable thanks to the addition of a drawer and a toolbar.

Another thing which Material Design loves is white space and padding. Material Design is really good at wasting space. A lot of elements in Material Design have padding of 16px all the way around, such as cards. A single card will take up 32px horizontally just in padding alone, and that number increases more when you add the margin around the card to stop it from touching other elements and to allow the shadows to show. All of the numbers add up slowly, leaving you with less and less workable space. Less workable space means less space to actually display information.

An illustration on their guidelines showing padding on cards.

Let’s begin with a navigation drawer which Google recommends you have shown consistently when on tablet and desktop. Right away we’ve lost 325px. Let’s say we want two columns of cards, each card has 16px of padding on both sides which means 32px for each card. Just by adding a drawer and two cards we’ve already lost 389px, and that’s without adding a margin on the elements to keep them from touching. Google doesn’t seem to have any specific numbers on margin, but we’ll assume that we’ll be using 16px again. That’s another 64px to add onto 389px, adding up to 453px. That’s 453px that we can no longer use to display content. 453px is almost half of the standard width for web pages (960px).

I’ll not cover the wasted vertical space caused by the toolbar, the 16px paddings and margins of cards and other elements, I’m sure you can imagine that the number will grow.

Conclusion

I’m a huge fan of Material Design and I have been since it was first announced the other year at Google I/O. I went on to modify apps which weren’t material in order to make them as close to material as I could. Then when I later started my current job, I pushed for us to use Material Design in our internal web apps as it was already well developed design language and it looked gorgeous.

We went with Material Design for a project and slowly began to realise through development that Material Design just wasn’t quite cut out for the web. We had a lot of information to show and not a whole lot of space to show it.

If your web app or website doesn’t have a whole lot of content to show, go absolutely nuts and use the design language as much as you want. I think that material design is best used for web apps and not websites, as more often than not websites packed with information. The best you can hope for with a website is for it to be ‘material inspired’.

Material Design has evolved and it will continue to evolve, and maybe one day it’ll evolve in such way that it will finally be usable on the web, but today isn’t that day.

PS. Praise DuARTe