Material Design was created by Google designers and introduces spatial design with paper as a metaphor.
- [Instructor] So what is Material Design anyway? If we're going to spend the next 90 or so minutes working on it, shouldn't we at least talk about it? Material is a metaphor used to improve design experiences by incorporating elements of the real world. The Material in Material Design is inspired by the study of paper and ink, and how objects relate to each other. Objects in the real world have a spatial relationship. Imagine two pieces of paper. Notice how two sheets cannot occupy the same space. Material uses light and shadow to communicate the position of elements in a 3D space.
Objects cannot pass through each other in the real world and the same applies to Material Design. Objects higher on the z-axis demand the user's attention. Consider this example. Imagine the three elements on the screen, the floating action button, the app bar and the background were all paper elements. Can you tell from this design how they're stacked and in what order? Which of these elements jumps and demands your attention first? Design should be bold and intentional. The fact is, there's so many specifications in Material Design, it would take longer than the length of this video to cover them all.
So here are some other aspects of design you'll want to consider when building components for Material Design. Do yourself a favor, go to material.io and take a look at the work these fine people have done in creating an intelligent language for design. These are some of the best designers in the world and they've put a ton of thought and research into this specification. Right now you're probably thinking this is great, but who has time to write code for all these design guidelines? Well, let's talk about that next as we introduce Material for Angular.
- What is Material Design?
- Planning your app
- Adding the required modules to your project
- Installing and configuring Material Design
- Adding a sidenav
- Separating content using the tab control
- Working with grid layouts
- Adding buttons and icons
- Selecting colors and building a color scheme