ux.artu.tv » Blog Archive » The Windows Phone design Grid - Love it!

The Windows Phone design Grid - Love it!

We’ve been having a blast during the early stages of the Windows Phone Design Day tour. We visited the beautiful and magical South Africa, Joburg and Durban. Yesterday we delivered the workshop at Lisboa in Portugal and today as I type, Corrina is delivering one of her sessions here in Barcelona. It’s been amazing to meet so many of you, developers and designers and talk about Metro.

One of the best, if not the best resource Corrina and I have found when designing Windows Phone apps: The Grid. We discovered we have barely (Microsoft) talked about this in the last couple years, yet The Grid is where Windows Phone app design starts. Period. So we will be sharing some Grid love from now on and will start sharing some resources with you.

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!)


20 Responses to “The Windows Phone design Grid - Love it!”

  1. Brent Schooley Says:

    Arturo, can you also make a post about some of the guidelines of using the grid for different layout scenarios? The grid itself is very helpful, but it would be amazing to have some guiding principles to go with it.


  2. The Arturo Grid for Windows Phone 7 in PNG & GIMP | SADev Says:

    […] he posted about it and released an Expression Design version of it, which is great if you have Expression Design… […]

  3. Robert MacLean Says:

    Thanks for this! I have taken this and made a transparent PNG & GIMP version of this grid to make life easier for those without Design: http://www.sadev.co.za/content/arturo-grid-windows-phone-7-png-gimp

  4. Ahmed Eltawil Says:

    Unfortunately, that clearly shows how much space is wasted on the start screen.

    That being said, it will be definitely be used for app development.

    Thanks for sharing.

  5. Edgar Zigne Says:

    I love the grid but i have a question:

    Why do not make a blend plugin for the grid, every body loves snap in grids and it make the design easier than make the things by eye.

  6. Roger Baldomà Says:

    We’ve done the grid for sharing with the community. You could find it here:

  7. As long as you follow “The (Metro) Grid”, you’re good ! | MODUL8.com Says:

    […] time, you can use this one, which is in fact just an export of the Expression Designer file Arturo posted a while ago on his blog.

  8. ArturoT Says:

    Hello Brent! Great idea - thank you - yes I should be able to write down some articles that show specific use of the grid. Thank you Robert and Roger - I’m reviewing your grids and will add a link in the main article.

    Ahmed, remember that white space is our friend :) we don’t need to fill out the entire screen just because we have “space available”. More on the use of white space in the International Typographic Style (the basis for Metro) here… http://www.smashingmagazine.com/2007/01/12/white-space-and-simplicity-an-overview/

    Edgar, great idea re: support in Blend - we will work on it. Jeff Wilcox took a first stab here… http://www.jeff.wilcox.name/2011/10/metrogridhelper/

  9. Fabrice Says:

    You have two links pointing to the same file in the article, Arturo.
    (plain and basic cells)

  10. Sebi Says:

    Thanks for making this, Arturo! And thanks again for the workshop yesterday and for sharing this link ;)

  11. ArturoT Says:

    Fabrice - I’ve fixed the links - thanks for the heads up!

  12. Brent Schooley Says:

    Hey Arturo,

    Wondering if you had a chance to capture any of the guidelines I asked about before :)

    Also, is there any chance we could get a similar grid for Win8 or if you could point to one that already exists?


  13. ArturoT Says:

    Hello Brent! Sorry for the delay in responding :) Tomorrow I will start a 31 Days of Windows Phone Design series and have an article devoted to Grid. I believe the Windows 8 grid is simply 20 x 20 - I’ll reach out to folks there to learn more of their plans.

  14. Brent Schooley Says:

    Thanks Arturo!

    Just read the first in the 31 Days series. Looks like it’s going to be great stuff.


  15. Blog - onedotzero Says:

    […] Expression Design […]

  16. Windows Design & Development Resources - Microsoft UK Faculty Connection - Site Home - MSDN Blogs Says:

    […] Windows Phone Grid  http://ux.artu.tv/?p=165 […]

  17. praise & worship Says:

    praise & worship

    […]ux.artu.tv » Blog Archive » The Windows Phone design Grid - Love it![…]

  18. Windows Phone Design and Development Resources….and plenty of them! - Microsoft UK Students - Site Home - MSDN Blogs Says:

    […] Windows Phone Grid http://ux.artu.tv/?p=165 […]

  19. Windows Phone Design and Development Resources….and plenty of them! | MSDN Blogs Says:

    […] Windows Phone Grid http://ux.artu.tv/?p=165 […]

  20. ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #8 Layout & Composition Part I Says:

    […] of this video is to leverage the Windows Phone design grid. Last year while I was at Microsoft,

Leave a Reply