Google didn't spend enough time on Material Design during the keynote. We saw a beautiful video and learned a little bit about the intent and thought behind Google's new cross-platform look (which we actually saw a bit earlier than anticipated), but there's so much more to be said. Having attended as many design sessions as possible during I/O, I think it's worth taking a somewhat closer look at Material Design. In this post we'll attempt to scratch a little bit deeper into what Material means, why it's awesome, and why it's a forward-looking move for Google.

We'll give a quick look at some of the fundamental principles of material design, while avoiding restating the extremely detailed and thoughtfully crafted design guidelines. The real focus here is the purpose behind the design principles, not the principles themselves. That said, get out your glue sticks and your pinking sheers and let's get started.

materialheader

Paper & Ink

The fundamental inspiration behind MD is a pair of simple materials that have been in use for a long time now - paper and ink. Paper is considered the canvas and the element that defines structure in an interface, while ink is the color, the ripple animations, the dynamism of motion, and the "flair" of the design. Paper in Google's vision isn't just paper though. It has the approximate depth of cardstock, but behaves as "an advanced technological substance" with its own quirks, motion, and - of course - terminology.

Co-Planar Paper

A fundamental term to understand when talking about material design is "co-planar." In reference to paper, it means two pieces of paper are on the same plane or level on the Z-Axis. The pieces can either sit close to each other without touching (called a step), or they can be right next to each other, meeting at a seam. The image below shows two pieces of paper joining at a seam near the bottom, with a wide step above.

image

Layering & Z-Axis

One of the big components of material design is depth and the z-axis. The z-axis is perpendicular to both the x- and y-axes, and developers will be able to position elements on this axis. But they won't be positioning things on the z-axis just for kicks - Android's L release has a surprisingly powerful rendering system that, based on an elements position in space, correctly calculates and renders a perfect soft shadow, generated using principles of global illumination. Shadows can change depending on how the element animates, but will stay accurate.

Chet Haase, in the Material Witness talk, explained that those working on material design decided specifically not to go with orthographic projection, where shadows expand based on their position, and also decided to render ambient shadows rather than spot shadows. This means that the shadows on interface elements in L won't have completely dark spots - the light rendered (oh yeah, there's an actual light source built in to figure out where the shadow goes) bounces around elements like it would in real life, providing a softer shadow.

FAB

The FAB is going to be huge for Android design. In case you're wondering, FAB stands for Floating Action Button. It's that little circular bottom floating in the bottom right corner of Google+, but it can be so much more.

image

The FAB is intended to provide an obvious and easy point of access to users for the "hallmark action" of each view in an app. So for Google+, the hallmark action is creating new content. For something like a mapping app, it would be getting directions or starting navigation. Likewise in a music app it would be play or pause.

The FAB is flexible. It can expand into a list of smaller FABs anchored to the main button, or it can expand into a new surface entirely. If used for a play/pause control, the FAB could expand on press to a whole new surface, including play, fast forward/rewind, and tracking controls.

The FAB is a standout feature of material design - it's not only recognizable and familiar, but it creates an instant understanding of the core kernel of functionality for each view. It tells users what they can or should do next to get the best experience, and that's awesome.

Color & Contrast

Another crucial aspect of material design is color and contrast - Android's designers and engineers have gone the full mile in an effort to bring color to Android. Previously, the palette for holo designs was limited - developers were encouraged to bring their brand colors to apps, but it wasn't as easy as it should have been, and with holo's default themes there wasn't too much incentive to actually do it in a meaningful way.

image

That is all changing. With Android L, developers will be able to easily splash various colors of ink into their apps, with complementary imagery encouraged. The design spec offers an enormous palette of colors, but developers will get to use another tool to make things even easier.

Palette

Palette is a tool aimed at making in-app colors consistent, sensible, and easy to accomplish. Using the dominant RGB value of existing elements, Palette can generate... a palette... of colors for use that developers can either name by value or by their palette name. By default, Palette will generate a selection of colors based on Muted and Vibrant colors in the source asset, breaking them out further into Dark Muted, Dark Vibrant, Muted, Vibrant, Light Muted, and Light Vibrant. A larger palette is possible, but even this default configuration is highly impressive and useful.

A New, More 'Optimistic' Roboto

Christian Robertson is the lead designer of Roboto, the type family that's been the standard in Android design since Ice Cream Sandwich, slowly, silently expanding and evolving. With the unveiling of material design, though, Google is openly celebrating the biggest set of changes to the family since its introduction.

image

On its page in the design spec, Roboto is said to have been "refined extensively" to make it more versatile. Refined indeed, the family has re-styled K glyphs, an R with a straighter leg, and glyphs that are - in general - more round, inviting, and - in Google's words - "optimistic." Just take a look at the dots - the exclamation point, the lowercase I and J all have round points instead of square. Round forms are warmer, more comfortable to read, and point to a better type rhythm that's ever so slightly easier to read.

Google's also worked out italic complements, adjusting some angles and strokes to appear more balanced.

The changes are subtle to most users, but they amount to a dramatic facelift for the typeface. A welcomed change in a small, 1.2MB package.

Imagery

With Material Design, Google is finally making strong suggestions for in-app imagery.

style-imagery-style_philosophy_large_mdpi

Like Google's own products, designers and developers are expected to be personal, informative, and delightful with their imagery, be it photos or illustration. The crux of Google's imagery guidelines is this - users should get relevant information, presented in a way that relates to them on a personal level. This makes the experience fun. Imagery should be immersive, should create depth, and above all, should be thoughtfully used.

Going a bit deeper, imagery within apps should be consistent and cohesive - don't mix hand-drawn assets with clipart. Imagery should be comfortable, and shouldn't feel out of place.

Google even defines the difference between an avatar and a thumbnail - avatars are circles, and represent entities like people, companies, etc. Thumbnails, meanwhile, are square and belong among homogeneous content like reviews, general copy, etc. Thumbnails should also be actionable.

style-imagery-principles-immersive_20obscure_large_mdpi

Finally, hero images - Google breaks these into two parts: featured hero and integrated hero. Featured heroes are bold points of focus with as little surrounding content as possible. Integrated heroes on the other hand take less focus from the content, and are used to add texture or depth without distracting.

The expectation of imagery in apps is one way in which material design bridges the gap between simple flatness and highly stylized design - imagery makes use of all those pixels on your screen, but it complements the overall design philosophy and isn't used for ornament alone.

Telling A Complete Story With Motion

Motion design is every bit as important as visual design in Google's new vision. Google wants developers and designers to tell a complete story with motion by animating surfaces, elements, and buttons appropriately.

The main goal here to make users feel in control of the interaction. During the design-oriented sessions at I/O, Googlers stressed the importance of users driving the interface. Surfaces should be magnetic to touch. Animations segue user-initiated change to the interface. The user gets to see where everything goes and what it does - there are no mysteries.

anim1

Material design is based on reality - real objects have surfaces, edges, and borders. But motion adds choreography. If you put a glass of milk on a table, you expect it to stay there - not fly up to the ceiling. In the same way, users see what happens to elements and can remain calm and comfortable knowing that things will behave as they expect them to.

anim4

UI content has an introduction, interaction, and resolution. And each step of this process must keep in mind familiarity, the scene's choreography, and the craftsmanship of the animations involved.

Motion isn't just reserved for large changes, though. Things like the new loading spinner and rotation lock in the quick settings panel are great opportunities for follow-through, where users can be delighted by motion down to the last detail.

anim5

Google also encourages designers to end loading indicators or other motions with punctuation, like a loading spinner that ends with a quick snap, check mark, or other "all done" indicator.

Grids

Massimo Vignelli famously posited that grids are like the underwear of design (he was talking about books, but it works). Google gives designers guidelines for grids - interfaces work best with certain alignments like a key line at 16 and 72dp, with another line 16dp in from the right, or that type should be used with a 40dp baseline grid, but what's important here is not the exact measurement.

image

What's important is that Google is telling developers and designers to use grids - for interfaces and even icons. Grids are one of those things where no one will know if you did it right, but they'll certainly know if you did it wrong. Grids underlie content and make things look orderly. When a grid is poorly implemented, things look and feel off, and Google's making its best effort to avoid this by giving us some ideas about what works best.

And So Much More

It's clear that Android's designers and engineers have put a ton of thought and effort into Material Design, and the information they had to share at Google I/O felt complete, thoughtful, and meaningful. Providing tools like Palette and the shadow rendering system will make it just a little easier to create compelling designs while getting many benefits of good design "for free," as Google puts it.

Everyone - developer, designer, or otherwise, should look at the Material Design spec. It's a detailed explanation of Android's new fit and finish, with rich examples and explanations.

Looking Forward

Something that's easy to overlook as an everyday user is that material design is actually very forward-thinking. The philosophy is making the best of demands for a "post flat design" solution, while saving plenty of room for the future.

It isn't flat for flatness' sake. And in reality it isn't flat at all. It lacks fake leather stitching, green felt, or self-indulgent gradients, but everything built in material design has depth - implicit or explicit - that is real, tangible, and ready for the future. When and if 3D technology (like that in Amazon's Fire Phone) catches on in interface design, material is ready with shadows and depth rendered accurately in real time. Its goal of maintaining 60FPS smoothness across interfaces won't look any less beautiful in the future, and it still leaves room for creativity. What's more, material is about more than mobile. Google wants this to cover all platforms from Android to iOS to web. A design philosophy that can bridge these gaps is huge, and gives Google a huge leg up over competition in terms of complete product consistency across all devices.

What Now?

The transition to this new design language won't be easy. Whether developers will digest, internalize, and remember the guidelines while developing apps is yet to be seen. Holo adoption was a slow and winding road, but it feels like Google is making a much better effort this time around to explain what the guidelines are, what they're for, and why they're awesome both for users and developers. That said, there's something that just feels off about holo themed apps running in an otherwise paper-oriented system. To feel great, everything needs to transition. It's hard to say whether Google has convinced developers to jump on board yet, but other driving factors may compel popular apps to pick up the pace.

Design as a Selling Point

This is something I've drafted (and never published) several pieces on - with Holo, the Android community underwent a major shift of consciousness. Once everyone saw what an app could be (compared to the days of Gingerbread), everyone knew that Holo was what an Android app should be. As misguided as some of that sentiment could be (strict Holo adherence doesn't work for every functionality), the attitude is appropriate.

Design has effectively become a selling point for Android apps, and every user - on some level - has become a critic of interface design. Sure, the proportion of users who demand the latest and greatest in Android design are relatively small compared to the overall Android install base, but they are vocal, ready to adopt apps that look and feel great, and are ultimately pushing the ecosystem further.

Still, there's no telling when or to what extend developers will join the nascent material party, but when they do, we're all in for a better experience on Android.