Making Material Design

What is material design? You’ll probably have to ask me this a couple times. So, material design is a system
for designing interfaces…designing…designing material design is a design language. Material design is a design system. Material design is a new perspective on what the human and device relationship can be. Maybe it’s too complex of an idea. Material design is this design philosophy that’s really trying to acknowledge the technology acknowledge the technology behind the
interface. It’s a way for designers to
collaborate with users Material design is a way for designers to get what they want. [music] Well, the overarching impetus was really just a bunch of designers wanting to make things better. A lot of this happened organically as designers across the company sought to find ways to collaborate. We realized it wasn’t just an Android story or just a Google story but it could be really a cross platform design framework story the current way of doing things was was
clashing in all kinds of ways because we hadn’t been thoughtful about the physics of it. why don’t we take that and run with that a
little bit, and see if we could figure out, you know, what is this made of… what is the material that our software is made of? John came up with the idea of what he described as quantum paper. In
order to create these these rich, tactile user interfaces, and that idea of it being mostly paper like but smart paper served as a point of
view about how your surfaces work and why. There’s a very very clear parallel
between the systems book design and the way that humans also hold and use devices. People use materials in life every day, and we want them to
understand software in the same way. When we’re thinking about how a digital surface works, you think about all the shortcomings and advantages it has one of the main things that we run into is
that you have this sort of flat plate of glass which is great because you can – it’s easy to move around – but it also prevents you from actually being able to touch the things you’re working with. Inside this device there is actually a
little bit space and so we thought well let’s try and take advantage of that,
and create a meaningful structure that goes underneath it, almost like the
skeleton filling out this body from the inside out. Material design early on was almost like we were going out and trying experiments Yeah, it was totally an experiment. Everyone kinda sat next to each other in a room working on all the different aspects and components
together. …kinda riffing off each other It’s one thing to play by yourself – it’s another thing to play in a group where you’re improvising real-time. I think a lot of us are used to working
more practically This is the first time where we were
being pushed and told–don’t worry about that let’s just see what happens now. [background noise] This is something that we’ve done a few times We’ve set up these light rigs to understand how the shadows work. The depth cues that
come from the shadows really made us think more deeply about how do we communicate surface? We built a system that enforces that the light comes in a 45 degree
angles that helps keep the shadows consistent from the top to the bottom of
the screen even as we were designing out the icons, we started to see some really interesting subtleties you wouldn’t normally notice, but these are things we pick up on and help
us to understand that it’s a surface. The strips are spacers measured out to scale to the way
they’re model digitally, so not just x & y but also in z. [music] The Floating Action Button, the FAB, the way that we said there’s just one
thing stop with your five buttons here four buttons–make the call– I thought that was great, and it was not
an idea that I was comfortable with at first A button sounds like such a simple
concept, though when we kinda took it down to its
basics of well it’s this area on screen that lets
the user perform an action, it’s a very concentrated thing that should make you feel powerful and
like they’re able to complete something. There were little things like having buttons that depress–felt a little bit odd because they’re not actually depressing–your finger doesn’t feel anything moving down in fact, this like, millimeter layer of
glass between you and the actual image means that you’re not even getting
to it in the first place. So instead we reversed it, so we had buttons that lifted up when you touch them so it was more of a magnetic attraction of your finger. There’s a logic to
it, but also magic in it. Past the motion, there was the graphic
design aspect–the boldness the typography, the imagery. Those were
all intended to give the system a bit more robustness you want people to feel comfortable with
it, but we wanted it to feel very well designed. We created this color spectrum around
picking sort of primary color and then using an accent color creating this really simplified and easy
to use system, while being very definitive someone who never took a color theory
class could create a combination of colors
within their product that felt harmonious. I design fonts, and one of the things I
really like about that is the font doesn’t come to life until another person uses it. and we really see Roboto as a living typeface that, you know, as as needs change in as we
introduce new form factors as we need it to do more things, we can
continue to revise and continue to update it. I think a challenge for material design
will actually be the designers’ toolset having to evolve
as fast as technology is and the platforms evolve. To constantly be reevaluating itself and to constantly be thinking about what’s no longer relevant. What did we think was universal, but turned out to be a fad or simply the wrong emphasis? What I love is when people take sort of the basic principles of
material design and then they take them in a new
direction. Now that we’ve published the material design specs, I’m really excited about the fact that
we can go and engage other designers in conversation outside of Google. One of the things I wanted was for third-party designers to take this foundation and build greater design upon it– the same is true for us internally. I don’t want to be looking four years down the road, 10
years down the road, and saying, well material design–all those ideas, those frameworks–they’re over. The principles behind them, I think,
should be timeless. Maybe we don’t have them right yet, but I believe we’ll get there.

, , , , , ,

Post navigation

100 thoughts on “Making Material Design


  2. Are you serious? You are designing after paper and shadows and name it "Material"??? It is "Paper and Shadow" design. What Apple did in 2000 (Mac OS X) was Material! What you do is simply box-shadow:0px 1px 2px rgba(0, 0, 0, 0.5);

  3. 1:18 is that an Apple Watch, I see? Pretty bad when even Google employees don't want to own their own watches.

  4. material design is a Style….. I dont know why all these googlers think its something different.
    Its a style of a design.

  5. I wish Google was translating the subtitles because those videos are very interesting and I wish more people could understand these.

  6. Its been More than 3 Years and there is still not a Decent Play Music app from GOOGLE, MAKE IT LOOK LIKE THE CONCEPT . Clear lack of implementation inside the company itself.

  7. A lot of these guys saying, "its a crap", doesn't appreciate this wonderful work. Some say, "dropshadow already exist on mac", doesn't matter if it's a mac or iOS' design, dropshadow is part of a modern design. Some complain about, "the music app sucks", maybe they still want to support older versions of Android, y'know, such animation APIs doesn't exist back there. Others notice these Google designers use an Apple product, they actually included an iOS style of material design in their guideline so what's the issue they shouldn't use an Apple product?

  8. The material design concentrates on usability. A lot of designers criticize the vivid colours and exaggerated animations but google made it like that so designers and developers can improve to look better.

  9. The first two minutes already got me so confused 😀 If you cant describe your concept in simple words you either didnt fully understand it or the concept is shit.

  10. Material Design is great when you want to get stuff out without having to customize the color of every little thing.

  11. Material-UI for React is the most up it’s own ass lib ever. It was bad but the whole dynamic classname thing was a step too far. antd is not perfect but at least it’s made for real world

  12. So the Google plan was to do as little as possible, the bare minimum to make it work. Maybe we should all just wear white clothes using the hospital scrub pattern. Flat design, taking computers back 25 years and giving designers an excuse to be lazy and boring. Windows 95 had more personality than "material design". We have software and screen technology to display billions of colors in 4k yet the OS is stark white combined with a single color and black letters.

  13. None of these designers are wearing glasses. I don't need glasses, but I wear lenses with a glare reduction, because of the blue light rendered by Android.
    I believe it was the Android 2.1 or 2.2 update that prevented you from lowering the blue light to reduce eye strain.
    PC's have tools & apps that do this built in. The Samsung S8 and other phones are adding a blue filter built into the phone. Save our eyes and reduce eye strain. Please.

  14. This was, for me, the pinnacle of Google's design. But now with the pixel 3 and their new android 9 design, i feel like the brains of the design team evaporated.

  15. One of the best products presented to the world by Google. We are developing a new project and have decided to use material design, and oh boy we are having so much fun, and truly enjoying it. Thanks Google

  16. A great……… it's Google, going better and better day by day,
    Material Design, it's all about UI………
    Every little things are measure in it,
    Google is always best and going be,

  17. I thought this was a parody at first. Remarkable how bullshit gains respectability with enough people saying it. The choice of using 'primary' and 'secondary' was by far the stupidest thing they have done.

    "I don't want to be looking 4 years down the road… 10 years down the road and saying 'Well, Material Design… all those ideas, those frameworks, they're over." –Matias Duarte

    I hate to break it to you, but Material Design is over. It's so poorly documented that it's amazing you people think you're increasing communication with your "design" choices. It's easier to use any other solution than Material Design.

  18. Windows 3.0 had more character, style and usability than Material Design. It's been a boon for software designers as its given them an excuse to be boring and lazy.

  19. 2000 = Subtle gradients
    2005 = Glossy and reflective
    2010 = Rounded corners
    2015 = Flat colors
    2020 = Dropshadows
    Any predictions for 2025? I'm guessing 45 degree angles.

  20. So…… It's undoing the atrocity that is Flat design? The next leap forward is ignoring the past decade of crimes against usability.

  21. OMG…. What am doing as a designer and what these guys are… Its really inspiring that every detail does matters for even a single button

  22. but it's NOT a book. it's NOT a calendar. it's NOT a postcard. it's a DEVICE, it's cutting edge technology right here in your hand. why use it to emulate the look and feel, and most of all, the constraints of something old, when it can be so much more? what a waste…

  23. I hope it's not just me…but even after watching the whole video, I'm still very confused on what Material Design is :))

  24. how come my brain cant work like this, how tf did they think of the button thing coming up to the screen and stuff it hurts to think about

Leave a Reply

Your email address will not be published. Required fields are marked *