User Interface Design and Style Guidelines

The Windows Phone 7 Series uses a style named Metro that is designed to combine harmonious, functional, and attractive visual elements while clearly directing end users to the content they want. You should attempt to follow the same visual style and interaction paradigm for your application as is used in the built-in applications and the interface of Windows Phone 7 to ensure that your application is intuitive and easy to use.

Microsoft provides a guide to the Metro design style and the recommended approach for creating a more consistent and fluid UI experience, including descriptions of standard input functionality within the UI framework, the software interaction elements, and the system-based controls. If you want to sell your application through Windows Marketplace, you must follow these design guidelines.

Remember that any images you use in your application should be suitable when the device theme is changed. For example, if you use a white icon or image and the user changes from the default black theme to the white theme, your image will not be visible. One approach is to use code to switch the selected image based on the current theme, as demonstrated in the Tailspin Surveys sample application that accompanies this guide.

For more information, see the guide, UI Design and Interaction Guide for Windows Phone 7; from the Microsoft Download Center (http://go.microsoft.com/fwlink/?LinkID=183218). For information about the Metro design and to learn about design and development recommendations for your applications, see the video presentation, Windows Phone UI and Design Language, on the Mix10 website (http://live.visitmix.com/MIX10/Sessions/CL14). For information about the resources (including the set of application bar icons) for Windows Phone 7 applications, see “Design Resources for Windows Phone” on MSDN® (http://msdn.microsoft.com/en-us/library/ff637515(VS.92).
aspx). For a set of Adobe Photoshop design templates that help you create attractive applications that match the Metro theme, see the Microsoft Download Center (http://go.microsoft.com/fwlink/?LinkId=196225).

You must also consider how you will localize your application to achieve certification by Windows Marketplace. For a list of the supported languages for Windows Phone 7 applications, see “Globalization and Localization Overview for Windows Phone” on MSDN at http://msdn.microsoft.com/en-us/library/ff462083(VS.92).aspx; this page also provides a useful guide to the use of cultures, encodings, localizability, and links to other related resources.