UI/UX Design

Why use Material Design for your next project?

08 April 2019

7 mins read

Development
Development

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.

Specs for a data table

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.

Detailed specs for a data table

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

Shadow cast by two light sources: ambient light and key light

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.

Elevation values for different components

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.

Touch target minimum

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.

ComponentContent-Type
CardAll other components (pretty much)
Image listImages
ListImages, text (primary, secondary, metadata), controls, dividers
Data tableText, numbers, controls, tooltips, menus, text boxes, icons
Sheets (bottom & side)Icons, text, controls, dividers

Alert / Feedback Components

ComponentObtrusiveness
SnackbarLow
BannerMedium
DialogHigh

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.

It is important to ensure consistency across different screen sizes. Material Design uses responsive grids with 4-column, 8-column, and 12-column grid layouts at different breakpoints. A breakpoint is a screen size at which the layout needs to be adjusted to fit the screen.

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.

Material UI

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.

Let’s have a chat!