A look into YouTube’s new Material Design!

YouTube Material Design - new look!

A look into YouTube’s new Material Design!

If you’re not family with Google’s Material Design, I suggest you look it up! It’s a very powerful design language that is shaping the way for clear design and usability guidelines. Material is absolutely made for adaptive design and it has really picked up traction in the past year, it has a real focus for flat design which provides clean and adaptive layouts based on a grid system.

 

With that in mind, it only makes sense for Google to push their material design on to one of their biggest and most popular applications, YouTube. Google has finally gone live with Material Design on YouTube. But as of yet, I think it might just be location based. However, there is a way for you to see it for yourself, which we shall get to further on in the article. Lets first take a look!

 

I’m liking the new look, I must say. Take a look at the new homepage!

 

YouTube Material Design - new look!

 

A nice, clean interface. They seem to have removed a lot of the clutter, which I like. Everyone knows how YouTube works and this is really straight to the point. Has the “Popular Right Now” always been there? I’m so used to being logged in, I don’t think I’ve ever recognised it.

 

The new page for viewing videos is nice and clean, too. I have decided to use Last Week Tonight with John Oliver‘s channel for my examples (thanks!).

 

Thanks, John.

Thanks, John.

 

Again, it seems to me like they’ve cleared up a lot of the clutter. Google’s Material Design is really something. I like how they’re trying to keep the look and feel of Android across all devices, that really helps when it comes to mobile design. It helps give responsive websites that “in-app feel”, ya’ know?

 

Channels get more customisation, too. It will be cool to see what comes out of the woodwork for some channels, and maybe it will help some channels stand out. Thanks to Mr. John Oliver again for letting me use you as an example.

 

Channel view

Channel view

 

Crisp, right? Here are D3.io, we are no strangers to Material and we have used it to build a few applications, including an Angular admin panel. Here’s our predicament, though…we love Bootstrap too, so what do we do? Twitter developed Bootstrap to be really easy for developers, it helps us speed up development and is absolutely amazing for responsive website development. But Google Material Design is beautiful and gives us a stunning, user-friendly web.

 

That’s where Mdbootstrap comes in. It gives you all of the Bootstrap¬†components, but, the beautiful design that is Material Design.

 

Oh, and before I forget…if you haven’t got the new design for YouTube, here’s how to do it.

 

  1. Go to Youtube: https://www.youtube.com/?gl=US
  2. Open Dev Tools (ctrl + shift + i, or F12), and go to resources.
  3. Open “Cookies” on the left, and click on “www.youtube.com“.
  4. Find VISITOR_INFO1_LIVE and delete it.
  5. Go to console and redefine that cookie by copy/pasting this:document.cookie="VISITOR_INFO1_LIVE=Qa1hUZu3gtk;path=/;domain=.youtube.com"; into the console.
  6. Reload the page!

 

Have fun!

 

If you need any website design work done in Bootstrap, Material Design or anything else, please feel free to contact us.