Online Advertising, Web Development & General Rantings

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.