This is my vision of the Youtube video page.
First of all, i know that i don’t have any ideas about the whole context , Youtube has strong ergonomists, usability tests, designers, analytics to make the interface become better and better. I am not saying it is better, and i didn’t include all aspects. It's just like concept cars. You can still come up with ideas, even if it is not going to be a real car, you can take inspiration for real one.
So Here we go :
✔ A darker interface, to reproduce the cinema experience. The interface could be white, and fade in black when the video starts (cinema experience).
✔ If the author has other videos (like a playlist), you can go to the previous video by clicking the video on the left (on the background). Same interaction for the next video.
✔ The play button follow the slider, it’s cleaner. But then, i noticed that it wouldn’t be a good interaction for small video, where the slider go fast.
✔ Volume, settings, subtitles etc appear when you move the mouse
✔ The description of the video should be like the first comment. Like Dribbble :)
✔ I try to keep the header consistant with my last shot (google redesign, external consistency ? )
✔ I didn’t include a lot of important features, because it wasn’t my point for this shot. Like recommended videos, which is one of the core aspect of Youtube to keep users on the site, and for ads. I wanted to present some ideas, without pretending to design the new youtube.
I took some inspiration from Erixon for the sidebar (thank you).
Comments, feedback, likes and follow are welcome
Have a nice day :)
Also take a look at my iPhone app
4 months ago
Love the design man!
Love it !
I'd love to see the sidebar collapsed or moved to a horizontal representation to increase the width the video area and put focus on the content & comments :)
@Salomon Aurélien First of all I love it.. It's functional and beautiful. Second of all, I'm trying to get myself into the grid systems etc, and trying to learn.. Can you tell me if you did the grid yourself or used a ready grid? And if so which one?
Thanks a lot
Nice concept. Clean & simple.
The comments area needs more work.
Nice, but I can't find the related videos. I think is very important to don't hide them.
Wow! Love this...
Really like this version of youtube, very crisp and eye-pleasant
Looks amazing. I love it :)
@Jen Yuan @Masum Rana @Tyler wanlass @Sevkan Ariburnu @Ilya Dmitruk @Atique @Lefteris Theodossiadis @Rachel Klausner @Olia Gozha @Christopher Callil Guys, thank you so much for your comments :) I really appreciate it
@Sevkan Ariburnu there are a lot of good grid systems : 960gs, etc. But for this shot i just use a custom one. I just try to keep elements aligned. For client work, in order to have a responsive interface, i usually use a grid with 12 columns (because you can divide 12 by 2, 3, 4, which is important in order to reorganize elements according to the screen size). Hope it helps.
@Andrej Krajčír Thanks :)
What's the font you've used on the sidebar?
@Stratos Iordanidis Thank you, it's "Open Sans"
Looks great, but where's the side ads? That's a huge part of their revenue.
@John J. Locke Explained in the description ;)
@Andrii Sydorov Thanks :)
@TeoThemes Thank you man
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2014 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.