24 Mar 2016
Google Material Design: A new Trend in WebDesign Industry
The evolution of Webdesign world is pretty interesting for an observer. Those early days, it was filled with texts only, then images came into the playground. Sooner the FLASH kicked a new tempo into the webdesign, a flash intro with a skip button, was a de facto of websites for few years. After the invent of Smart Phones / Android, a new era started in web designing world. it is nothing but RESPONSIVE design. Now, It is the industry standard. On top of these, we have a new trend called Material Design.
Material design is a brain child of Google, the IT Giant. The concept is pretty elegant and innovative, to give a feel of real world effect into the web design. Unlike FLAT THEME design, Material Design propose the depth in UX/UI objects. With Material Design, Google wants to bring uniformity to its UI on all platforms including web, and not just Android. Material design is based on a concept to reach some set of goals.
Material design concepts:
- Create a visual language that uniform, stable and very much real world effect
- Develop a single underlying system that provide all set of features like touch, animation, voice, inputs etc
- Animation of objects or actions should not disrupt the user experience and provide coherence
- Anything in a design is an object and object with a meaning.
Major sections of Material Design as follow :
1. 3D world
Material design supports the Z-axis, not directly, but manipulating the Y-axis. We know Z-axis is used to layer components in Design, so to simulate the Z-axis effect, Material supports manipulating Y-axis. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness, equivalent to one pixel of thickness.
2. Light and Shadow
Material design use different level of lights to simulate the real environment . To illuminate scene, virtual lights are used, key lights create directional shadows and ambient light creates soft shadows from all angles.
3. Elevation and shadows
The Objects of Material design possess attributes of objects in physical world as well, such as objects can be stacked or affixed to one another, but cannot pass through each other. Those objects cast shadows and reflect light. This approach produce a real world UX/UI feel to end user. Elevation features the relative depth, or distance, between two surfaces along the z-axis. Shadows feature visual cues about objects depth and directional movement. Shadow indicates the amount of separation between two objects and the Elevation denotes the appearance of its shadow.
4. Animation
Material design supports various animation of design element objects. In material design, motion describes spatial relationships with its functionality and fluidity.It is a good method, to use asynchronous motion, which is varying speed from start to stop. This will draw the attention of User into focus. Another good approach is Lighter or smaller objects may move faster because they require less force, and larger or heavier objects may need more time to speed up. Transitions and response are part of the animation.
You can go through official, in depth and detailed documentation about Material Design here.
Material Design Blog is a good example to showcase how Material Design based website looks like. There are many third party (not from Google) web UI frameworks that features the Material Design outlooks and UX/UI. Some popular of them are,
The trends and patterns of Web world is rapid and fast growing. The progress of Technology is now on exponential rate, so everything is under pressure to be renovated and improvised. Anyways, Material Design is a good and promising approach for the next level web design UX/UI industry.
NOTE: All photos/videos used in this article, are property of Google. We do not own/copyright them.
