Material Design Philosophy

Principles

I consider it to be a developer-empowering design language. Designers can work within the usability guidelines of a proven system, which gives developers a systematic understanding of feature nuances without design having to fully articulate those nuances.

From a design perspective, teams can speak a common design and usability language. We understand which aspects of the interface require auto-scaling, font-scaling, and custom layout modifications - and can tackle those considerations in advance.

Most importantly, it provides a familiar usability experience for users across different application platforms. For instance, if I use Grubhub and Gmail, and both those applications harness a complementary pattern library, then the user can transfer affordance learnings across platforms.

Teaching a user a single design pattern is much easier than having to teach them 10 patterns across 10 different applications. Transferring from web to mobile helps

8-Pt Material Grid - Multiple Platforms

Core Heuristics

Surface LayersI interpret Material's surface construct as one of natural layering. The way we use layers in Sketch/Photoshop and how we perceived layered objects in the world world take on a quasi-skeuomorphic interpretation.

Hence, design patterns should adhere to a set of natural laws. These laws standardize an experience so that the user knows what to expect with a certain interaction.

Fluid motion, dynamic resizing, and drag-and-reorder are all examples of Material physics.

ComponetizationThe standardization of reusable components not only helps consumers interact, but also helps developers create consistent experiences. Instead of building components from scratch, developers can harness production-tested material-based libraries - allowing them to focus on quality of data and performance over component behavior. It also helps QA create automated tests for standardized components, which accelerates the QA process and allows them to focus on data integrity.

​My experience with componetization is very React focused. Early in my career, I applied Bootstrap (2 and 3) to various products for rapid development. However, Bootstrap didn't harness the power of React and was also messier to use when identifying classes.

React has really helped accelerate the componetization of toolkits, and helped created consistency across products I've worked on.

Contextual clarity means that the user knows where they are, how they got there, and how to return. It goes beyond navigation into intermediate states: loading, transitions, modals, and processing. If a user understands the context of the application environment, then the user can better access those contents - being able to drill deep into the information hierarchy.

​Interactability refers to clear CTAs that meet user expectations and receiving the expected feedback for those interactions.