The Windows Store App margin guidelines cheat sheet

If you do Windows Store App development you know they want you to get those margins correct! I got tired of looking up the margins guidelines for each app as my mind has problems remembering numbers (I can remember all my clothes and all the thousands of combinations I can create, but cannot remember a pin code or birthdays) and therefore I created a cheat sheet based of the MSDN article on the Grid System / Layout.

Click on the image to see the fullsize version

Cheat sheet for Windows Store Apps margins guidelines

The colors show the recommended space between items, as well as recommended header space and left margin. Leave a bottom margin as well if there is not scrolling that way (bottom margin not mandatory), and it would make sense to leave a margin to the right as well if you don’t have content that scrolls that way.

Hope this helps, and feel free to give me some tips on some other cheat sheets I could make :)

Comments

Leave a comment below, or by email.

Nigel Sampson

1/19/2013 7:48:22 PM

Hi Iris, 

Thanks for creating a very useful diagram, will make it a lot easier to illustrate this to others, however I think there's slightly something wrong in that the blue 120px padding on the left should reach to the edge of the content and not to the right edge of the thumbnails.

Cheers

Iris Classon

1/20/2013 5:32:56 AM

Reply to: Nigel Sampson

You are completely right, I uploaded the wrong one. I've re-uploaded the image (the accurate one), and there is also a left margin present now :) Thanks for letting me know! I'll be making a few more soon :)

Jeremy Foster

1/20/2013 5:31:42 PM

Cool beans, Iris. You can also check out a free PDF design sheet that I put together. It's at http://codefoster.com/designsheet

John Marshall

1/26/2013 7:38:21 AM

As a visual designer, I like the way you used colour to reinforce the sizes.
PS: I still see issues with amount of space left for the Name and Email on replies. Name just shows as a series of dots, but the Email shows enough to indicate what the text may say.

Sumit

1/27/2013 5:37:54 AM

Super Useful! Time to recheck the margins in my app now :-)...

on4lpf

2/24/2013 1:08:15 PM

Thank you so much for this drawing. It helps a lot.
(by the way there is a small color problem: the legen box associated with the red arrow is brown instead of red)

Last modified on 2013-01-19