Making Material Design

ArticlesBlog

Written by:


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.

100 Replies to “Making Material Design”

  1. José Luis Colunga says:

    Funny thing: Not even Google respected their own design language entirely.

  2. shuttlecockgourock says:

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

  3. Dejan Sajkovski says:

    Fantastic

  4. avid says:

    Google evil design

  5. Mohamed Tahar Keskes says:

    <3

  6. Sam Fisher says:

    0:09 he doesn't appear convinced of the whole concept

  7. Бжумбек says:

    ХЕЕЕЕЙ! Русские тут есть? А из 2К18 есть?

  8. SAYAN SAHA says:

    Creative

  9. Shminder Singh Chatha says:

    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.

  10. Sergio Fratto says:

    Watching it after 2018 material redesign!

  11. Kuroro Rushirufuru says:

    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?

  12. Jaeho Rho says:

    Plz don’t move chrome’s new tab button.

  13. kushtra24 says:

    Really inspiring!

  14. Brendan Szymanski says:

    Press F to pay respects

  15. Shinya Koizumi says:

    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.

  16. Jannik Bock says:

    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.

  17. Richard Baxter says:

    just doesn't work on complex dense workflow screens (=> chrome laptop browser bookmarks)

  18. M S says:

    A whole lot of people saying a whole lot of words for a rather disappointing end product to this day.

  19. Kay L says:

    sigh Material Design 2 sigh

  20. YuutaW says:

    Luke destroyed this design.

  21. Czarek L says:

    it this a joke?

  22. Lucas Rodovalho says:

    RIP

  23. Alex Clarke says:

    ɑh, i see.

  24. Robbie Dee says:

    I like material design, but it seems so dry and boring for some reason.

  25. Kay Molkenthin says:

    Is it intended that white men should be portrayed as idiots? Is this Google's new identity principle?

  26. EHTESHAM says:

    Just Do a *Dark Mode*.

  27. Edgar Chang says:

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

  28. Jon C. David says:

    Please Google update Blogger with Material Design

  29. AskillZ says:

    Material design is everything
    Material design is nothing
    Amen

  30. Dmitri M says:

    Amazing flat design that pops 👏

  31. bucataru1977 says:

    talk talk talk…and when you look at the finished product, you’re thinking “what the fuck happened?!”

  32. Ayul Ayol says:

    Where is the code need the code to do it its so confuse when u dont have lansuage script then how to design?

  33. f. i. says:

    New YouTube "material design" looks awful and laggy

  34. Matt Thompson says:

    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

  35. Max Brazil says:

    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.

  36. Google Assistant says:

    Must redesign Google Play Music.

  37. David says:

    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.

  38. GameMaker 3_5 says:

    Basically, this is a more "drawn" look for the new google android (5.0 and technially 6.0) for more flat like style

  39. Ruben Badillo says:

    <3

  40. Goode G says:

    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.

  41. Lord Unknown says:

    and constantly ignoring it's rules

  42. Der Deutsche says:

    Wow. So many people don’t even have the vaguest grasp on how much work, time and money flows into the UX-Design.

  43. Cue Zephyr says:

    I really needed this video to even begin to grasp the concept. Simply reading about it didn't do it for me at all.

  44. Sudipto Kumar says:

    Please make YouTube app touch friendly. Such as swipe to volume up and to move forward

  45. Living In A Simulation says:

    Wow, so creative! 😍

  46. Arkaprabha Chakraborty says:

    Simplicity Done Elegantly.

  47. Stirling Hepburn says:

    ripperino bambino

  48. Onkel Stevo says:

    Come on. Am I really the only one who finds the material Desig ugly, cold and impersonal?

  49. ww W says:

    I like the Google Gmail before.

  50. IntelliSoft Engineers says:

    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

  51. Gurleen Rajput says:

    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,

  52. Andrew Finnell says:

    So this is what happens when you have more time and money than you know what to do with.

  53. Last First says:

    This video is cringe.

  54. alexander iraeta says:

    Yo quiero trabajar en google :'v

  55. Gruzdev Victorovich says:

    I can’t believe Youtube show this 3 years old video on my home

  56. Andrés Cevallos says:

    R.i.p.

  57. J. Adam Moore says:

    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.

  58. SinHa Brand says:

    Excellent

  59. Your Mom says:

    Oh yeah yeah

  60. Max Brazil says:

    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.

  61. Fauzan Aldi Pradana says:

    KODALINE!

  62. ADITYA TECHIE says:

    NICE VIDEO

  63. kperry5000 says:

    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.

  64. Şükriye says:

    NİCEEE

  65. Parth Sharma says:

    Btayo.. Google workers even cant describe it in easy language. shamefull

  66. erdem says:

    Does anyone know what type of pen she may have used to draw those gray shadows at 04:15 ?

  67. Грязный Владимир says:

    shadow interface for timezone is very good idea

  68. Noah Cain says:

    duARTe😩😩😩

  69. Chris Locke says:

    Material design is a fad, like every other design paradigm… get over yourselves, google

  70. Kolla En Snigel! says:

    Roboto is a really nice font, thanks dude in the vid for making it

  71. Ben Nilsson says:

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

  72. TheBadGuy says:

    iOS interface is always best.. android sucks

  73. Rusaln Ibragimov says:

    хуня какая то

  74. fad1969 says:

    So fucking ugly. Clueless fucks.

  75. vs media says:

    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

  76. Sourabh Singh says:

    Material design made software more actual looking

  77. Ricardo Francis says:

    I respect and appreciate talent. The Venting Vigilante.

  78. Meeko says:

    I love this, Id wish we had material in interfaces like dreamweaver

  79. vs media says:

    The design is not that easy…. People are lame who think design is easy

  80. guguigugu says:

    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…

  81. Rumiya Musa says:

    Google's Philosophy, Tap into the world of "AI"

  82. erving Lau says:

    没字幕,我死了

  83. Fraffee Tan says:

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

  84. Ian Becker says:

    Thats a long-winded way to say Drop Shadows

  85. ليلى وعلي says:

    1:23 I can't take whatever that guy says seriously! hahahaha https://www.youtube.com/watch?v=blB_X38YSxQ

  86. Keshawn Brown says:

    Where didn't you cause ? Mike Gaddis Dodge green design

  87. Bob Bach says:

    trying to figure out if this is a comic sketch?

  88. Cameron Hall says:

    It's just flat design with shadows. I can't understand why people think this is so special.

  89. Janita Brittz says:

    2019, and these principles are still relevant. Well done guys 🙂

  90. Snake Chantel says:

    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

  91. WetToesAndSandscrapedKnees says:

    ugly, unimaginative, vapid, shallow.. that's what it is.

  92. WetToesAndSandscrapedKnees says:

    put a square colored shape on a larger square and blank canvas and these pretentious snobs will consider it art and deep. No it's just boring and bland, like you.

  93. Quartz says:

    Google did a great job

  94. slier81 says:

    Over explained…da heck

  95. Roboko says:

    the magnet paradigm doesn't make sense, because the screen cannot respond until your finger is pressed on it, thus, any magnetisation would feel like a delayed, laggy response.

  96. Samuel Watterson says:

    will be cool once a book with multiple screens can be made using the flexible screen technology

  97. wowowowowowow says:

    my opinion is that it looks absolute ass

  98. Victor C. says:

    That was a 7 minutes well invested. Thanks for the insights!

  99. Rahman Dh says:

    google is always balancing between smooth user experience and a perfect design…

Leave a Reply

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