Metro UI - Off the Phone, Onto the Web

Metro UI - Off the Phone, Onto the Web

Rate This
  • Comments 12
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

Leave a Comment
  • Please add 6 and 1 and type the answer here:
  • Post
  • If you like the Metro look, please check my Wordpress blog and tell me what you think! ;)

    http://www.pedrolamas.com

  • If you like the Metro look, please check my Wordpress blog and tell me what you think! ;)

    http://www.pedrolamas.com

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

  • 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/

  • 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...

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

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

  • 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! :)

  • pedro - shows my lack of wordpress knowledge!

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

    www.pedrolamas.com/.../metro-cimbalino-wordpress-theme

    And a Merry Christmas to all!!! :)

  • Check out http://www.MetroBlogTheme.com/ it's from http://www.touchality.com/ and www.touchality.com/blog

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

    Www.computerman.gr

    Thank you.

Page 1 of 1 (12 items)