In this article I will talk about design principles of Windows Phone 7. There are lot of common mistakes developer do while designing the screen of Windows Phone app uknowingly.

1. Alignment

There should be 24px margin on the left. Header, content, tiles in fact any control should be left aligned with marging of 24px.

In case you need right aligned all the elements should be right aligned with common margin of 24px.

When you have title and value pairs, title should be placed above the content or you can also place title and value in two left aligned columns. The first options is more preferable.

2. Spacing

Spacing between controls should be uniform horizontally as well as vertically. The two control should be apart by 12px.

      

       

3. Control reaction

Use standard animation to detect control is touched. Windows Phone Toolkit provides tilt effect on control which should be used.

Tilt effect on HubTile and other Controls

4. Splash Screen

Do not use default splash screen which comes with the creation of project. Place your own custom splash screen.

       

5. Buttons

Use Application Bar button instead of button to perform any action. Use button only when it is absolutely necessary otherwise avoid using button.

Don't put close buttons to close the application, hardware back button handles close of the application.

Don't put back button to go to previous screen, hardware back button should be used to go back to previous screen.

6. Text

Default font of Windows Phone is Segoe WP, use the default phone unless it is absolutely necessary to change it.

Title of app should be in lower case until any brand guidelines follows some different case. If brand guidelines is followed same guidelines should be followed across the app.

7. Headings

Headings should be left aligned without borders, backgrounds, underline. Panorama tiles can be decorated based on brand guidelines

8. Lists

If list contains icon it should be placed on the left side of the text of listbox. If icon is placed inside circle like History it represents action is associated with icon. Icon without circle represents indication.

List item should have tilt animation to indicate it has been pressed.

Implementation of tilt animation is available in Tilt effect on HubTile and other Controls

9. Start Tiles

Start tiles of Windows Phone should not contain three dimensional or rounder corners.

10. Browser Controls

Don't embed browser controls in your app. Take the user to Internet explorer of Windows Phone on click of any link. User should be notified before taking to Internet Explorer from app.

One can embed browser control for authentication like facebook or twitter.

11. Theming

Theme or accent color changes of the device should not impact the visibility of elements and contrast should be maintained.

To avoid contrast issue on changing of theme one can use fixed theme as well.

12. Page Transitions

There should be animation when you move between different pages.

Metro Way Page Transition

This ends the article of design guildelines in Windows Phone.