What Makes A Good Material Design?
All the familiar Google apps, Drive, Calendar, Gmail and Docs’ editors on web and mobile are redesigned to follow new material design specifications. This article explains how these changes will enhance the user experience.
Defining Material Design:
To begin with, material design is a design language developed by Google in 2014. The design makes more efficient use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
The goal of material design is to create a visual language for users that synthesizes the classic principles of good design with the help of innovation, science, and technology. There are many competitive design languages some of them are: flat design, metro design, realism design et al. What differentiates material design from these languages are the color schemes, shapes, patterns, textures, or layouts.
Additionally, material is the only design language that adds motion and depth to elements.
In material design, everything should have a certain z-depth that determines how far raised or close the element is to the page. As the user interacts with the design, due to motion, the design transforms and reorganizes itself in a continuity fashion. It provides a single underlying system that allows single unified system across all platforms.
The UI designing in material is very simple as it is based on predefined principles and conventions. From the development perspective, a material design is also very easy to implement because of available frameworks for almost all platforms. Moreover, it requires minimum effort to develop an application in material design.
Bold and intentional graphics:
A material design uses bold color, text, and icons. By looking material elements the user can easily understand its purpose. A fab button with plus sign represents that the purpose of this button is to create something. Similarly, on clicking this button a certain animation is produced that attracts the users. It creates a hierarchy, meaning, and focus.
Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.
For example:
As you see in this figure, the app bar is in bold color and icons pop out to give people a clear direction. The icons are meaningful even with no label, just by looking at icons the user can clearly understand its purpose and meaning which is not possible in flat design.
Round avatars support text or images which act as placeholders and represent the user’s name.
The primary action buttons (compose) appears in the same place across apps to promote a consistent user experience. The icons are very meaningful and explain its purpose clearly.
Cards may contain a photo, text, and a link about a single subject. In the above figure, the card-based layout creates a natural surface for content to display.
The material is a metaphor:
Material metaphor represents real world tangible material that has x, y and z dimensions. But material under consideration here is hypothetical and inspired by the study of paper and ink. Color choices in material design are bold and deliberate. Eye-catching color schemes work with print-based design techniques to increase the user experience.
As shown in the figure material design uses bold color schemes which help a user to quickly understand the purpose and functionality of the interface.
Motion provides meaning:
The motion of elements in material design is user oriented and gives real life material movement behavior that looks more cache to end user. Primary user actions are inflection points that initiate motion, transforming the whole design. As in figure user clicks on the fab button it initiates dialog window. In flat design this window will suddenly appear on screen but in material design dialog window will initiate right from the fab button and keeps moving until it reaches the center of a screen. This motion provides meaning that something really appeared on the screen.
In flat design this window will suddenly appear on screen but in material design dialog window will initiate right from the fab button and keeps moving until it reaches the center of a screen. This motion provides meaning that something really appeared on the screen.
Intuitive and natural surfaces:
The Interface elements act detectable in this new visual language. For example, tap a menu item to display the menu as a temporary sheet of paper.
The UI always overlaps the app bar and then disappears, instead of behaving like an extension of the app bar as compared to flat design. To display the content in menu card is used which creates a natural surface to display content.
Animations create responsive interaction:
There is always a starting point when a user starts using the application. Movement from there is smooth and predictable. When the user touches the menu icon to open the menu, it follows touch to open in a smooth, natural manner. When a user touches screen elements, they respond with a gray touch ripple effect, giving a clear response to user touch which is not available in flat design.
Consistency across platforms:
The key feature of Material Design is consistency across platforms. The user experience is fundamentally the same on all devices and operating systems. Below is the tablet view for Gmail. Notice how all of the major elements are still there: The app bar, icons, avatars, and action button are all where user expect them to be. The additional space is used to present the selected conversation, which only adds to the usability of the app on this platform.
Why is Material Design important?
All the web design trends are focused on creating a brilliant user experience. Material design is no exception. The ultimate goal of the material design is to immerse users by creating a natural-feeling interface that’s free of distractions. So, websites that are not user-friendly will become obsolete as easy-to-use sites become increasingly popular.
Pros
- The three-dimensional hypothetical material makes programs easier to interact with. For example, shadows, lighting, fab buttons and animations which create natural-feeling interface that’s free of distractions
- Unlike flat design, the material comes with a very detailed and specific set of guidelines, leaving nothing to guesswork.
- Applications for multiple platforms, like a website and an Android app, the material design will provide a unified experience across all devices, which is user-friendly and help you with branding.
- Material design comes with built-in animations effects that would have to be done manually otherwise if required, in programs.
Cons
- Material Design is extensible tied to Google. If you want to distance yourself from that and create a unique identity for your site or app then it will be difficult if you use Google’s guidelines to make it. To achieve that kind of unique identity many CSS customization will be required
- Not all systems will be able to pull off the intended frame rates. And it can be hard to know what can be done to improve usability for those Apps. As these material design animations drain a lot of battery in mobile devices.
- Forcing developers to adhere to rendering guidelines may hinder individual creativity and slow the development of more animations and decorative features.
Conclusion:
When it comes to more complex user experiences, flat design can sometimes, well, fall flat. Not all users are comfortable with the style of interface and don’t always know what and where to click or tap. Flat design styles can hinder usability because users don’t always know what is clickable. Material design’s guidelines, user interface components, and animations have been widely praised; they just serve to make things more user-friendly. Material design gives some extra pop to a flat design that remains otherwise unchanged. If you want to build a fancy site with animations, definitely opt for material design as it is more user-friendly.
Room to grow and improve:
Google recognizes that good design is never limited, and the best designs improve and contribute to better designs over time. This new design system is intended to grow and evolve with user’s needs.
Live Examples:
Below is the list of some live websites which are using material design.
- Gmail App
- Asana
- Google Maps
- Angular Material (material.angularjs.org)
- angular.io
- Invision App
- material.io
By: Ahsan Javaid, Software Engineer OneByte LLC
Reference: https://material.io/
Get in touch with us!
