Material Design Philosophy
My application of the Material design system
Material design encourages consistency, uniformity, and component standardization across multiple device platforms: web, mobile, and tablet.
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
I 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.
The 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.
I categorize accessibility in three ways: contextual clarity, interactability, and legibility.
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.
Legibility refers to the human consumption of digital information: typography, iconography, graphics, and colors.
To enhance our app's usability and to standardize our Android toolkit, we decided to move towards a Material-esque design system.
My first exploration was using the Material Sketch library plugin to generate a standardized palette using our brand requirements.
Working with our developers, we're harnessing the Material Android Component Library to create a design system that allows developers to more clearly understand our Android interactions.
This is being applied to our current Android application for a future usability upgrade.