ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #11 Windows Phone Design Grid

24 Weeks of Windows Phone Metro Design | #11 Windows Phone Design Grid

 24 Weeks of Windows Phone Design Index

Twitter   

We’ve talked about the Windows Phone Design Grid before so I will keep this post short. The key is to leverage the Grid for composing your Windows Phone UIs. The Grid has a 24 pixel margin to left and right. Always respect that margin. Then you have 25 pixel columns and 12 pixel gutters. It’s always best to deploy UI objects from within a 25 x 25 cell. Take a look at the Layout and Composition in Windows Phone posts in this same series to get a better idea of how to use the grid.

Windows Phone Grid for Expression Design.

Windows Phone Grid Plain in PNG (Transparency - great for Expression Blend) - Thanks Michael for recommending this…

Windows Phone Grid Basic Cells in PNG (Transparency - great for Expression Blend)

Photoshop and Illustrator format Grids (thank you Jaycob!)

GIMP .xcf Windows Phone Grid (thank you  Robert!)

gridsmall.png

Leave a Reply