Blog

Living in a Material World

One of the larger design trends that started picking up momentum towards the end of 2014 was a design paradigm from the design team at Google called “Material Design”. I’ve personally been on board with most of the interface design that comes out of Google and hope that this trend continues to pick up steam in 2015.

So what is it? Material is a design language that’s rooted classical design. It uses the three dimensions of the physical world as a jumping off point, and blends nicely with technologies of today like touch input and voice recognition.

After reading through their thorough documentation and using some Google apps that utilize Material (in this case Inbox, and Maps both for iOS), I’ve had some observations that I wanted to share. I think that this goes a long way in defining what good design is currently and how things should respond in regards to human computer interaction.

It’s nice to see a large company that has lots of data to lean on begin to release this type of design documentation and make it publicly available. Apple consistently puts out really well designed software and hardware, but they release little information in regards to design best practices. Stuff that that designers can actually use in my day to day job. Most of the design documentation that Apple releases is specifically targeted for developers.

With that, here’s a couple things that I’ve learned about Material just from using apps that are built on it’s principles.

Primary Actions

Primary actions are always in the bottom right

Primary actions are always in the bottom right

Most used actions, such as new message or directions are always located in the bottom right corner of the screen. This is without a doubt a mobile-first design principle. We all hold a phone from the bottom of the screen, so it makes sense to put primary actions at thumbs reach. These actions are generally set apart with a contrasting color – which is basic good design.

Touch Feedback

Material always "echoes" your touches

Material always "echoes" your touches


Tapping on a “Material” will always provide feedback that your “touch” was registered. This was one of the first things I noticed when using the new Maps app. It’s such a subtle thing, and something I would have probably never thought of, but it’s so powerful to let a user know that your input was heard on the other side of the screen.

Smart Motion and Transitions

All of the motion design that happens within the Material system is rooted in the physical world. Touch an item in your inbox and it will expand out of that. This isnt rocket science, it’s just well implemented. Everything you interact with in Material seemingly moves as it would if the elements were in the physical world. It’s hard to explain because most of the transitions are quick, subtle, and crisp. It’s certainly something that most teams would ignore as nice to have (and you could argue it is), but seemingly makes a world of difference when you use a Material app. Nothing is over the top either, just subtle and nice.

Consistency

The holy grail of all multi-faceted software companies is to make all of your apps and websites look and behave the same. I’ve encountered this problem first hand and it’s a tough one to conquer. I think the documentation around Material will go a long way to making all Google products consistent, not only in typography and colors, but deeper stuff like movement of elements, cards, feedback, and more. Use one Material app and you likely could use them all. But as more people buy into this paradigm, more apps begin to be better designed from the ground up and the entire ecosystem becomes a better place.

Desktop and Mobile are Merging

Comparing the Inbox iOS app to the desktop web version

Comparing the Inbox iOS app to the desktop web version


Using the Inbox iOS app and the Inbox web app at inbox.google.com shows that the two are merging into one experience. Using the same elements and interactions – the only real difference is in the input and screen real estate. This is an interesting shift since most apps are “mobile first” or “mobile and desktop versions”. Using Material, the design is seamless across devices, which I think we’ll see more of in 2015.

Bennett Leader