Material design concepts

- [Instructor] Developers do not need to know all the details of material design. However, they should understand basic concepts and layouts not only so they can recognize a good design when they see it but also they can understand the philosophy behind the designs which allows them to improve their implementation. When Google says material's the metaphor they mean that it models things in the real world. Think about shapes laid out on a piece of paper squares, pictures, circles, text. Each shape is laid out on a background to create a picture.

This is similar to how old print advertising pieces were put together. It is an important concept that none of these shapes should break the laws of physics. Let's look at some examples. If a shape moves or spins it should never move through another shape on the same location elevation. The animation on the right shows us what we should not allow to happen. If an element has a lower elevation and moves onto the same space as another object it should appear to move behind it.

If higher, it should appear to move over it. In the image on the left we can see that one item is clearly over the other. You never want to have two items that occupy the same space at the same elevation as shown in the image on the right. Shadows not only give the illusion of depth but also of real world lighting. In this animation, we can see the shadow change as the elevation of the item changes.

The colors that are selected are designed to work together for an immersive experience. To catch the application user's attention white space is used in conjunction with the shapes on the screen to create a pleasing but intentional experience where everything has meaning. In the image on the right the notes section is making a great use of white space. Colors and shapes that don't convey meaning and continuity should not be used in the application. Any time an unusual color or shape appears in the design it should be obvious why it is there and what role it is playing.

It should also be obvious to the application's user when user interaction is available. All interaction should happen on the foreground and you should never be able to touch an object behind another. Items on the screen may move and that movement should provide some meaning for example, when selecting an item in a list the description may move to a detail screen that appears. There are plenty of things to think about with our shapes that we use with material design. They always have an X, Y, and Z axis with the Z axis being represented by a shadow.

Think of the items as flat pieces of paper. They have a thickness of one dp which is a density-independent pixel. The objects in the material screen can come and go and their existence on the screen should denote some sort of context. A save button may appear only when a save option is valid but otherwise be hidden. These material design concepts should be on the forefront of any developer's mind when creating an application that uses material design.