×
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 -)
pavan.pareta (Talk | contribs)
(Pavan.pareta - - Design with Visual Studio 2012 & GRID)
(27 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Draft]]
+
[[Category:UI on Windows Phone]][[Category:Design]][[Category:Windows Phone 7.5]][[Category:Windows Phone 8]][[Category:Windows Phone]]
{{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 helper.}}
 
+
''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 10: Line 8:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|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:username]] -->
 
|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]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20130118
|author= <!-- Display as link [[User:username]] -->
+
|author= [[User:aady]]
 
}}
 
}}
  
 
== Introduction ==
 
== 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 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==
 
== Design Using GRID==
One of the most critical design aspects are:
+
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
 
#Alignment
 
#Size  
 
#Size  
 
#Spacing of UI controls
 
#Spacing of UI controls
 
+
<BR/>
And as a designer you must be aware that it’s not easy 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. <BR/>
+
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. <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/>
 
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===
+
Now we will see how to use the GRID helper in Photoshop and Visual Studio 2012.
For a Photoshop designer we can user the below image to design UI and for an inbuilt
+
===Design with Photoshop & GRID ===
===Visual Studio 2012 GIRD ===
+
For a Photoshop designer we can user the below image to design UI. (Image courtesy of [http://go.microsoft.com/fwlink/?LinkID=266572 Microsoft])<BR/>
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:
+
[[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.
 +
 
 +
[[file:PGridSteps.png|none]]
 +
 
 +
===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''':
 
<code>
 
<code>
 
<!--Uncomment to see an alignment grid to help ensure your controls are
 
<!--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
 
     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)
 
     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.-->
+
     if the System Tray is hidden.  Before shipping remove this XAML and the image  
<!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
+
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"/>
 +
-->
 
</code>
 
</code>
An image called AlignmentGrid also exists in the Assets folder of the project.
+
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.<BR/>
 +
 
 +
[[file:VS2012Grid.png]]
  
 
==Design Guidelines using GRID approach ==
 
==Design Guidelines using GRID approach ==
===Keep It Left===
+
 
 +
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:
 +
{| class="wikitable"
 +
|-
 +
! Correct Design !! Incorrect Design
 +
|-
 +
| [[file:GridCorrect.png]]  || [[file:IncorrectAlignGrid.png]]
 +
|}
 +
 
 
===Align With The Grid Cells===
 
===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:
 +
{| class="wikitable"
 +
|-
 +
! Correct Design !! Incorrect Design
 +
|-
 +
| [[file:GridCorrect.png]]  || [[file:IncorrectGridCells.png]]
 +
|}
 
===UI Element Size===
 
===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:
 +
{| class="wikitable"
 +
|-
 +
! Correct Design !! Incorrect Design
 +
|-
 +
| [[file:UIElGrid.png]]  || [[file:IncorrectUIElGrid.png]]
 +
|}
 
===Keep Gap===
 
===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:
 +
{| class="wikitable"
 +
|-
 +
! Correct Design !! Incorrect Design
 +
|-
 +
| [[file:GapGrid.png]]  || [[file:IncorrectGapGrid.png]]
 +
|}
 +
 +
 +
===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:
 +
{| class="wikitable"
 +
|-
 +
! Correct Design !! Incorrect Design
 +
|-
 +
| [[file:GridImgList.png]]  || [[file:IncorrectGridImgList.png]]
 +
|}
 +
 +
===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:
 +
{| class="wikitable"
 +
|-
 +
! Correct Design !! Incorrect Design
 +
|-
 +
| [[file:GridDrawing.png]]  || [[file:IncorrectGridDrawing.png]]
 +
|}
  
 
==Summary==
 
==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.
 +
 +
==References==
 +
[http://dev.windowsphone.com/en-us/design/process WP Design Process]
 +
 +
[http://go.microsoft.com/fwlink/?LinkID=266572 GRID Helper Image (PDF format)]

Revision as of 12:37, 7 July 2013

This article explains how to Design WP apps using GRID helper.

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

Contents

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:

  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.
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)
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

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.

VS2012Grid.png

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
GridCorrect.png IncorrectAlignGrid.png

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
GridCorrect.png IncorrectGridCells.png

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
UIElGrid.png IncorrectUIElGrid.png

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
GapGrid.png IncorrectGapGrid.png


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
GridImgList.png IncorrectGridImgList.png

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
GridDrawing.png IncorrectGridDrawing.png

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.

References

WP Design Process

GRID Helper Image (PDF format)

450 page views in the last 30 days.