Did you ever wonder how Google applications always look so uniform and clean? I did. I admire the simplistic design and tried to duplicate it with little success when I first started learning how to program. It wasn't until I took a course for my degree that I was recommended to look into the use of Material Design from material.io.
Material is a design system created by Google that utilizes the simplistic design that Google uses in all of its systems to create a uniform look. There are a large amount of resources for anything that you could want to know at material.io. Every application that I have used Material in as been programmed in Angular; however, Material can be used in almost any application.
I am by no means an expert in Material Design but there are a few tips that I wish I would have been told when I first started working with the system.
Dialog Boxes
Dialog boxes are incredibility helpful for drawing the attention of the user to a participate response or action needed from them. We used dialog boxes for basically every feature of the application; however, we did run into a few common bugs with them. Definitely make sure that the dialog boxes are declared properly in the @NgModules, and that a MatDialog service is being utilized to actually open the box. Below is a link to a Stack Overflow question that was super helpful for debugging the dialog box problem.Color Tool
Definitely utilize the Material's color and theme tools! Material's color tool allows for the developer to establish a color palette that best suits their application. Just pick a primary and secondary color and the color tool does the rest! These tool allowed for us to settle the debate about what would be the best palette for us.Figma Material Design Theming Kit
To help establish a mock of our design to show to our customer we utilized Figma's Material Design Theming Kit. Figma is a fantastic prototyping tool that allows for developers to test their designs before implementing them. We started mocking up a prototype in Figma but were having a little trouble trying to implement the Material Design style. It wasn't until we found the Material Design Theming Kit that we were able to create an accurate prototype. If you want to work with Material definitely mock up your designs with the tool kit in the links below!
If you have any Material pointers, please feel free to post them in the comments!😁
Also, here are a very important resources that I hope make your Material journey easier!
Stack Overflow Dialog Question:
https://stackoverflow.com/questions/48481733/matdialog-doesnt-open-as-dialog
Quick Start for Material Components: https://material.io/develop/web/docs/getting-started
Tutorials :
https://material.io/resources/tutorials
Color Tool:
https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=BA68C8&secondary.color=90CAF9
Figma Material Design Theming Kit:
https://www.figma.com/resources/assets/material-design-themeing-ui-kit/
Top comments (0)