Android interface design learning: five design points of Material products Icon

Today, I want to share with you a very practical product icon design points and knowledge points. This knowledge can be applied to our daily logo design, icon design, graphic design can be.

That’s to learn how to dissect product icon structures. The following content is extracted from the Material Design Chinese version.

Material-Design icon design

For a given brand, the consistency of elements in these icons is the key to forming a shared visual language. Familiarity with these elements makes it easier to understand the nuances of each logo and the nuances between them. It will also help you learn to identify the underlying structure of logo design.

Will contain the following five design points:

1, polishing

2, material background

3, material prospects

4, color

5, shadow

As shown in the diagram below, the components overlap each other directly from the top.


The first step: from the perspective of the construction of

Display the three-dimensional decomposition map of each component in the structure of the icon.

Construction Perspective


According to the above five steps to identify the logo design structure, let’s look at the icon design of the Material Design style


1, in other words, achievegradual polishing effects

Above all elements, from the top left to the right, the light fades gradually, providing the soft color of illumination.



2. Look at the foreground and background colors of Material Design:

Material background

In the picture above, the material background color is the lowest blue color, and the white color on it is the foreground color.


Spot color

The color of the center circle is Material Design dot color: that adds to a small fraction of the color of the element.


3, color

Color inspiration from contemporary architecture, road signs, and sports venues in the crosswalk, which caused a bold color activates expression of color, contrast with the monotonous environment. Emphasize bold shadows and high lights. Lead to unexpected and vibrant colors.

Designers must make good use of your palette. The color halo effect is shown below.

Material-Design color selection


4, icon shadow design

Shadow connection

Add soft shadows around an upper layer element. As above.


Here is the Material product icon design appreciation:

Material Design Icons icon designMaterial Design Icons icon design

In fact, above these excellent Material Design Icons icon design, are follow the above Material product icon five design points.

I hope you can follow these design rules when you design interface for APP designers.


Leave a Reply