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!)
October 25th, 2011 at 5:54 am
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.
Thanks!
Brent
October 25th, 2011 at 10:42 pm
[…] he posted about it and released an Expression Design version of it, which is great if you have Expression Design… […]
October 25th, 2011 at 10:43 pm
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
October 26th, 2011 at 10:59 am
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.
October 27th, 2011 at 4:19 am
Hi,
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.
October 31st, 2011 at 11:53 pm
We’ve done the grid for sharing with the community. You could find it here:
http://iepastudios.com/blog/en/2011/11/01/la-quadricula-de-disseny-de-windows-phone/
November 5th, 2011 at 1:23 am
[…] 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.
November 6th, 2011 at 4:35 am
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/
November 16th, 2011 at 7:07 am
You have two links pointing to the same file in the article, Arturo.
(plain and basic cells)
November 17th, 2011 at 12:42 am
Thanks for making this, Arturo! And thanks again for the workshop yesterday and for sharing this link
November 27th, 2011 at 11:27 am
Fabrice - I’ve fixed the links - thanks for the heads up!
December 20th, 2011 at 7:30 am
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?
Thanks!
Brent
December 31st, 2011 at 6:06 pm
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.
January 3rd, 2012 at 8:19 am
Thanks Arturo!
Just read the first in the 31 Days series. Looks like it’s going to be great stuff.
Brent
January 26th, 2012 at 4:26 am
[…] Expression Design […]
February 9th, 2012 at 8:21 am
[…] Windows Phone Grid http://ux.artu.tv/?p=165 […]
March 1st, 2012 at 3:13 pm
praise & worship
[…]ux.artu.tv » Blog Archive » The Windows Phone design Grid - Love it![…]
March 8th, 2012 at 7:39 am
[…] Windows Phone Grid http://ux.artu.tv/?p=165 […]
March 8th, 2012 at 9:59 am
[…] Windows Phone Grid http://ux.artu.tv/?p=165 […]
July 10th, 2012 at 10:10 am
[…] of this video is to leverage the Windows Phone design grid. Last year while I was at Microsoft,