08/14/2014 - No Comments!

This is Material Design

Google is not traditionally known for their design prowess. When discussing tech companies and their design aesthetics, many would shift their conversations towards Apple. Google has always prided itself on simplicity, clarity and accuracy. As our industry is shifting towards a higher understanding of the importance of these principles, Google has a head-start of leaps and bounds. Their design departments have recently published their principles on interface and product design, aptly named "Material Design".

I've really enjoyed reading about this shift amongst our industry, and specifically within Google. The focus has finally shifted to the content itself and the user's access and understanding of it. Pixel perfection, "bigger" logos pretty pictures may be a thing of the past for those serious about user-centered design. The principles outlined by Google align with my thoughts and feelings on the current design climate. They're combining traditional design principles with the power of modern technologies to craft truly engaging user experiences. As software designers, we often find that the most intuitive solution is both the most simple and that which draws from the principles of traditional art. I love how we're collectively embracing the foundations of design theory, coming back to the basics and delivering concise, clear solutions.

Below are a few of the core design principles of the Material Design visual language - I'm looking forward to watching these shape the future of product and interaction design throughout Google.


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 supercede 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.

materialdesign-principles-layersquares_large_mdpi

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.

materialdesign-principles-circleplus_large_mdpi

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.

materialdesign-principles-flyingsquare_large_mdpi

Published by: Ray in Thoughts