Welcome back everybody. In this video we'll talk about Google's Material Design. Now I want to clarify before we start what the goal of this video is. It is to teach you about material design, not to teach you material design. And the reason for this is that it's really beyond the scope of this course to go into the details of material design. And furthermore, Google has extensive and excellent resources online. And I'll point you to some of them through the course of this video. But we want you to know about material design so that you can master it as you feel the need. Well, first of all, what is material design? Material design, according to Google, is a comprehensive guide for visual, motion, and interaction design across platforms and devices. Now within the introduction or the overview of material design, Google talks about it in terms that really makes sense to somebody who's a designer. The first goal they say is to create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. So a visual language, you might have heard people talk about that before when they talk about the design language that particular platforms use. And then furthermore, they want to have a single underlying system that allows a unified experience across platforms and device sizes. So Google intends this to be used on mobile devices, smartphones of varying form factors, tablets, as well as desktop interfaces. Now again, sticking with the designer's view in material design, Google enunciates three principles to describe what it's about. Material is the metaphor. And the idea of material they have in mind is sheets of paper. And what, if your metaphor is sheets of paper, materials, what do you know about that? Well you know a few things. They're basically two-dimensional, they have very thin width, two pieces of paper, one can be on top of another. They can't both occupy the same plane. One piece of paper can't move through another, things like that. And they bring those ideas into their design language. Bold, graphic, intentional, I think those ideas are pretty obvious. And then, Motion provides meaning. So Google, in their material design specifications, spend quite a bit of time talking about animations and movement and how that can help people in the interface, when they're using an interface, understand what is going on. And I wanted to point you to a few helpful introductory and overview videos on material design. I'm not going to go through them, but if you want to know more, take a look at those and it'll give you a little bit more in-depth flavor and some examples of material design. Now the material design specification is extremely long and richly detailed. A lot of stuff about details of visual design that I think are most interesting and relevant and even comprehensible by visual designers. But I wanted to also call out here a couple of parts of the specification that are particularly useful for developers, components and patterns. Components are the basic interaction of building blocks that you can build your interfaces with. Now there's a quite a few of them, and I just listed a handful of them here that I thought were particularly interesting and probably familiar to many of you. If you've used a recent Android interface, you will be familiar with the floating action button, often labeled with a plus sign. And it's often at the bottom-right corner of a screen, like in Gmail for example, or in Google Calendar. And the idea is that when you click on this, you're going to add a new item. For example, create a new email message or create a new calendar event. And the specification tells you that the action is floating above the underlying materials. That again, gets into the notion of material design. And the specification tells you roughly what it will look like and what the behavior should be. Cards, which can contain other information. And then I guess the last few items that I picked, all have something to do with presenting information to users and often getting information back from them. So a dialog, for example, might ask a user a yes/no question. A list presents, well a list of items. Menus allow users to pick from a set of options. Pickers, by that they mean the date and time pickers. And then text fields, which let users enter some data. Now these are, as I said, familiar user interface objects. And the material design specification gives Google's take on what they look like, how they should work, and ways that they can be customized in their appearance, typically. Now just to give you a concrete example, again if you've used a recent Google Android interface, you will have seen the Time Picker, which lets you specify hour, minutes and AM or PM. And then, of course, you can either cancel to say I'm not going to pick a time right now or say okay. So those are components. Now Google also talks in terms of patterns. Now in an earlier lecture I talked about design patterns. And I think Google's notion of patterns is a bit lower-level, a bit more concrete than some of the concepts we talked about in there, such as the two-panel selector, the one-window drill down. But here are some examples. Confirmation and acknowledgement. So confirmation, asking, seeking confirmation from a user that the action that the system is about to take is in fact what they want. And acknowledgement, giving the user an acknowledgement that some action has been taken, and perhaps giving them a chance to undo it. So one of the nice examples there is after you have deleted an email message in Gmail, you will see a little acknowledgement that it's deleted. As well as a link that lets you click or tap on it to say undo, and thus restore the deleted message. Navigation Drawer, well this in Android apps, lets you swipe in from the left-side of an app and find out the set of options that you could apply. Notifications are a way for the system to provide information that may be relevant to you. New email has come in, new messages, upcoming calendar events and so on. And then Settings, which of course lets you set options for an application. And for all of these, Google specifies sort of what is the behavior and gives you ideas and examples of how they can be implemented. Now if we take a closer look, this is the notifications dropdown in, at the time of this video, the most recent version of Android, Android N or Nougat. And you can see a list of notifications. And the user has pulled them down from the notification area, and can now see what is this information that the system had for me. And the specification of notifications that Google has in the material design specifications says, well you need to provide something about the application that it came from, the name, an icon, as well as the content of the notification. So we talked so far from the view of a designer about what material design is like. But you might be wondering, well how do you use material design in your apps if you are a developer. Well, Google again has some great information online to help you figure out how to do that. In particular, they have training materials for Android developers and I've got the link for that here. And if I look at this Getting Started document, they gave you six steps for how to get started in using material design in your apps. The first one of course is to review the material design specification which I've been talking through. So you know how it's supposed to work. And then the next set of steps all talk about how your act, what you're going to do in the implementation of your app. You're going to apply the material theme to your app so that that controls the high-level appearance and behavior of it. You will create the layouts for your app following the material design guidelines, and again they give examples of that. You'll specify the elevation of your views to cast shadows. This again gets at the idea of materials. If one sheet of paper let's say, or one object, is higher than another, it has to cast a shadow. And you control that by specifying the elevation. You'll use system widgets for lists and cards. So this gets back at the notion of components that we were talking about before. And finally, customize how the animations in your app work. So this gets at the notion of using motion to convey meaning. And it's also worth pointing out that Google has its own online course called Material Design for Android Developers. If you want to go into detail about material design, this is the great place to go. So, what's the big picture about material design? Material design is Google's approach to visual and interaction design. The specification for material design describes and motivates the approach in detail. And the Android developers toolkit contains components and functionality that enable designers to build apps that follow the specification. So, that's it for today. We've given an overview of Google's material design, talked about it from the point of view of designers and developers, and pointed you to resources that can help you learn more. That's it and we hope to see you again next time.
