×
Namespaces

Variants
Actions
(Difference between revisions)

Using a Grid Helper image to Design WP Apps

From Nokia Developer Wiki
Jump to: navigation, search
Aady (Talk | contribs)
(Aady - - Visual Studio 2012 GIRD)
Aady (Talk | contribs)
(Aady -)
Line 1: Line 1:
 
[[Category:Draft]]
 
[[Category:Draft]]
{{Abstract|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.''
+
{{Abstract|This article explains how to Design WP apps using GRID}}
 
+
''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''
+
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 18: Line 16:
 
|translated-from-title= <!-- Title only -->  
 
|translated-from-title= <!-- Title only -->  
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by=<!-- After re-review: [[User:aady]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
Line 38: Line 36:
 
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.<BR/>
 
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.<BR/>
 
===Photoshop GRID===
 
===Photoshop GRID===
For a Photoshop designer we can user the below image to design UI and for an inbuilt
+
For a Photoshop designer we can user the below image to design UI.<BR/>
 +
[[file:PGrid.png]] <BR/>
 +
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. <BR/>
 +
[[file:PGridSteps.png]]
 
===Visual Studio 2012 GIRD ===
 
===Visual Studio 2012 GIRD ===
 
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:
 
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:
Line 51: Line 55:
 
-->
 
-->
 
</code>
 
</code>
An image called AlignmentGrid also exists in the Assets folder of the project.
+
An image called AlignmentGrid also exists in the Assets folder of the project.<BR/>
 
+
[[file:VS2012Grid.png]]
 
==Design Guidelines using GRID approach ==
 
==Design Guidelines using GRID approach ==
 
===Keep It Left===
 
===Keep It Left===

Revision as of 17:27, 18 January 2013

This article explains how to Design WP apps using GRID

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

Contents

Introduction

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. The tutorial covers how to use GRID in either situation.

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:

  1. Alignment
  2. Size
  3. 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.

Photoshop GRID

For a Photoshop designer we can user the below image to design UI.
PGrid.png
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.

PGridSteps.png

Visual Studio 2012 GIRD

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:

<!--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 also exists in the Assets folder of the project.
VS2012Grid.png

Design Guidelines using GRID approach

Keep It Left

Align With The Grid Cells

UI Element Size

Keep Gap

Summary

455 page views in the last 30 days.