Matt Schneider III

I. First Impressions

When I met Material Design it was hanging out on CodePen, sitting there on the front page in a classy-looking flat, shadowed divider. "Slick design," I thought, and opened it up for a closer look. The divider offered up a few simple buttons- I clicked one, and a color fill rippled through it like I'd dripped a drop of ink with my cursor.

I liked it, instinctively, but it was not without its questions. Why did the button change color? Was it meant to indicate anything other than the fact that I had clicked it? Did the fact that it was dusty red mean something other than if it had turned yellow, or blue? In a field of delicious visual simplicity, it stood out as the one unnecessary distraction.

Over the next week, I noticed these material design pens popping up left and right. While the unintrusive visual style continued to appeal to me, there was something unnerving about the motion. The technical skill displayed in making play arrows morph into stop buttons, or the lines of a menu icon rearrange to form a closing "x", was unquestionable. But did the design really need it?

II. The Readthrough

Eventually I decided to research this growing trend. A quick Google search revealed that it was, in fact, sparked by Google themselves. A design document outlined the important details.

Their goals, as listed, are to "create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science," and to design an experience that feels the same across multiple devices, whether you're using touch, mouse, voice, or keyboard.

Three sections that followed detailed the principles they intended to use to reach those goals.

Material is the metaphor introduced the visual approach: edges, textures, and lighting are to provide a relatable experience, as though one is looking at stacked paper.
Bold, graphic, intentional states that color, size, and imagery as used in material design create hierarchy, immerse the user, and make function obvious.
Motion provides meaning, lastly, indicates that the way things are animated in material design should be used to focus attention or provide feedback in a continuous, subtle way.

After the introduction come nine headings, divided into 51 subheadings, providing details for everything from the behavior of loading indicators, to the opacity of fonts, to choosing good photographic imagery.

It was a pleasant read. A bit dry when describing metrics, perhaps, but I don't expect anyone to be exciting while writing literature about margins and line-heights. It is clear to me that Google has a number of specific ideas about design, and for the most part, I agree with them.

I have my reservations, however, about making interfaces as "delightful" as they repeatedly mention. Little details like morphing buttons and circular loading indicators are suggested in order to delight users and show off "superb craftsmanship." Delighting users is by all means a wonderful aim, but when I watch these clever-clever animations I can't help but be reminded of the early 90s, when my classmates were first learning PowerPoint and insisted on using nine or ten different slide transitions per presentation. Am I being too harsh? Perhaps, but as material design ages I suspect that the "delightful details" will be the first part of the movement to make cutting-edge designers sigh and roll their eyes.

III. Takeaway

While this design document did a thorough job of explaining every detail of the material design language, I was still left with a few questions. What was Google's intent? Is this design document Google-specific, meant to be followed within the company and by developers for Android devices? Are all Android apps requested to follow the design guidelines or would a grungy steampunk messaging app still be welcomed with open arms?

Or perhaps the impact is meant to be more global. Are these meant as more than guidelines, outlining a new movement in design? Is Google expecting to see material design principles taught in college design courses, utilized in the next OSX update, gracing blog platforms and small company websites in place of skeuomorphism or flat design?

Only Google knows what they expect of this, and only time will tell how far it will spread. For now it is up to each of us to decide how to apply this in our design lives.

IV. Using Material Design

If you'll indulge me a brief vacation from the topic at hand, I'll say a few words bout the fictional lamasery at Shangri-la, created by James Hilton in his book Lost Horizon. The protagonist and his group are told of the monks there: "If I were to put it into a very few words, my dear sir, I should say that our prevalent belief is in moderation." This belief and the practices it encourages are held to be one of the reasons for Shangri-la's fabled utopia.

I would argue that if we wish to achieve utopic design in our interfaces, we must become postulants of the monastic order of Shangri-la. That is to say, we should practice moderation in all things, even in our moderation.

Reading Google's design document was a decision I will not regret, and I encourage you to do the same. It has a lot of important information to consider and is a good reminder to give text room to breathe, be intentional about color choices, and keep animations meaningful.

What I would encourage you not to do is follow it to a T. For one thing, it's a very long, in-depth list of instructions, and if you follow it in everything, without moderation, you will likely burn yourself out. In addition, you'll end up with a design that looks unmistakably like a Google product. I think it is of utmost importance that you work out a distinctive look for your own projects. Perhaps your goals are not the same as Google's- perhaps you need to convey a more magical tone for a fantasy game, or appeal more to coders or coffeeshop patrons for a business website.

In conclusion, these are my suggestions for you. Read the design document. It's well-written, it's fun, and the people who wrote it obviously know their stuff. But don't let yourself feel restricted by it. It is, after all, just one approach.

Oh, and by the way, about the thing with the animated circular color-fill on buttons: I have yet to see Google use it in the desktop version of an interface. I'm pretty sure it is intended to replace the feedback of feeling a mouse click that you lose on a mobile device. Something to tell the user, "Hey, I understand that you tapped that button. I got the input and all is well." My personal opinion is that it's made for mobile, and on the desktop it might be a little bit of a distraction and create information overload. Just a little something to consider before putting it on your web project.