From the course: Angular: Material Design

What is the "material" in Material Design? - Angular Tutorial

From the course: Angular: Material Design

Start my 1-month free trial

What is the "material" in Material Design?

“

- [Instructor] Before we jump into installing Angular Material and dive into coding, it's important that you know what Material Design is and what its creators were trying to achieve. Material is a metaphor for building interfaces that follow the rules of paper and ink. Objects in the real world cast shadows, reflect light, and take up physical space. You can't pass a solid object through another object. If you raise an object over another object, it takes precedence and demands your attention. Consider the following shapes. Can you tell how many objects there are? Can you tell which object is closer to your face? It's ambiguous, from the side, it might look like this, or like this. It's this ambiguity that makes your user interface confusing to your users, Material seeks to remove that ambiguity by incorporating patterns we're already used to seeing in the real world, making your intentions clearer. Remember our shape from earlier? Now let's apply some of the concepts from Material to see if we can't remove some of that ambiguity and draw attention to the front panel. It's quite the contrast, by simply adding some shadows and a foreground color, we've made clear our intentions. Here are the two shapes side by side. Material stresses that design should be bold and intentional, design shouldn't be ambiguous. Your users should know exactly what you want them to do. Colors, typography, spaces, scale, and imagery are all directed to convey your intentions as clearly as possible. Motion in Material Design has meaning as well. Motion implies transition, focus, and feedback, like click on a button to see a ripple effect that indicates that the motion was received. The website for the Material specification is material.io, and as you can see, they've created a ton of free content on how to optimize your user interface. There's so much going on here that I can't even begin to scratch the surface. But just know that if you're wondering what font sizes you should use, or how big your margins should be, it's all here at material.io. There's even tools like a color palette generator and more. I highly recommend you get familiar with this website. Now, what does that all mean for us in our quest to learn Angular Material? Well, it means that the components created by the Angular Material team have all been designed to follow these guidelines. So by simply installing and adding these components to your modules, you've got a Material-looking application that respects space, movement, color, and more. As we work our way through the component library, I'll try and highlight how to properly use each component so it's in line with the spec. Now that you understand the goal of Material, let's see about installing it into our application.

Contents