Introducing Material Design and Angular Material

Creating a great user interface design system is insanely hard and most of us don't have the skills, experience, or simply time to go about creating a decent one. Luckily for us, Google's world-class designers have created Material Design (https://material.io).

Material Design is an open design specification created by Google and publicly announced in 2014. Nowadays, most Google products (including Android mobile applications) are based on it.

Material Design was built with mobile-first and adaptive user interfaces in mind. It provides a great starting point for anyone looking to create modern user experiences that work seamlessly on desktop and mobile.

If you take a look at the official website, you'll see that it covers many topics, such as how to handle layout, navigation, colors, typography, iconography, shapes, motion, interaction, and much more.

In addition, the specification also provides many guidelines to help you create great user experiences (for example, from a usability point of view). Finally, it also describes many user interface components in great detail (for example, buttons, cards, data tables, dialogs, and lists​).

Many big brands also have their own design system, such as Microsoft's Fluent (https://www.microsoft.com/design/fluent), but not all of them are open and free to use.

Having a design system specification is a huge win for everyone, but also having an actual implementation is even nicer. Again, luckily for us, the Angular team at Google has created Angular Material (https://material.angular.io), an open source Angular-based library that implements Material Design.

Angular Material includes a ton of reusable Angular components (https://material.angular.io/components/categories) that respect Material Design's guidelines. Angular Material has great support for theming and accessibility (for example, ARIA, keyboard control, and more). Finally, it provides many APIs to programmatically control the interface, a set of Angular CLI schematics, and much more.

Note that there is also an official implementation of Material Design written in pure CSS. You can find information about it at https://github.com/material-components/material-components-web and at https://material.io/develop/web. Over time, Angular Material might make use of these components, but for the time being you can mix and match both in your projects if you feel the need to. Just be aware of what it means for the long term: https://stackoverflow.com/questions/41180498/material-components-for-the-web-vs-angular-material-2.

In the next chapter, we'll leverage Angular Material to improve our application's user interface.