Jens Oliver Meiert

On Material Design

Post from January 11, 2018, filed under .

More tough love for Google after this week’s AMP letter (previously). Coincidence: I had written this post some time last year and it was long due and long scheduled to be released.

When Google introduced Material Design back in 2014, I was happy; I was happy for the people on the team, of who I knew a couple, and I was happy for Google to mark another milestone on the long way of improving the aesthetics of their products and even the Web (and, in my view, to become more innovative and qualitatively better at interface design than Apple).

However, when Google introduced Material Design, I was also concerned: “Material Design” sounded more like marketing than substance; in a phase in Web Design in which we had begun to suffer from embarrassingly, ridiculously low information density and the accompanying dumbing down of interfaces, Material Design was like announcing a large shipment of coffin nails rather than defibrillators, even one.

And yet, the marketing ring is not central to my criticism of Material Design; the key is that Material Design seems to miss that much of web and application design is about information. Information—not whitespace. Information—not negative space. Information—not rationalized space.

Material Design sends the signal that most important in design were order and space.

Material Design sends the signal that high information density was a problem, as information density is basically incompatible with Material Design.

Material Design sends the signal that function had to follow form.

(Just look at it.)

Material Design still sends these signals, to me they are all the wrong signals, and I much dislike this approach to design.

Material Design.

Figure: Fluff.

As so often, it’s easier—so easy in fact that it lacks much argumentative force—just to say that something’s not okay, that something doesn’t work.

So what would have made, or what could still make Material Design a success?

Material Design would then have become a design success if it had put function first. [This is phrased rather unclearly but I decided to keep this and the following paragraph.] Design by itself is nothing (it’s decoration). Function is what is everything, and function cannot but have a design (and at times—see industrial design—this design lends itself to something strikingly beautiful).

In our case, web design, or Web Design, rather, this would start with a much clearer message around function, for Material Design to define a vision for what made for useful and meaningful content and services, and a design philosophy around that. Alas, no matter that defining use and meaning isn’t the goal of a design system, even the attempt would be a problem, because we cannot just prescribe and foretell use and meaning.

But while we know—can know—little about a most effective design of services, we know—do know—much about the effective design of content. Content design, put in simple terms, benefits from

  1. legible fonts and readable typography (including correct punctuation),
  2. high information density,
  3. few distractions (avoiding anything from 1 + 1 = 3 to chart junk).

Material Design delivers a little on 1) and 3), and fails noticeably on 2).

We want to remember Tufte (“clutter and confusion are failures of design, not attributes of information”) and do feel reminded of a problem around frameworks and libraries: They cannot be effective and they do not work if the needs are unknown.

Material Design is a collection of ideas and resources that poke into this unknown. That it does so in the realm of services (apps), we may forgive. But that it does in the realm of content design, where we look back at centuries of craft (typography, layout) and clearly benefit from showing the money (the content), that, at this point in time, makes Material Design shallow, undesirable—and also somewhat harmful.

That is my view, based on how I’ve come to understand and observe Material Design.

I do like the Google Design newsletter.

About the Author

Jens Oliver Meiert, photo of September 22, 2018.

Jens Oliver Meiert is an author and developer (O’Reilly, W3C, ex-Google). He plays with philosophy, art, and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Goodreads. If you have any questions or concerns (or recommendations) about what he writes, leave a comment or a message.

Comments (Closed)

  1. On January 13, 2018, 4:38 CET, JT said:

    I’m so glad to read someone else who feels the same way. But I dont think we can look at this problem in isolation. It’s closely paired with another design mantra that I’m starting to see more and more, ‘Mobile First’. The most obvious that comes to mind right away is Meetup.com. The landing page for individual groups used to have tons of infomation and put anything else you’d possibly want to know within 1 click from the main landing page. Now most of the content is hidden behind other links and pages. What used to take one click now takes 3 or 4. That’s pretty bad on its own, but there’s another even bigger problem in my mind.
    Meetup’s redesign in their words, was to ‘make the interface and look the same across the mobile and desktop interface’. They based this on numbers that 60% of their users are using their phone, and these users, apparently, want the desktop to look the exact same.
    While that may sound perfectly reasonable in the head, in practice its attrocious. On my phone the screen is about 3″ wide and 5″ long. That’s roughly about 5 finger widths across. Every UI element that you can interact with has to be a certain size so that its easy to tap with my finger. As a result the number of things you can put on a page goes down, but those elements themselves actually get larger as pixel densities go up. My Blackberry Priv has a 2560 x 1440 resolution screen. So for an icon or button to be one finger width across, it’s size would be approx 1440/4 pixels wide (288 pixels). On my deskop that same button which was about 1/3rd of an inch across is now almost an inch and a half in size.

    One would think that responsive design would correct the problem here, apparently no one knows how to do that anymore. Either they scale everything up and every website looks like it was designed by Fisher Price with obnoxiously large visual elements, or they dont scale at all and then the entire page is filled with even MORE white space since the visual elements are being scaled to fill all the empty space. And this isn’t just small websites getting this wrong. When Paypal first flipped to their new UI they did the same thing, the desktop site was same interface/design as the mobile site. Thankfully they realized the problem and corrected it, but here’s a screen cap after the initial change when I logged into to check my balance: Paypal @ 4k

    The paring of ‘whitespace’ and ‘mobile first’ is making once functional sites completely useless when using a desktop/laptop.

Read More

Have a look at the most popular posts, possibly including:

Say hello on Twitter or LinkedIn.

Looking for a way to comment? Comments have been disabled, unfortunately.

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2018 → On Material Design

Last update: January 11, 2018

Awareness, honesty, responsibility.