Online Advertising, Web Development & General Rantings

2 days ago I set myself 1 simple task, to build the UI for the Login screen of windows Live messenger!

1 day later I was done!

Equipped with the knowledge gained from my control skinning adventures I set out on creating the UI as best I could pixel for pixel. The result speaks for itself. 

I said it before and I’ll say it again, Silverlight is an amazing technology. It’s potential is limitless, and it really empowers the designer making their role in any software project critical to it’s success!

This is going to be a simple post BUT I thought I’d share it because I have been racking my brain for so long trying to work out how to do something like this in pure xAML. This shows why design is just as important to the UX toolset as blend is. There are just some things that can’t be done in blend!

[Thanks to Germain from over at the expression forums for showing me how to do this]

A couple of months ago I recreated the Windows Media Player interface using Blend and Silverlight 1.1 alpha refresh, I wired up the UI so that it behaved similar to the actual application. It had a lot of code in the code behind that managed the resizing, it also made extensive use of the canvas control for layout positioning,  it had a lot of absolute positioning and funky logic to make it work when the page resized.

Today it’s time to rewrite that project in Silverlight 2.0 beta. The main reason why I’m doing this is because I feel that there isn’t enough examples of real world skinning using the new Silverlight 2.0 bits. There needs to be more samples out there for people to learn from, I for one would of loved to have more demo’s to digest in the early days of the Silverlight 2.0 beta release.

Anyway hope you guys can learn from this real world sample, I know I learnt heaps making it…

[read the article at my new home at Cynergy]

In this post I will take the login screen mockup and create a Silverlight layout from it. But before I delve into the screens let’s talk about layouts in general.

When building applications one of the hardest things to get right is the layout of controls and how they behave when the application resizes.

When designers create there mockups they generally create screens that are snapshots taken at a single point in time. Some of the more experienced designers produce multiple mockups that show the same application behaving as they’d expect when resized at the same single point in time. I prefer the multiple mockup process showing the effect of resizing but at the end of the day it all depends on what your designers/UX people are willing to do.

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!

Firstly let me say that I am in love with Apple’s iPhone interface. Apple, in my opinion, has single handedly re-written the rule book for mobile phone design. In my opinion they are the ONLY company that puts as much love into their UX, as money into research.

Today I want to build what I call the iPhone “Icon Lineup” control. This control can be found on the bottom of the iPod Touch.

How I see this working is that I will provide a dozen or so background square icon’s within a multitude of colors. Then the person implementing the control will provide a transparent GIF or PNG with the actual symbol for the icon.

Below is a picture of some of the colors I will provide out of the box. It’s so simple to customize the xaml and add more buttons or vary the colors. Better yet a future version will dynamically create the buttons.

Here is a copy of the same buttons but with png images for each button, I’ve also set the background to transparent.

The beauty of SilverLight is that everything in the picture above is configurable and scriptable! Besides the png images we never need to go to another photo editing application to render different views of the buttons! Amazing!!!!

I wired up each button to callback to the web page and make a JavaScript call. I also animated each button with a simple animation. Click the below image to launch the live SilverLight demo.

As this “Icon Line-up”control evolves I foresee the buttons being created dynamically and the animations becoming more complex. This control is ready to be used in a mobile device or even on Facebook.

Use and abuse this as you will :))

Source code can be found in the “Beautiful Web Site” area.

The beauty of Apple’s web site is that it has a consistent and clean feeling to it. A single web page may have dozens of different elements but they all appear to be consistently in harmony with each other.

A perfect example would be my previous post’s “Accordion” control, the color and theme of it is very similar to this post’s “Video Control”. The end result is that the page with all these elements appears clean and fluid.

The below picture is Apple’s web site showing the “Accordion” control and the “Video Player” control, notice how well they merge with the rest of the web page.

My SilverLight version of the “video player” is very simple in design. If you’ve played with my other control’s then you’ll see the same type of code snippets in this control. I use callbacks to the underlying web page for the navigation items, I used a zipped up package to store the image assets. Click on the picture to see the live demo in action.

The source code can be found in the “A Beautiful Website” project.

To see this video player in action with the rest of the controls go to my demo page here.