Blend Candy – Windows Media Player

Update: Fixed display issue with Firefox and IE6 

Update : Re-written sample in Silverlight 2.0 beta

In a previous post, “Blue glowing glass button“, I confessed my adoration for the user interface of windows media player 10 11(thanks AvatarX for the correction). I talked about how I loved the dark coloured theme, the glowing effect of the buttons and the glass effect overall. I went on and demoed the power of Blend and SilverLight by creating a blue glowing glass button that could be programmatically changed to any coloured glow.

The UI is just stunning, I love everything about it. I’ve never grown tired of it’s UI since first using it years ago, it’s a timeless design.

SilverLight and it’s accompanying tools (expression Blend in particular) have single handedly changed the face of web development such that UI designs like WMP’s can now be easily incorporated into web sites and web applications.

What I really want to say is that “there is no reason why web sites/applications of the future can’t look like WMP”. What ever an artist dreams up should now be possible to translate to the web even to the finest detail.

Imagine all the future RIA’s with the polished finish of the WMP UI.

This posting is about taking the WMP UI and making it into a SilverLight application. Bringing the beautiful UI in all it’s glory to the world of the web. Showing that any future web application can be more than just a mashup of static images.

The blend created xaml asset or WMP is pictured below (click on it to go to see the SilverLight RIA in action). It took around 2 days to create. The reason it took 2 days is because

1) attention to detail of the buttons and glows,

2) I wanted to optimise the shapes and placements of the layers – removing unwanted shapes, moving the layers around so that they could be animated in an optimal way etc.

3) Getting the resizing working so that elements resize proportional to the browser and each other.

[click on picture below to go to the SilverLight sample]

As you can see the likeness to the desktop WMP is very very similar. I’ve said it before and I’ll say it again, SilverLight and Expression Studio have really hit the nail on the head for RIA and future web development. The MS team behind this magic definitely need a huge bonus payout because in my opinion they have single handedly changed the face of web development.

I’m trying not to be such an MS fan-boy but I really can’t help it. When I do small projects like this it just amazes me the potential that SilverLight and Expression Blend has to changing the face of web sites/applications.

Flash/Flex and SilverLight/Expression(+other MS technologies still in beta) are going to usher in a new world of web sites and web applications.

Just like Ajax and the glass button defined web 2.0 (from  a UI perspective), Flash/Flex and SilverLight/Expression(+others) will usher in what will possibly be called web 3.0 (or rather the time of the RIA). I really do hate the web 2.0 terminology but alas it is now engrained within our technology collective so I must use it

From a web development perspective, the importance of getting the UI perfect is going to be paramount to succeeding against your competition. If we start to see beautiful sites/applications with WMP UI’s (which I guarantee will happen in the next 2-3 years) then we as designers/developers better get our skills polished for the next phase of web wars about to begin.

Have you started on the path of learning SilverLight / Expression yet? Have you started looking at other beta products of Microsoft’s such as Astoria or MS Sync Framework, or Live Streaming Services? If not you better start now because these technologies will be the bread and butter of web development in years to come.

Microsoft thanks again for the innovation that is SilverLight and Expression. I look forward to my next project, I’m always motivated to do more with these technologies!

This project can also be found under BlendCandy, don’t forget to check out other freely available assets in my library!

The demo site is here: Demo Web Page of Windows Media Player

The source code can be found here in my skydrive account: WindowsMediaPlayer.zip

And please feel free to leave comments and remember we are all still learning SilverLight so please share what you learn!