YouTube’s Playlist Design

I was recently looking at some Defense of the Ancients (DotA) video guides when I realized how simple, yet highly thought out YouTube’s design is. Take a look at the image of their playlist.


At first glance, it just looks like a simple list with nothing really going on. Let me show some annotations:



Notice the spacing between videos. Each video container has the perfect amount of spacing if it were to be placed in a void. Having them listed vertically just creates an easy to read, easy to find list of elements where you always know which video you’re currently looking at.


Notice the very slight zebra striping. It’s so faint that you almost can’t notice it, yet, it’s enough for our brains to pick up on and distinguish the different elements. No fancy drop shadows, borders, or colors.


The spacing to the right of each element is dynamic in that the box will grow, but the text will remain at the same width. This allows it to not be overcrowded with text and useless information. Here YouTube is relying on a descriptive video title that exemplifies the playlist content. It utilizes a snippet of the video text in order to entice viewers to watch – relying on what the content uploader provided. Want more views? Fit into the system.


Clean cut corners that compliment each other. I talked about the spacing in A, but this is about the synergy. Very light border – much like the zebra striping – creates a clear distinction. You have a number for the video on the playlist which is semi opaque and the length of the video. Information that’s relevant, but not relevant enough that will be necessary when finding the video in the list – just when you’ve found the one you’re looking for. Once again, no need for fancy dropdowns, shadows, etc.

Overall, the cleanliness and simplicity of YouTube’s playlists are refreshing. After the web went through a phase of drop shadows and ‘look at the cool tricks I can do with CSS!’ it’s going back in the other direction, back to the core of what the internet is about: transfer of information. Focus on the product, not the fluff around it. If your users notice the fluff, you’re doing it wrong.

Leave a Reply

Your email address will not be published.