Google Material Design, a brand new set of strategy for designers and developers alike. Material Design introduce a fresh viewpoint on user interfaces, motion, and interface states, and are a great base for you to construct a product upon.
4-5 years ago, all Google products look pretty distracting in diverse ways. Every single product look inconsistent on diverse platforms. But everything begin to change back in 2011, while Google started to work hard on the visual part confederacy of the ecosystem of its products as well as named it Project Kennedy.
Mainly, Project Kennedy enhanced web as well as few iOS application design. At the same time, there was a divide new edition of Android – Holo, which replace aesthetically anti-pleasant interface of old Android. But there was one difficulty: Holo still looked diverse from Project Kennedy.
Users had to adjust as well as get used to the diverse look, layout as well as controls of the new interface while switching between diverse devices and platforms. consequently at several point a group of designer at Google gather together and began to struggle with this problem, hoping to solve this once plus for all. In 2014 conference, Google introduce the new scheme and design approach, named Material Design. The new design language allow you to generate a consistent user experience crossways all devices as well as screen sizes: desktop, tablets, smartphones, watches, cars, television, and etc. Material Design is the development of Holo and decisive design principle for developers and designers of Android as well as web application. In several ways it is a more flexible design language, that was shaped for a worldwide community – Google was merely the first user. Material Design allow a more intent approach to the design adoption choice. It sets sensible limits, but not extreme restrictions.
Google Material Design interface consist of tangible layer, supposed “digital or quantum paper”. These layers are stack, arranged at diverse heights as well as cast shadows on the top of each other, which help users better understand the analysis of the interface and the values of interface with it.
If we presume that the layers are piece of “digital paper”, then the “digital ink” will be everything that is displayed on these layer. That is the similar approach as used in customary graphic design; magazines, newspapers, posters, packaging, branding, record cover and so on.
In the real globe things do not come out of nowhere as well as disappear into nowhere – this merely happens in the movie. thus, using Material Design language always consider about how to use “realistic” animation of the layer and “digital ink”.
It is regarding how we apply the preceding three values and concepts on diverse screen size device with diverse resolutions.
In essence, you could summarize Google’s Material Design by two component:
Material provide context in design, the surface as well as edge of a “material” provide us visual cues. Let us compare this to real life. We understand the dimension of a room, since we see walls. Simultaneously, the interior provide us an understanding of the background of the room. Your kitchen looks very different than your bathroom for instance.
The similar is applied in Material Design. The blend of style and content provide context to the user in a digital space, much similar to physical walls as well as interiors. A user has a better perceptive of the user interface, since the designed material provide context for the interface.
The idea of Motion in Material Design has a extremely similar story. Motion provide context in a design throughout the flow of an application, particularly when it come to the stability of a product, a user has the feeling of being continuous. There is no obstacle, for example inconsistency in design or a puzzling navigation.
How precisely does motion work? Here is an example. There is a home feed that consist of a list of cards. When you tap a single card, the stuff of the card expand to become the full width plus height of the screen in place of the dimension of a single card.
Notice how this instance applies both material as well as motion. A card is the material. When a user interact with it, throughout motion it will enlarge to show more content. This provide stability to the user as it show how their input affect the user interface.
Last but not least, the transition between interfaces are significant for responsive interface. It’s the most vital form of motion to design continuity for the consumer.