Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Talk:Using a Grid Helper image to Design WP Apps

From Wiki
Jump to: navigation, search


Hamishwillee - Very minor subedit

Hi Aady

I'm not a designer so I'm not sure how to advise on this article - I've asked someone in my team to take a look at it.

My first thought is thought that it needs a more precise title. When I say "Grid" and "Windows Phone" in the title I assumed that this was going to be about using the Grid control (a very good idea now as it forces alignment to the grid, which is particularly important now we have multiple screen resolutions). You do make this more precise in the Abstract.

My second thought was that most of the material really isn't specific to WP at all - you could equally well say that sticking to a grid is a good idea for Series 40 or some other platform - the only thing which makes this WP specific is that you've shown how to display an image in visual studio (how about in Expression blend?). I do like that example by-the-way

So I thought perhaps a title "Using a Grid Helper image to visually align apps?"

As a side note, try to avoid using the br tag to create new lines. It is usually better just to have a single line space between lines you create.



hamishwillee 06:47, 29 January 2013 (EET)

Aady - New title

May be we can have a title as - 'Using a Grid Helper image to Design WP Apps', how does this sound? If you want to extend this title to other mobile platforms too, then you can replace the 'WP' with 'mobile' text. I am also fine with your title suggestion. As I cant edit the title, but i guess you can; feel free to change it to either of it.

I have not worked much on s40 platform, so cant really comment if the design practices of that recommends this style of Design practice. What i am certain about is that this technique of Design is very much recommended for WP phones. And especially the most emphasized practice is to start all your text from left side, instead of middle or right aligned. This is highly recommended in WP to ensure a Metro look and feel. Not sure if s40 also has this guidelines so emphasized.

BR tag instruction - Noted!!!

Thanks & Regards,


Aady 18:58, 29 January 2013 (EET)

Hamishwillee - Lets wait on my designer feedback

Hi Aady

Thanks. Lets wait on my designer to get back for feedback as he might have more advice.



hamishwillee 01:47, 30 January 2013 (EET)

Krebbix - Some thoughts from Hamish's designer :-)

Hi Aady,

I think the material is WP specific. Series 40, iOS and Android (and others) have different design fundamentals; at least they are not based on a grid as shown here. I am wondering about the image you are presenting for layout. It might be copyrighted by Microsoft if it is just a crop from the images you find from here: . If you redraw it by yourself from the scratch, I think it is fine. If not, at least there should be a reference to the original source material – to my understanding. It would be great if you could add some more information about the alignment. I am wondering if it is done left-top. However, there are some exceptions which would be a nice addition to your article, e.g. when to place the text off-grid (e.g. your icon is 2x2 elements and you have single line text). Also the “Keep gap” section has some exceptions which would be great if you could discuss them, (e.g. a list with icons). Some ideas might be found from here:!105 . In addition there are also other things you can do with grid, e.g. create columns or rows. I recommend to discuss these cases as well. A small issue is that the images are not precise, e.g. your items (the squares) are now placed top-right (there is a small margin at the left) and there is no clear pattern how to align characters. However, I think this article combines some information which you do not find all at once from one Microsoft page, so it would be great if you find the time and effort to add some more information to make this a unique article. Please let me know if can be of any help.

Best regards,


Krebbix 16:14, 31 January 2013 (EET)

Aady - Thanks for the review - "Hamish's Designer" :)

Hi Krebbix,

You mentioned some great points and very nice suggestions to improvise this article. Really appreciate that. Will go in order to ans some of your queries. 1. Grid Image - Yes its fro Sketch_Templates and i have already put the link in the references. Though not the one you mentioned but to the parent article. This parent article link contain the link suggested by you. If you think i should put the child link as well, can do that. 2. Can talk about the exceptions, one which as per my knowledge is when it comes to image alignment from left side. 3. The margins, will take care of that.

Will cover the suggestions given by you. Thanks for your time to guide me to improvise this article.



Aady 17:39, 31 January 2013 (EET)

Aady - Update

Add most of the suggestions and uploaded all the images with margin issue fixed.



Aady 19:21, 31 January 2013 (EET)

Hamishwillee - Thanks guys

Normally have text like (Image courtesy of Microsoft), where Microsoft is a link to the actual page where the image is found. This would be both on the file upload page's documentation and on the page where you display the image.

Krebbix, can you please review again.

thanks very much



hamishwillee 00:08, 1 February 2013 (EET)

Aady - Thanks for the title change

Thanks for pointing that out. Will get used to wiki style.



Aady 21:17, 1 February 2013 (EET)

Jorgens - Grid dimensions

Maybe a newbie question.

I'm prototyping in Axure, and using a grid would definitely shrapen my sketches.

What are the dimensions of the grid (I've counted it to a 12x20 grid), i.e. column and gutter width, row and gutter height and side and top/bottom margin?



Jorgens 16:25, 1 March 2013 (EET)

Aady - Yes thats the correct grid dimension

In this link, you can find the same grid with various resolution:
Make sure you use the one that represents your working(target) resolution.



Aady 18:59, 1 March 2013 (EET)