Design Inspiration : MSNBC’s Video Page

March 26th, 2008

It seems pretty often that I come across something that inspires the designer in me, so I’m going to make it a point to post them here as often as I can. This way I can share my thoughts with you, my wonderful readers, and perhaps interact with you regarding our thoughts.

Without further ado, my first bit of inspiration is in the form of…

The MSNBC Flash Video Player

Visit the MSNBC Flash Video Player

When I first saw this page in motion, I was pretty impressed by the overall “realism” effect that they were going for. The page has wonderful depth and texture, and it’s super easy to navigate– enticing the user to get lost in its well-structured video hierarchy on the left. However, the thing that struck me most was its use of gradients to create something almost tangible, and the almost complete absence of rounded corners on containers.

Take the navigation bar on the left, for instance. The soft gradients and transparent bar give a nice subtle touch on a mostly invisible design element (it’s only present mainly due to its blurring of the colors behind it). The division is simply a one pixel border and a slight glow at the bottom. At the top a soft gradient represents a nice glare from the top left corner.

The elements in the player have plenty of depth, and there are some great subtle (word of the day) interface elements that give you cues. Increasing the volume not only increases the green slider, but brightens the tones of the green at the same time. Buttons are uniform where they should be, and different where they should be.

However, there’s something to these buttons that adds the realism, and it’s more than gradients, shadows and bevels. If you take a look at the speaker button, it’s non-uniformly textured at the top and the left. It’s difficult to see, but it’s there. This makes the colors not so clean and crisp, and softens and texturizes the button.

The page itself is dark. It’s black. It should be, to display video content well. However, you can’t argue that the page is depressing or dark-feeling, and that’s due to the vivid use of color. The designers took the company’s logo and created an aurora effect across the back that acts almost like a curtain for a reflective stage (where the video is “standing”). All of these metaphors are powerful in building interfaces, especially graphically intensive ones. (see Time Machine and Delicious Library)

The final thing that really stuck out to me was the use of columns that are essentially one deep. You click on a category, and all of the top videos in that category are listed. The designers could have thought “hey we should really provide a way to browse *all* videos here”, but they didn’t. They decided what was most important (recent or top videos) and restricted the result set to that, allowing the navigation to be quick and simple. No intermediate pages, no daunting paginated lists, no sub-tags or categories, just content.

The content is well defined, too: Playlists, Categories, Shows. Examples of playlists are provided to show you the feature. You can add a video to a playlist with just the “plus” button, and you don’t have to sign up for anything.

Visually, the site is pleasing, realistic, and modern. From an interface standpoint, it has taken something typically complicated (see: Google Video) and has made it simple and fun.