Material Design System – Use Google’s design language to design UI

Material Design System – Use Google’s design language to design UI

Material Design is Google’s design language. The sophisticated system consists of components such as colors and icons and can also be used to design websites and apps.

How Material Design System can be used to design websites and apps, we explain here.

What is Material Design?

Material Design is Google’s visual design language. With Material Design, Californians have created a design language that complements classic design principles with technological insights and scientific aspects. In other words, design meets technology. The design system, as the name suggests, is based on material-like components such as surfaces, objects, and icons.

The objectives of Material Design

  • create attractive websites based on the design language.
  • provide a unified system for various platforms, devices, and input methods.
  • be able to react flexibly to adjustments.

The special thing about this system is that the design language is inspired by the real world. This can be seen, for example, in the way individual areas or elements reflect the light or cast their own shadows.

The design language is characterized by methods that are also used in the field. This includes areas such as typography, raster, scale, colors, and images. Unobtrusive animations are also part of the system. They are rather subliminal and also used in important places. Animations are more likely to be supported. They are not used for effect-hating.

The design system is also an adaptable basis for expressing brands. The components and elements thus also make it possible to adapt to the needs of companies.

What are the components of Material Design?

The design system consists of Design rules, which Google describes in detail in the style guide.

The components are:

  • Environment
  • Layout
  • Navigation
  • Colors
  • Typography
  • Icons
  • Forms
  • Animation
  • Interaction
  • Communication

Basic building block environment

In the real world, objects cast shadows and radiate the light back. The design system reflects these characteristics and allows surfaces to be applied throughout apps and pages.

Layout as a material design component

The designs created by this design system seem generally balanced. It is usually aligned with an 8-grid that applies to both spacing and overall layout. For small components, there is a 4-grid.

The user interfaces should be Design specifications to be kept intuitive. Also, fixed areas for the User Interface and the spatial arrangement.

Integrate navigation

A distinction is made between the three types of navigations. The following recommendations are primarily applicable to the design and development of apps:

  • Side navigation (movement between screens at the same level)
  • Forward navigation (completing a task)
  • Reverse navigation (reverse movement between screens, usually in a specific order)

Especially for Android apps, there are some explanations to help with the development. Details of the Types of navigation are also described in Google’s style guide.

Use colors in material design

The Material Design Color System is one of the most important components. The color system is well thought out and contains 19 basic colors. Primary color and an accent color can be selected from these default colors.

Dark and light gradations allow user interfaces to be enriched in various ways. All primary colors have a color number. For example, the value “500” represents the default hue. If you want to make an idea lighter, you choose the color value, which is stored in the scale at “400”. Values above 500 appear increasingly darker.

Material Design Colors
Material Design Colors

Typography and Material Design

Typography also follows fixed rules in this design system. The goal of using fonts is to make the content as clear and effective as possible.

To achieve this, there are 13 styles with different Font, which also cover various text categories. When it came to designing language, Google uses the font from its own Roboto. These can be downloaded for free.

Material Design Type Scale
Material Design Type Scale

Material Design Icons and Symbols

Of course, symbols are also used. A distinction is made between

  • Product symbols
  • System symbols
  • Animated symbols

The product symbols are used for the visual expression of products, services, and tools – e.g. for a brand. The system icons display common actions, files, and devices. The Animated Symbols reflect actions that can be triggered at the touch of a button.

Material Design Icons
Material Design Icons

Shapes – Surfaces and Shapes

According to Google, the so-called “shapes” are intended to attract attention, visually represent a certain status, and transport the brand attractively.

Surfaces are used to reflect a specific purpose or meaning. Complementary texts and symbols can help to reinforce this meaning.

Playing with Light and Shadow has a supportive effect subliminally.


By using animations, the user interface should be even more expressive and user-friendly. Animated elements can connect and link between areas and provide positive feedback to users. This design system uses subtle animations that, thanks to their methods, still look expressive and harmonious.

Material Design Interaction

A distinction is made between gestures, choices, and multiple status values such as Hover, Focus, Selected, or Activated – such as those used by CSS knows about it. Here, too, Google makes some recommendations, in which the primary color is supplemented by a corresponding accent color. More about the extensive Explanations and recommendations you can read in Google’s style guide.

Communication with the user

Google means communication, known as “confirmation communication”. This means acknowledging before taking action, how a button responds, or how a visible return fails. Google’s approach basically aims to eliminate user uncertainty. The company has therefore Design bases used in the system.

Video about Material Design

Google reveals how the design language came about in the following video. The film offers an interesting look behind the scenes of the developers and introduces the design language.

Tips, tools, and downloads about material design

If you want to use the system for your own websites, you might want to take a detailed look at the Google Design guide. It contains everything you need to know, directly from the developers.

With the help of generators such as Color, Or Material Mixer color concepts for websites and apps can also be implemented.

With Tools from, you can transfer the typical look-and-feel to other websites. This is a collection of CSS and JavaScript listings that can be used as templates or as a supplement to your own pages.

Symbols can also be downloaded from Material Design icons by, Or Materialize Icons. The Iconic Font is also worth a look at because it has its own CDN and can also be used via CSS.

How other applications use the sophisticated system can be used in the free eBook Mobile UI Design Patterns. At this point, the Apple iOS Design Guidelines, also reveal tips and tricks for creating apps.


Google’s system is certainly not a “panacea” in terms of design. Websites and apps can even look similar and interchangeable by using this visual design language. Material design is a solid basis for designs. From the outset, you will be given a lot of design recommendations that have already proved their worth in practice.


Write a Reply or Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.