Material Design
Material Design is a modern design language which enforces a consistent look and feel of the application across devices such as a phone, tablet and a computer. It is a very broad concept now, and has guidelines for almost all the user interfaces and patterns. Material Design is a live process; it is continuously evolving and making itself better by including other design patterns in the document. This language is mainly about concentrating on three things: Material Motion Layout Material: In Material Design, one of the goals is to make the UIs natural. In nature, everything is in a 3D space, so elements in Material Design exist and behave like objects in the real world. It provides meanings and visual cues to the user. Material in Material Design instantly reacts to user input. An example would be the button; when the button is pressed, it rises from its position to make contact with the finger of the user. In that process, the button also casts a shadow as it rises, giving the impression that the button is in a 3D world. This also implies that the material is opaque and solid, so that touch or any kind of input events cannot pass through the material and interact with the material behind the foremost material sheet. Other guidelines are: To show stacking of material, usage of shadows to separate them Material can grow or shrink, but it cannot bend or fold Various guidelines for shadows, such as different shadows for resting and the active state of objects Motion: Motion is great. We all love motion and animations in interfaces. It makes the application feel alive, which is what motion in Material Design is all about. Motion is a very important part of design nowadays. If an object is to be placed on a screen, making it appear with some motion (such as fade or reveal), rather than just popping it in front of the user, would make it easier to understand for the user. However, putting random animations anywhere does not help users either; rather, it could irritate them. Motion is to provide continuity between different states of the application.
Motion should be applied so that it guides the user about where the flow of the application is headed and what’s the result in response to the input of the user. For example, suppose there is a card on the screen, showing some information; when the user clicks on the card, it expands to fill the whole screen and shows more information. This provides continuity between these two states of the application. Going back would shrink the card again, and users will get continuity back and forth in the application.
Layout: Layout in Material Design is composed of many components. Mobiles, tablets and desktops—all share almost the same elements such as toolbars, bottom bars, floating action buttons, SideNav bars, etc. The Material Design specification shows different layout arrangements for these elements on the different screen sizes of phones, tablets and desktops.
It also explains each element, and shows some Androidspecific elements and how these can be used in user interfaces. In layout, a very important thing to note is the stacking of elements. As stated before, objects in Material Design move and exist in a 3D space. In 3D space, material is stacked one on top of the other rather than every object being on the same plane. So the layout section shows how all the elements, such as the background plane, toolbar, floating action button, etc, are placed on one another, and how they cast crisp or soft shadows according to their position along the z-axis.