As the complexity of designing for the web only continues to become more complex, creating an experience that not only looks great but feels just as natural to use with by touch as it does by mouse and keyboard is hard to accomplish. Recently, Google has been attempting to champion the digital design world by creating its own design language called Material Design. Google’s goal for Material Design is to “create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.” Read on to see if Material Design might help be an asset to your design process and see what a complete departure from trends like Flat Design looks like.

What is Material?

Material design is based on the metaphor of material, a concept inspired by the physicality of the real world. Think of material like a sheet of paper. You can touch it, it feels real and follows the rules of physics in a predictable way. It’s three-dimensional, it can be destroyed but doesn’t disappear without warning or move through a seemingly solid surface. Material design is based on that same concept. By designing a system in which space and motion are a natural part of the experience, the digital world can melt away and blend in with the natural world. Users are able to learn and understand how to use your application because it feels natural, and it emulates the laws of our world that you expect and understand without having to think twice. When trying to understand what material is, think of interface elements as sheets of paper. You can see this in use in any Google application, from Google Play to Google Plus. Each one has the same thickness and they may share space horizontally or vertically, but each has its own space reserved along the z-axis. This sense of three-dimensional space is indicated by the direction and intensity of the shadows it casts in its environment.

Design Characteristics

Emphasis on design fundamentals like color, whitespace, imagery and typography serve to enhance the user’s experience by creating a clear path to goals and aid understanding. Design is crafted from a three dimensional perspective, meaning that light, depth and weight all have a presence and impact on material. Interfaces are composed of multiple sheets of material, each having a position along the z-axis and having a thickness of a single density independent pixel (dp). In a complete contrast to flat design, bold and saturated colors are a key characteristic in creating a material design. Generally, material color palettes consist of several bold colors and a muted and neutral secondary color like gray. Toolbars take on different shades of the main primary color, and supporting UI elements take on secondary colors. Text should be almost black on white, with secondary text in shades of gray. Material style guidelines also dictate the design of elements like icons and graphics as well. All supporting graphical elements should support a message rather than being purely presentational. When choosing and designing graphics, they should mimic the behavior and characteristics of material, and clarify the context of surrounding content.

Motion with Meaning

One of the strengths of Material Design is its emphasis on the importance of using motion well. Motion plays a huge role in supporting user actions and providing meaning and feedback. An object's motion is based on real world characteristics that help the user infer the nature of the object itself. Material objects operate under the rules of physics. They are stationary unless outside force is applied, transitions between states are fluid and natural, and changes in the physical state of an object should never be unexpected or unexplained. Three-dimensional space must be preserved as well. Since each material or object lives in its own space on the z-axis, stacking order must be maintained if objects move over or under each other. Motion should engage, focus and support user interaction based on the user's input with hand, voice, mouse and keyboard rather than being arbitrary. Applied this means that, for example, when touching a button to bring up a menu, the menu should smoothly transition to its visible, active state from the point of contact (the button). It will stay in the current active state until the user makes it inactive, never unexpectedly disappearing or appearing. Depending on the button or interface element, it might ripple, increase in size, or raise up on the z-axis when pressed. If activated through voice input it might change colors, raise up, or have another method that clearly indicates the state change initiated by the user's action. Check out the example of applied Material Design below. Try clicking a card and observe the ripple and where it originates from. Observe the hover states when moving over different cards, and how the use of shadow indicates the state of the card, and where user interaction is taking place.   [codepen_embed height="500" theme_id="12644" slug_hash="wtApI" default_tab="result" user="zavoloklom"]See the Pen Material Design (CSS-based) - Tiles by Sergey Kupletsky (@zavoloklom) on CodePen.[/codepen_embed]

Diving Deeper

This is just a taste of the principles of Material Design. While some principles seem rather abstract at first glance, Google's Material Design specification is helpful for seeing more detailed examples and help in applying Material Design to your own projects. Sprinkled throughout the documentation are best practices for everything from common design patterns to correctly applying drop shadows in different scenarios. Some components are freely available to download as well, including UI elements, icons, fonts, and color palettes. For more information head over to Google's Material Design specification.