Jan 192013
 
 January 19, 2013  Posted by at 3:32 pm WinRT Tagged with: ,  Add comments

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

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 πŸ™‚

  6 Responses to “The Windows Store App margin guidelines cheat sheet”

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

    • 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 πŸ™‚

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

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

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

  5. 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)

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 11 + 12 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)