UI Design guidelines

Question

Hi,

I watched some Build sessions and I found that there are some tips when designing the UI of Metro Style Apps.
For example there is a grid system of 20px per unit, there are some tips for margin and fonts.

Is there a document with all the UI guidelines for designing Metro Styles Apps?

Answer 1

Please refer to this MSDN documents: http://msdn.microsoft.com/en-us/library/windows/apps/br211363.aspx

It contains many guideline and checklist for designing the UI and for the controls in Metro Style.

• Choosing the right UI surfaces http://msdn.microsoft.com/en-us/library/windows/apps/hh465304.aspx
• Defining layouts and views http://msdn.microsoft.com/en-us/library/windows/apps/hh465343.aspx

 

---

Bob Bao [MSFT]
MSDN Community Support | Feedback to us

Answer 2

Hi,

what about providing a PDF or XPS file with all the UI guidelines?
It will be easier to read and print.

Thank you very much.

Answer 3

Jumping forward 6 months...

Following up on OasisLiveForever's last request, and adding my +1
Is there a downloadable PDF version of the Win 8 app Guidelines available anywhere yet?

It would be very helpful if we could download the guidelines documents so that we can read, review, study them etc... when traveling and under other situations when not online.

Thanks.

Answer 4

Hi,

a downloadable PDF version of Windows 8 User experience guidelines has been been released here:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465424

Click on download button to get the PDF.