What is Material Design?
“Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”
Matías Duarte, Vice President of Design, Google
Material is a metaphor for paper. It is a flat surface that can hold content, cast shadows, and stack on top of other surfaces. It also has the capability to expand and shrink in size.
Why Material Design?
Material Design has detailed guidelines about how a component should look and behave.
The guideline includes font sizes, dimensions, margins, and padding for each component. Following these specs will help you create layouts that look familiar to users. An easy way to apply Material Design is to utilize a material library.
A material library allows you to save time designing individual components and focus more on the overall experience, workflow, and branding. At the end of this article, you will find a list of useful material libraries.
Tip:
Have you ever wondered about the meaning of the red, blue, and green colors in the specs? Right-click and select ‘inspect’ in the drop-down menu to reveal more details. Here you can view the measurements, font size, weight, corner radius, and elevation. You can even manually measure elements using the ruler tool at the bottom of the page. On this page, you can find all the relevant details to reproduce the component.
Material Fundamentals
Measure
Material Design uses density-independent pixels (DP) as its unit of measure. As the name suggests, this measure is independent of the screen density (dpi: dots per inch). It ensures components all look the same regardless of the screen dpi.
Elevation
The concept of elevation is fundamental in Material Design. When a layer is elevated from the surface, it will cast a shadow. The shadow is cast by two light sources: ambient light and key light. The ambient light shadow looks soft and goes in all directions, while the key light shadow is directional and sharp. A combination of key light and ambient light shadow creates the realistic look of an “elevated surface”.
In Material Design, all components have a predetermined elevation value indicated by DPS. A 1dp elevation means the distance between the top and bottom surface is 1dp along the z-axis.
A component with a higher elevation value will draw more attention because it appears closer. For example, a floating action button is a primary action on a page, and it has a 6dp elevation, higher than the elevation for other components like cards (1dp) and app bars (4dp).
Following the elevation, values will create a familiar environment as users have seen most of the components and know what to expect.
Density
Enterprise products usually have a massive amount of data and require efficiency in location information. Hence high information density is often preferred in enterprise products. Learn more about Dashboard Design Guidelines for enterprise products.
Material Design provides the option to achieve high information density without reducing usability. Material Design specifies where to apply density (data tables and lists), and where not to (pickers and dialogs).
While the guideline does not provide high-density specs for each component, it highlights the touch target minimum (48 x 48 dp). Keep in mind the minimum touch target when applying density will ensure users can effectively interact with the system.
Components
Knowing what components Material Design has for navigation, content, controls, and feedback will allow you to bring creativity and more freedom to the design.
Navigation Components
An application can have one or multiple navigation components at the same time.
- App bars (top & bottom)
- Backdrop
- Bottom navigation
- Navigation drawer
- Tabs
Content Components
Content components act like holders for content in different formats.
| Component | Content-Type |
| Card | All other components (pretty much) |
| Image list | Images |
| List | Images, text (primary, secondary, metadata), controls, dividers |
| Data table | Text, numbers, controls, tooltips, menus, text boxes, icons |
| Sheets (bottom & side) | Icons, text, controls, dividers |
Alert / Feedback Components
| Component | Obtrusiveness |
| Snackbar | Low |
| Banner | Medium |
| Dialog | High |
Selection / Control Components
- Chip
- Radio button
- Checkbox
- Switch
- Menu
- Slider
Mobile-friendly design
If you’re designing for mobile, you can find many options to enhance usability. For example, You can choose from a navigation drawer, a backdrop, tabs, or a bottom bar to define the navigation structure for your application. You can also use a contextual app bar for task-specific actions, and expendable cards for progressive disclosure. Learn more about Mobile App Design.
To ensure a seamless user experience across all devices, consistency is key. Material Design addresses this by utilizing responsive grids. These grids come in various configurations – 4-column, 8-column, and 12-column layouts – which are implemented at different breakpoints. A breakpoint, in simpler terms, is a specific screen size that triggers adjustments to the layout for optimal viewing.
For example, when moving from mobile to tablet, the grid will change from 4-column to 8-column, and UI elements need to be reorganized in a consistent way.
Resources
Sketch Material Design template
The Material Design Template in Sketch is a handy library to quickly find components like controls, cards, and dialogs. It saves time since you don’t have to reproduce a component from scratch.
Sketch Theme Editor
The Sketch theme editor is a great tool to quickly visualize your branding style. You can change the theme color, typeface, and corner style utilizing the options on the theme editor panel and see it apply to all screens in the document. You can easily get a sense of the overall look and feel of your product with this plugin.
In this Material Design UI Kit, you can see how each component would behave on a real application.
—
What’s Next
Idea Theorem is an award-winning design & development agency based in North America. Through our empathy-driven approach, we have crafted digital products that have positively impacted over 10 million users. Our mission is to shape the digital future by delivering exceptional experiences. Contact Us if you have any questions; we will gladly help you.
