Today as we cast our eyes across the digital landscape we see websites and web apps that have the Material Design framework at their core.
We have moved from being purely consumers of Google products such as Gmail, Google Docs, Google Drive and Slides etc in our day-to-day lives to building our very own products for our customers using the same building blocks and methods that these Google products are built on.
The question is how did this specific framework entice so many designers and developers to adopt Material design as a foundation to build amazing experiences for their customers?
Here are a few good reasons that may answer that question …
It’s open-source and it’s free
“Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.” – Material Design
The following points illustrate this exact statement. There may be other free or open-source frameworks out there, but none compare to the vast resources and guidance offered by Material Design.
It has a defined visual language that utilises good design principles
Inspired by the material world. Material surfaces reimagine the mediums of paper and ink. This concept or visual metaphor replaces flat design (focused on a minimalist use of simple elements, typography and flat colours) and skeuomorphic design (UI components that mimic their real-world equivalent in how they appear and/or how the user can interact with them.)
It is a flexible foundation and works across all platforms
The Material Design system is designed to enable brand expression. It’s integrated with a custom codebase that allows the seamless implementation of components, plug-ins, and design elements. This means designers and developers have the creative freedom to add their unique branding and identity to the digital products they build with Material.
Material Design maintains the same UI across platforms, using shared components across Android, iOS, Flutter, and the web. This frees up time and resource for both designers and developers to create a unified experience for both their web, Android and iOS users.
We can build digital products for our customers using UI patterns, components and iconography they are already familiar with
Common UI patterns and UX flows together with familiar iconography and components help to build intuitive experiences for users and reduce unnecessary cognitive load when they are using these products.
We are updated with defined standards and guidelines
Whether new components have been added or updated, or if there is new guidance – for example, on accessibility for imagery or form elements – Material Design is constantly delivering new and relevant content to keep us updated and informed, thereby allowing us to make the best decisions in our day-to-day design and development roles.
We have access to a wide range of additional resources
Demos
Designers and developers can view live examples of components and screens
Example: Buttons
Resources
Colour tool
This is a fantastic tool for novice and experienced designers to use when exploring the colour palette for your theme
https://material.io/resources/
Gallery
If you are familiar with handoff software such as Avocode, InVision or Zeplin then you will be at home with Gallery. A free solution to host your designs and share with developers
Responsive layouts
As with any good design framework, the Material Design responsive layout grid adapts to common screen breakpoints, ensuring consistency across devices and layouts. They even have a handy tool to view your live pages in different screen widths.
Interaction and Motion
Interaction and motion also offers the user constant feedback as they navigate or interact with the user interface. This layer in the user experience also adds life to components or screens by providing movement and graceful transitions from one moment to the next.
Iconography
Material Design offers five different icon styles to choose from. These are universal and easily understood.
Design and development deliverables
Designers can download Sketch files which include all default components and styles. In addition, a Sketch Open Theme Editor Plugin can be downloaded and used with Sketch to create and update your own Material Design themes or upload your designs to Gallery. This means designers can hit the ground running, from the very start, accelerating their workflow and ensuring consistency across their designs.
Glitch.com
The Glitch theme builder is really useful for designers and developers to test and experiment with live code for components and styles included in your custom Material theme.
Most importantly … we can sharpen our focus and attention on building better digital experiences for our customers
With less time, effort and resources spent on creating, defining, testing and maintaining our own custom in-house design framework, we can build on the rock-solid foundation that is Material Design.
This means we can focus on what is most important.
Exploring, identifying and developing effective and valuable task flows and user interface experiences. We can focus on solving the most critical problems that users face every day.
We can build better digital experiences.
