Skip to main content

Google’s “Material Design” is defining UI’s future

First off, what is “Material Design”?

“Material Design” is Google’s new visual design language. It was introduced at the 2014 I/O Conference in June, and it is beginning to find real traction in progressive areas of the design and UI world. It also provides some interesting insights into where Google plans to take the web.

Even beyond the visual, “Material Design” attempts to address some of the most challenging aspects of interface design and user interaction in a multi-device ecosystem. With the advent of “Handoff” in OSX, it’s now much more apparent to the general user that each interaction on the web is no longer tied to the device where the interaction was initiated.

It’s totally reasonable to assume that a user might start something on an iPad at a meeting, Handoff it to their laptop for some desk-work, and then finish it off on their iPhone while on the subway ride home. Similar to the “Handoff” concept is Google’s Chrome Sync, although that never really captured the general users understanding like “Handoff” — perhaps because “sync” was the wrong analogy. Addressing this shift to multi-device expectations in the user base, “Material Design” attempts to fill the gap between today’s “web experience” (browser, app, other) and a humanistic interaction based model.

In it’s simplest form, Material Design is based on the qualities of paper.

“Paper,” you say? Yes, paper. Humans understand paper. Paper has tactility, function and purpose. Paper is an analogy we understand. If Google’s “Material Design” Specification is correct, paper also provides the perfect model for reengineering how users interact with their digital world.

material design, graphic design  material design, website design, design language  google, website design, design language

The 3 principles of Material Design are:

1. Material is the metaphor

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances. Yet the flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.

The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space in relation to each other. Realistic lighting shows seams, divides space and indicates moving parts.

2. Bold, graphic, intentional

The foundational elements of print-based design—typography, grids, space, scale, color, and use of imagery—guide visual treatments. These elements do far more than please the eye; they create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerses the user in the experience.

An emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user.

3. Motion provides meaning

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.

Let’s take a look at one example of how these principals translate into action.

From the “Animation” Section of the Material Specification:

Authentic Motion

Perceiving an object’s tangible form helps us understand how to manipulate it. Observing an object’s motion tells us whether it is light or heavy, flexible or rigid, small or large. Motion in the world of material design is not only beautiful, it builds meaning about the spatial relationships, functionality, and intention of the system.

Mass and Weight

Physical objects have mass and move only when forces are applied to them. Consequently, objects can’t start or stop instantaneously. Animation with abrupt starts and stops or rapid changes in direction appears unnatural and can be an unexpected and unpleasant disruption for the user.

Best Practices

A critical aspect of motion for material design is to retain the feeling of physicality without sacrificing elegance, simplicity, beauty, and the magic of a seamless user experience. Here are some guidelines to help translate these concepts into animations.

Do. Motion with swift acceleration and gentle deceleration feels natural and delightful.

Don’t. Linear motion feels mechanical. An abrupt change in velocity at both the beginning and end of the animation curve means the object instantaneously starts and stops, which is unrealistic.

Do. Enter and exit frame at peak velocity. The ball enters and exits frame at peak velocity, creating a confident transition.

Don’t. Speed up when entering or slow down when exiting. Don’t distract the user with unnecessary changes in velocity.

Making adjustments

Not all objects move the same way. Lighter/smaller objects may accelerate or decelerate faster, because they have less mass and require less force to do so. Larger/heavier objects may need more time to reach peak speed and come to rest. Think about how this applies to the various UI elements in your app and consider how their motion should be represented.

For those of us who adopted “responsive” early-on as the model for the future of the website development and interface design, at first glance “Materials Design” might seem like old news. Yet, digging a little deeper, those same early adopters may glean from “Material Design” the merging of the responsivity model with a new model for user interactions that follows a similar path of reasoning.

Just as Apple moved away from skeuomorphism in 2013, it appears Google is doing the same in 2014, albeit in a very different manner. As “Material Design” is a metaphor, it can extend upon, and draw from, the real world to inform interactions without attempting to “mimic” the real world. While imitation may be the highest compliment, the user knows that the object being mimicked is just a representation of reality rendered in a computer — it’s still not “real.”

In so, rather than struggling to replicate reality, the abstraction provided in “Material Design” challenges the designer to pull from the physical world only those elements which can serve to inform the user or enrich the user experience. Rather than aiming for simply a “flat look” (ahem, iOS8), “Material Design” has both (i) an ascetic [like it or hate it, it has one] AND (ii) a mantra of human-centric thinking. It’s that mantra that makes all the difference, and we think it shows.

Again, let’s ground this in a real-world application provided in the Specification.

From the “Components” Section of the Material Specification:

Bottom Sheets

One way to present a set of actions to a user is with bottom sheets, a sheet of paper that slides up from the bottom edge of the screen. Bottom sheets offer flexibility in the display of clear and simple actions that do not need explanation.

When displaying a bottom sheet, it should animate upwards from the bottom edge of the screen. The previous content dims to give the user context of where they were previously and the modal nature of the choice. Tapping on the dimmed area dismisses the sheet, as does swiping down on the sheet. If the sheet contains more actions that can fit in the initial display, the sheet is scrollable. Scrolling should also pull up the sheet container and eventually cover the entire screen. When the action sheet covers the entire screen, add a dismiss button to the header, on the left-hand side of the title.

The ubiquity of Google will mean “Material Design” will inform the expectations of all users soon enough. Until then, we’re setting out to learn whatever we can from the smart folks at Google and their move to “Material Design.” Should you wish to join us, below are some helpful resources to get started.