Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am interested in the Metro UI that microsoft has used for windows phone 7 for web. I see that their site microsoft.com has been done with metro UI recently.

I am looking for a style guide and resources that I can use to build a web app based on the metro UI.

share|improve this question
    
Please note that I am not looking to build wp7 apps. I am trying to adapt the metro UI theme to web apps. –  CodeToGlory May 18 '11 at 23:14
add comment

8 Answers

User Experience Design Guidelines for Windows Phone

Related: Windows Phone UI and Design Language on Channel 9 (video)

share|improve this answer
    
Thanks for the update, @guanome –  Ben Brocka Dec 30 '11 at 20:15
    
@jin, no problem; according to the date, it happened this month. –  guanome Dec 30 '11 at 21:59
    
As soon as I started to read the first sentence on that page, I was interrupted by a "MSDN user opinion survey" animated dialog that panned in from the top and stopped in the middle of the page. –  oksayt May 16 '12 at 2:32
add comment

May you have a look at Jeff Wilcox' "Metro" Design Guide for Developers: http://www.jeff.wilcox.name/2011/03/metro-design-guide-v1/

This guide is not as extensive as the PDF provided bye @Jin, but focuses on some main aspects to consider, when developing WP7 Apps.

share|improve this answer
add comment

For a quick look, Jeff Wilcox's "Metro" Design Guide is good.

If you want to see an after-action report, Scott Barnes wrote about his experiences with Metro.

The comprehensive manual titled Windows Phone 7 Series UI Design & Interaction Guide is also available.

You may find the Channel 9 video helpful.

share|improve this answer
add comment

You may find this documentation from Microsoft helpful: Downloading design assets for Metro style apps http://msdn.microsoft.com/en-us/library/windows/apps/hh700403

Also, I created a simple Windows 8 Metro mockup PSD available for download here: http://dribbble.com/shots/301642-Windows-8-Metro-UI-Demo-PSD

share|improve this answer
    
That's stencils not style guides. –  dnbrv Mar 17 '12 at 17:19
add comment

Here's a list of metro-style websites for some inspiration: http://teusje.wordpress.com/2011/03/17/web-design-trend-metro-ui/

Also, you can take a look to this templating framework to create websites styled like Metro UI.

share|improve this answer
1  
The OP was requesting resources and style guidelines, not a list of examples of Metro sites and an undisclosed link to your own site. If you're referring to your own site in an answer then it's not cool to pretend it's just something you found. If it's relevant then disclose that you have a site that answers the OPs question. –  JonW Mar 24 '12 at 22:08
add comment

Update #1: This project is discontinued you can see how it looked like at http://www.youtube.com/metrodynamis

Metro Dynamis is a UX Framework for Metro Style Applications in HTML/CSS/Javascript

Disclaimer: I'm the creator of Metro Dynamis.

share|improve this answer
add comment

I found this article for an app I was working on: Everything You Need To Create Windows 8 Metro UI-Styled Websites

share|improve this answer
    
Hi @Fiddy and welcome to UX.SE. Maybe you could elaborate a little on the answer. What can you expect in the guide etc. –  Benny Skogberg Nov 8 '12 at 12:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.