Material Design: The Shape of UI to Come

  •   Joshua Buckwalter

By Joshua Buckwalter

Google is taking a more mature approach to UI design. It's about time.

Last week at Google IO we got a peek at Android L, and with it a glimpse into the new visual design language being rolled out for it dubbed “Material Design”. With it comes a maturity in approach to interaction design that had been lacking from the big mobile OS players to date.

For the most part Material Design seems to be Google announcing that they’ve taken some time to master the basics of layout and typography, and encouraging application designers and developers to do the same. While it’s perhaps a little galling to see Google crow about design fundamentals like it’s some new invention of theirs, it’s nice to see them taking it seriously in a way that’s more than paying lip service to the idea. I’m looking at you Mr. Ive.

Welcome to Typography 101

Apple should take a lesson here. Since the release of iOS7, designers (including a few typography giants) have been openly blasting the use of Helvetica as the system typeface used by Apple as being unsuitable for the medium. Despite being a wonderful typeface its forms – especially in lighter weights – are difficult to read on displays. On top of that, the overall sloppy implementation of type in the layout was a disappointment to say the least.

Content Image

Enter Roboto. Google has been continuously refining their system font for legibility and rolling out support for more platforms. In addition to this we’re seeing proper attention being paid to the fundamentals of type. Baseline grids, proper hierarchy and usage of weight, proper line break methods and even rags, as well as kerning. Long overdue, but well done.

The illusion of life

Google’s guides to UI animations are very reminiscent of Frank Thomas’ and Ollie Johnston's The Illusion of Life, a brilliant setof 12 basic animation principles that help express character and personality. Some of Google’s guidelines for animation quote generously from these principles, and appropriately so.

Content Image

A prescription for layout with acceptable side effects

Google’s unifying concept for Material Design is to treat UI elements as real things that occupy space and behave accordingly. This metaphorical material is meant to define the way that software should look and act. What this really amounts to is more attention to design principles that designers have been using for ages.

What’s important here is that Google is taking a more rational and reasoned approach to the UI, and the result is clean, usable interfaces. What is even more interesting is how prescriptive they are being with color, grid, and imagery. Their new style guide reads like a thorough brand manual. It’ll be interesting to see if third-party developers will be willing to adopt these rigid guidelines. If they do, it should lede to a more consistent experience across the platform. However, I have strong doubts that these standards will be maintained by the likes of Samsung.