Metro UI – Off the Phone, Onto the Web


metro header 10x2

On day 2 of the recent Front End Design Conference in St Petersburg, FL, I was privileged to present “Metro UI”. Windows Phone has been a solid example of Metro UI in action, but I intentionally avoided doing a pure phone focused session. Probably a good thing as I was the only presenter to NOT use a Mac the entire conference. But I digresss.

I talked about the history and inspirations of Metro, how it was used in phone, the overhaul of several sites like http://www.microsoft.com  and http://www.silverlight.net  to metro. Accordingly, I was recently asked about non-phone Metro resources by one of the attendees.

I came up with the list below. Its sparse. Most folks doing Metro right now are running out their own styles and templates. I’m design challenged and tend to just buy a template myself. If you have additional Metro templates for non-Windows Phone, post them here in the comments. I’ll aggregat them out into a new list. Until then, enjoy.

Misc 
Metro Android Launcher – http://pocketnow.com/android/windows-phone-7-metro-ui-invades-android-as-launcher
Metro Apple OS7 Skin – http://www.addictivetips.com/mobile/install-windows-phone-7-metro-ui-on-apple-iphone-with-os7/
Metro Web Site List – http://www.microsoft.com  , http://www.silverlight.net , http://www.metrotwit.com  , http://express.dominos.com/order/olo.jsp

Website Templates and CSS
Orange Juice Web Template ($8) – http://www.buystockdesign.com/Orange-Juice–WP7-Website/web-site-templates-9311 , http://designmoo.com/1962/metro-template-psd/ http://forrst.com/posts/Windows_Phone_7_Metro_UI_in_HTML_CSS_and_JavaSc-5n3  by forrst, http://thecustomizewindows.com/2011/06/metro-website-design-template-v4-like-windows-8-interface/ , http://wordpressplanet.com/update/wordpress-on-blog/metro-wordpress-theme-studio-press-themelib.xhtml 

Rich clients – Zune Client – http://zune.net/en-US/products/software/download/default.htm , Apple Ping – http://www.apple.com/itunes/ping/
Metro UI Resources from devfish

Comments (12)

  1. Pedro Lamas says:

    If you like the Metro look, please check my WordPress blog and tell me what you think! 😉

    http://www.pedrolamas.com

  2. Pedro Lamas says:

    If you like the Metro look, please check my WordPress blog and tell me what you think! 😉

    http://www.pedrolamas.com

  3. devfish says:

    Pedro, nice stuff.  Added it to my list.  Did you use a 3rd party skin?

  4. Derek H says:

    There is a free Metro-inspired WordPress template on Codeplex.com

    It needs a little translation work, but it is pretty impressive so far.

    http://wpmetro.codeplex.com/

  5. Pedro Lamas says:

    Glad you liked it 🙂 it's a child theme of WordPress default theme Twenty-Eleven, just some images and CSS and that's about it! I haven't done it yet but I think I'll publish it someday…

  6. devfish says:

    Pedro, how about a link back to twenty-eleven for the crowd?

  7. devfish says:

    Pedro, how about a link back to twenty-eleven for the crowd?

  8. Pedro Lamas says:

    Twenty-Eleven comes packed with WordPress… I'm still tweaking the theme a bit more, once it is finished, I promiss I'll post it on my blog and in WordPress.org so that anybody can use it! 🙂

  9. devfish says:

    pedro – shows my lack of wordpress knowledge!

  10. Pedro Lamas says:

    Ok, I finally got a chance to post my WordPress Metro Cimbalino Theme, so anyone who wants it can get it here:

    http://www.pedrolamas.com/…/metro-cimbalino-wordpress-theme

    And a Merry Christmas to all!!! 🙂

  11. charilaos says:

    Our web site is inspired by metro ui, take look at it, we would ppreciate any feedback

    http://Www.computerman.gr

    Thank you.