materialdesign-goals-landingimage_large_mdpi

Google’s Material Design is Paper Thin But Volumes Deep

July 2, 2014 - Written By Phil Bourget

Material Design is a word that’s been thrown absolutely everywhere since Google I/O concluded last week, and those that will develop for Android L, based on the Material Design guidelines know what it is.  Those of us that saw the keynote presentation on YouTube, had a Nexus 5 or 7, then went and put the L preview on our devices may not, except that it’s why Android looks completely different.  The Material Design look is one that is more unique than iOS 7 was last fall, and in different ways, except for one.  One single aspect, one letter, connects iOS 7 and Android L ever so minimally, and that letter is ‘Z’.  The z-axis, the third dimension (in iOS the parallax wallpaper idea) is thrown into all of Android L and Material Design, and that’s one of the best parts.  L and Material Design are supposed to be digital parts of our real world, so why should they be flat, two-dimensional parts of that three-dimensional world?  Google’s Material Design guidelines and current preview show what Android is supposed to become, and Google hopes that it becomes a digital extension of our lives, just in our hands, pockets, bags, satchels, etc.  Android Police did their own job of describing Design,and here’s our take on our latest design guideline.

Material Design is the new set of guidelines for developers to update their apps with these new, depth-related standards in mind.  But why?  Why would Google feel the need to make Android deep (having depth, that is)?  Well, it’s because of where Google wants to take Android, and what they want to make Android into, and, according to Liam Spradlin over at Android Police, that is a “beautiful, dynamic scrapbook”.  And I would have to agree.  Google’s Android is becoming like looking at paper, with bright colors, vivid contrasts, and pictures, with things layered over top them, like stickers on a picture you put up on your mantle of your trip to Greece from last summer with your friends.

The idea that Android will become a scrapbook for our viewing, sharing, and using pleasure is solidified by the paperness of Material Design.  The phone or tablet, the screen, the elements that you see already presented to you are the paper, the backdrop for what you’ll do in using Android’s Material Design.  The splashes of color denoting titles, and where there are different kinds of files in Drive are the ink that’s been placed on the page for your interactions and use.  The new animation that occurs when you tap on something, the darkness, the ripple, the dent or indentation, that you make, is one similar to is you poke paper in the real world, it reacts, and you can see it react.  Material Design is the digitization of the paper that we want to interact with.

Remember back a few months ago, when Google+ got a whole new aesthetic look, with that button floating in the bottom right?  That was a glimpse of the idea of a floating action button.  The button has height and depth in the three-dimensional plane of your screen.  It sits below the navigation and status bars, as those are the top layer, but above the content and page of the app itself, and is dynamic, that changes if you tap on it, wanting to post something, it opens up a window, something that lets you see the content behind it through the cracks, but floats above it in the screen.

The idea of color, the ones that you see in system applications, but also the ones you see in any developer’s app, when using Material Design, will change.  Before it was a guideline, with holo from Ice Cream Sandwich and Jelly Bean (Android 4.0 and 4.1-4.3.1 respectively) and the greyed-out-ness of Kit Kat (Android 4.4) on top of it, but with Material Design, it may still be called a guideline, but now, with how drastic and elegant Material Design looks compared directly to holo, it is more of a theme for developers to extend into their apps.  The colors are flat, not glossy or super intense like a tomato red (except in Google+, obviously), but look like bright scrapbooking paper.

A scrapbook is incomplete without text to describe the photos and colors, or tell you what you’re looking at?  The system font, Roboto, first premiered in Kit Kat, got a type-facelift, changing the curves of some previously sharp-edged letters (namely K and k, as well as R, and the dots in i and j) and reshaped and recontoured the rest of the letters, to look more like something you’re bound to see in your keyboard.  The font is, according to Google, more ‘optimistic’ of a Roboto, with round shapes being easier on the eyes and making themselves more warm in the vision of someone.

Pictures are always the center and reason for a scrapbook, and Google highlights the importance of what the pictures that developers use.  The pictures need to be useful, possibly having information within them, and be implemented in a way that adds to the system depth, but also creates depth within the individual app.

The G also wants the user to cause their own experiences.  If something needs to be tapped, have it raised like a button, inviting a push to cause something.  If a user wants to tap the + to add a person from messaging to contacts, the button is pushed, shows depression, and opens the new contact page from there, from the bubble or position of the + out to fill the rest of the phone.  When tapping a contact in the list of names and faces, the name moves up, the information comes out from under the contacts below it on the list, and the contact photo shows itself from behind the contact information.

The layout of anything is a grid.  Any and everything you look at could be sectioned off with grids, and Material design is no different.  They have been changed, the grids, from Kit Kat and holo, but keep the same content, just spread and space it out differently.  The border between screen-edge and end of list item content is larger, and space between a contact’s picture and their details is slightly new too.  But the idea is that the grid now is a central, important, and guiding principle for when a developer goes to make or redesign an app, so the grid from the contacts is like the grid in messaging is like the grid in the tasks app is like the grid in the dialer.  Continuity is a key component to making an app that people want to use, not just download and have in their app drawer.

The idea that how an app looks causes sales to be different is not new, nor is it untrue in many cases.  An app can be the most novel and great idea, providing new and needed functions to the user, but if it is cumbersome and unappealing to look at while using, then it has barred itself from sale to people that care more about how an app looks than the person that downloaded it first did.  The app is a product, and sometimes a storefront, and needs to be appealing to accomplish sale of itself or its own products and features, so Material Design will help guide the developer to having a lovely little shop that customers love coming in to peruse the latest issue of their favorite magazine.

Material Design is like holo, like holo is like Gingerbread (Android 2.3); they are new, different, and revolutionary, and they all set the standard for the next two to three years of Android and its design, so Material Design will guide us for quite a while, if Google has anything to say about it.