Revision as of 16:33, 18 January 2013 by Aady (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Using a Grid Helper image to Design WP Apps

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to Design WP apps using GRID Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.

Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use

WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Created: (29 Jan 2013)
Last edited: Aady (18 Jan 2013)



The main principle of Metro design for Windows Phone 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.

Design Using GRID

One of the most critical design aspect is alignment, size and spacing of UI controls within an application. And as a designer you must be aware it’s not easy unless you are very careful and still is 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. For a Photoshop designer we can user the below image to design UI and for an inbuilt For a Visual Studio 2012 designer, it’s a good news that a very handy tool called as AlignmentGrid is available to help in design. The designer grid can be enabled by uncommenting the below line at the end of the MainPage.XAML: An image called AlignmentGrid also exists in the Assets folder of the project.

Design Guidelines using GRID approach

Keep It Left

Align With The Grid Cells

UI Element Size

Keep Gap


451 page views in the last 30 days.