Tools

Namespaces

Variants

Views

Actions

Search

Contents

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.

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.

Regards

Hamish

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

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.

regards

Hamish

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: http://cmsresources.windowsphone.com/devcenter/en-us/downloads/Sketch_Templates.pdf . 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: https://skydrive.live.com/?cid=7a9c306545ea5283&id=7A9C306545EA5283!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,

Jan

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.

Regards,

Aady

Aady
17:39, 31 January 2013 (EET)

Aady - Update

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

Regards,

Aady

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

regards

H

hamishwillee
00:08, 1 February 2013 (EET)

Aady - Thanks for the title change

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

Regards,

Aady

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?

Introduction

The main principle of Microsoft design language is simple, clean and disciplined design. Sounds good and simple but to achieve these traits a designer needs to be very careful and thoughtful while designing the application.

The application may be designed by the developer himself and that will be typically directly using Visual Studio. In case the designer of app is not a developer, he might prefer using a photo editing tool like Photoshop. The tutorial covers how to use GRID to facilitate designing a clean WP style UI.

Design Using GRID

While Designing a WP application one must follow the WP guidelines and some of the principles are to keep UI simple, consistent UI control placement and disciplined. To address this aspects following design considerations plays important role:

Alignment

Size

Spacing of UI controls

And as a designer you must be aware that it’s not easy to implement the above aspects unless you are very careful. And inspite of being careful it is still easy to miss the alignment by a cm or two controls being mis-alignment from top or a few controls are not of same size when they are supposed to be.
But to make this tasks easy we have a design technique which takes help of a ’GRID’. This approach uses grid as a helping control to have crisp and clean design.
Now we will see how to use the GRID helper in Photoshop and Visual Studio 2012.

Design with Photoshop & GRID

For a Photoshop designer we can user the below image to design UI. (Image courtesy of Microsoft)
Steps to use GRID image in Photoshop:

Open the Grid image using File -> Open.

Create a new layer which is the base layer - AppPage.

Draw the screen design on AppPage layer.

Design with Visual Studio 2012 & GRID

For a Visual Studio 2012 designer, it’s a good news that a very handy tool called as AlignmentGrid.png is available to help in design. The designer grid can be enabled by uncommenting the below line at the end of the MainPage.XAML:

<!--Uncomment to see an alignment grid to help ensure your controls are aligned on common boundaries. The image has a top margin of -32px to account for the System Tray. Set this to 0 (or remove the margin altogether) if the System Tray is hidden. Before shipping remove this XAML and the image itself.--><!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False"/>-->

An image called AlignmentGrid.png also exists in the Assets folder of the project. Once the above settings are changed, developer can see the below VS Grid designer enabled.

Design Guidelines using GRID approach

As per the guidelines for WP apps, following common design practices should be followed for a consistent WP design across all applications.

Left-align

All the controls must be ideally aligned at extreme left side, unless the design specifically wants a different alignment due to a proper design rationale.

Below is the example of the same:

Correct Design

Incorrect Design

Align With The Grid Cells

Place the controls on the cells on the grid and not between the row or column spaces.

Below is the example of the same:

Correct Design

Incorrect Design

UI Element Size

Size the control in such a way that it fills a block completely. The lines in red for the Incorrect Design specify that the control must have been extended in size to complete the whole grid block.

Below is the example of the same:

Correct Design

Incorrect Design

Keep Gap

For a clean design it is necessary to keep decent amount of space in between controls. Especially being touch UI this is in general a good design practices.

Below is the example of the same:

Correct Design

Incorrect Design

List control with images

Although keeping the gap is one of the practices but there are exceptions. Example : List control with images, where the gap between image and associated text should not be more and should not take into account to fill the UI.
In addition, the images in List should start from left and the text must be on the top alignment with the image. As we can see in the right side image, the alignment of images of list and the text of the list is incorrect.

Below is the example of the same:

Correct Design

Incorrect Design

Draw Grid using GRID

One of the common alignment mistakes that can happen with WP is to incorrectly align the grid control. To avoid this, one can take help of GRID helper to design grid in such a way that the contents of the grid get correct space and alignment as per GRID helper design technique.

As we can see in the correct design, the cells of grid control are properly covering the GRID helper area and giving correct space for controls within the grid control cells. But in the incorrect design, the grid control is not correctly covering the GRID helper and neither creating correct space for controls/text within the cells of grid control.

Below is the example of the same:

Correct Design

Incorrect Design

Summary

Thus we have seen how we can use the GRID as a great helper for designers of WP application to create a simple, clean and consistent UI. Using GRID, designers can give a consistent WP app look as per the guidelines.