iPod Touch – "Icon Lineup" control

Sub Heading 5

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.

11 responses to “iPod Touch – "Icon Lineup" control

  1. Wish these examples showed on my iphone – keep up the excellent work! You are spot on for UX.

  2. One day Bill they will 😉

  3. I get a XAML parse error when I try to view the line-up control: “Line 6 position 49”

  4. My samples need SilverLight 1.1 Alpha Refresh.
    If you go to the area “A Beautiful Website” it will direct you to where you can download it..

  5. That’s funny. With much less graphics talent than you have, I wanted to create some iPhone looking icons as my first steps using Expression Design and Expression Blend.

    Here’s what I came up with:

    And the (still partial and unfinished) resulting app:

    Cheers 😉

  6. Christophe that is a great first attempt …. well done!

  7. Great info. Hope it can apply to Apple iphone as well. 🙂

  8. film.13.fr

  9. Lupakan kegagalan namun selalu ingat sebuah hikmah dari sebuah kegagalan

  10. Cemburu adalah tanda bahwa cinta harus saling memiliki

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s