clock menu more-arrow no yes mobile

Filed under:

Material world: how Google discovered what software is made of

The next era of Google design is about software as substance

“It is a sufficiently advanced form of paper as to be indistinguishable from magic.”

Matias Duarte, vice president of design at Google, is telling me about the central principle of Material Design. It’s the unifying metaphor behind Google’s new design direction, providing a unified set of physics and rules for how software should look and act. It’s also a little weird.

The design team at Google felt the need to come up with a more coherent look and feel that could be applied across all of its products, from Android to Chrome OS to the web. Rather than starting with a palette of colors or a big set of guidelines, they started with a question.

What is software made of?

Matter and form

The answer came from a design exploration, when Jon Wiley, principal designer for search, and his colleague Nicholas Jitkoff were looking at the now-ubiquitous cards that Google started using in Google Now. They looked at those sliding cards and wondered: when you swiped one away, what was underneath?

Material_design_music "It's colorful in a way that the logo is colorful."

"It sounds like such an innocent question," Duarte says, "and yet it was such a powerful spark." It led the team to come up with a new way of thinking about the software elements we use and (virtually) touch every day. Instead of just talking about pixels on a screen or abstract layers, the team imagined that these cards and the surfaces they slid around on were actually real, tangible objects.

If these cards were an actual material with its own physical properties, that would mean there would be rules for how they must act and move on the screen. You couldn’t do anything you wanted with them, just like you can’t just do anything with physical objects.

So the team set about creating this metaphorical material, which is a little bit like magical paper. It’s flat, it floats slightly above the surface of the background, it tends to be white. There are consistent drop shadows, and a consistent light source illuminating them. Things tend to not just vanish when you move them, but slide away. They don’t shuffle around on their own, but only move when a user moves them.

Combined with the decision to move towards bolder, brighter color choices and larger typography, the material and the look of it were the seeds from which the rest of the design grew. You can see the first implementation of it in Android L: it has a variety of colors and sheets that slide around and over each other, but still give you a sense of place and consistency.

Wiley and Jitkoff say that this new aesthetic is more of an evolution of Google’s design philosophy than an about-face. In 2012 and 2013, Google embarked on a design initiative called Project Kennedy, which began the process of unifying design across the company. Now, with Material Design, it’s about moving it forward. "As a whole the platform conveys this feeling of polychromacy," Jitkoff says, "it’s colorful in a way that the logo is colorful, it’s simple in a way that the front page is simple."

Creativity and constraint

Material Design "unified us in our thinking," Duarte says, admitting that "it’s absolutely a constraint." These constraints, he says, made design decisions easier and more consistent. Take, for example, the idea of flipping a card over to see what’s on the back. In Material Design’s world, that’s a cheat that doesn’t work. It’s as if the software is actual, physical stuff inside these devices, and there’s not space inside a phone to flip a card over, so Google doesn’t allow itself to do it.

We’re hardwired to comprehend physical things, Duarte says, and software all too often behaves in ways that break with our models and expectations. Wiley thinks of it as breaking the suspension of disbelief, as when something happens in a sci-fi movie that doesn’t follow its own internal logic. Duarte is a little more direct, with a subtle dig at Apple’s iOS and its flying software layers: "We’re not hurtling you through space at high speeds," he says. "We’re not puncturing your hand with invisible, impossible surfaces."

"Design is all about finding solutions within constraints," Duarte says, "If there were no constraints, it’s not design — it’s art."

"Design is all about finding solutions within constraints."

Google’s designers steadfastly refuse to name the new fictional material, a decision that simultaneously gives them more flexibility and adds a level of metaphysical mysticism to the substance. That’s also important because while this material follows some physical rules, it doesn’t fall into the old trap of skeuomorphism. The material isn’t a one-to-one imitation of physical paper, but instead it’s "magical," as Duarte puts it.

It can do things that physical paper can’t, like grow and shrink with animations. Those animations were important to Google, because they help users understand where they are inside an app. "A lot of software … kind of feels like television or film in terms of jump cuts," Wiley says, causing you to lose your sense of time and place. For apps, you want something more akin to a stage play. "It’s going from one moment to the next," he says, "that scene change, and what’s happening onstage is choreographed and transitioned, and there’s meaning."

Material_calendar_gif

Materialize

The other, more important thing that this material can do is appear when you need it. Google has been working on the algorithms behind products like Google Now for years, and it’s become an essential part of this new design philosophy. Instead of asking users to manage their data, Material Design is asking users to trust that Google will show them what they need at the right time.

"With watches, you don’t want to spend a lot of time interacting with it."

That’s why the Android Wear smartwatch software doesn’t give users the ability to do much except respond to notifications. Alex Faaborg, the designer for the platform, says, "With watches, you don’t want to spend a lot of time interacting with it. You just want to be able to glance down and see information and quickly do a voice command." He says it’s "in the same spirit as a lot of the work that we did for Google now, but it’s for the entire platform."

That’s a lot of trust to put into Google and into its magical paper material, but Duarte says there’s a reason for that. "We did it in order to come up with the most simple solution. One of the design practices that we like to follow is try to design the simplest possible thing for the user first. See if you can get away with that, prove that you need more complexity before you add it."

Img_9884_verge_super_wide

Parc 3.0

There’s more ambition behind Material Design than just bringing a consistent look and feel across Google’s software and webpages. It’s bigger than Android L, bigger than Android Wear. It’s about the relationship between the metaphors we use to think about computers and the technologies we use to interact with them.

Material Design is about much more than Android

Duarte points to "the brilliant work that Xerox Parc did with windows that could overlap and mice that point and click, [it was] groundbreaking." But it wasn’t groundbreaking because it was a virtualized version of a real desktop, but instead because it "had object relationships." That meant that people could form a model of how the world of the computer worked and make sense of it. Apple did a similar thing with touchscreens, moving us past point-and-click to a world where we could directly touch and swipe elements.

Now Google believes it has a software design model that moves us forward yet again. Wiley points to the multiplicity of input technologies we have available to us today: touchscreens, gestures, voice commands, even Google’s own intelligent algorithms. They all need to combine to give our brains a model of how software works, one that functions across devices to help us intuitively interact with anything we encounter.

Material_design_book

Material Design is the framework that Google believes creates that model. It’s too much to say that it’s as revolutionary as Xerox’s desktop model or even Apple’s iPhone. But it does seem to have the necessary combination of simplicity and flexibility to help us make sense of the new technologies that we’re being assaulted with every day. And if Google can actually make good on its promise to implement it across the web, Chrome OS, and Android, it will help us transition between them without having to reorient our cognitive models of what software is and how it works.

Right now, Material Design is only just an idea, and it will remain as fictive as the mystical substance it’s based on until Google actually ships more software that uses it. But as Wiley points out, "We’re at the very beginning of this." And Google is busy setting itself up for whatever comes next.

"What if we could design for the materials of the future instead of the materials of today?" Duarte asks. "That future is right around the corner."