Probably, you have been hearing about Material Design for a while and yes it has been with us since 2014. Also, you have seen it in almost all the Google Apps on your phone and desktop.
But... what really is Material Design and why should you take advantage of its guidelines?
Well, in a nutshell, Material Design is the way Google describes the best practices of how your object and everything on your app should look and feel. This whole thing about Material Design comes after years of study of how users react to the different interfaces in different apps.
Now, the real question is, what are the advantages of reading the Material Design guidelines?
Sometimes frontend developers and UX/UI designers meet the problem of how an app should look like on some point of the user interface development and some questions that come to mind are:
- Should be this button here?
- Is this notification in the right place?
- What can I show when I perform an action in this part?
- Is my combination of colors right?
- etc.
Material Design guidelines can help you to take those ambiguous decisions by telling you where and what you have to place in your app to make it more intuitive. Let me give you some examples of DOs and DON'Ts:
Dealing with Colors:
Positioning floating button:
Showing messages:
For each component of your UI they give you examples and an explanation of how to use it, components such as: Data tables, Cards, List, Menus, Tooltips, Buttons, etc. Like a lighthouse which guides the ships through the night, Material Design will give you the right orientation, a huge help for the non-designers skilled developers.
So don't skip it and give it a read. It will save you a lot of time and will make your app more intuitive for the users, I assure you.
See also the Material Design implementations for your framework:
material-ui.com - React
vuetifyjs.com - Vue
material.angular.io - Angular
Top comments (0)