Windows Phone 7 UI Templates
March 19, 2010 in Design, Windows Phone 7
Even before attending MIX10, I started thinking about applications that I could write for the Windows Phone 7 Series. I couldn’t wait to start sketching out user interfaces and thinking about the experiences that the people using those applications would have. What was missing to make this easier was design templates.
Windows Phone 7 introduces concepts such as live tiles, an application bar with buttons and menus, and panoramic applications. The UI templates should take those things into account as well as the WVGA display that can show 800×480 pixels in either portrait or landscape orientation:
When an application is pinned to the Start screen, the application tile is shown:
Applications can receive notifications to let the user know of important updates even when the application is not running. One type is the tile notification which can update a pinned tile with a background image, text, and a counter:
An application can choose to include an Application Bar which appears at the bottom of the screen in portrait orientation and vertically on the side when in landscape. The Application Bar should be limited to a few important buttons that can easily be represented by images. Other actions should be put in the menu. The Windows Phone Development Programming Guide encourages the use of no more than 5 menu items as it will force the user to scroll:
One type of application that can be developed for the Windows Phone 7 is a Panorama application which spreads the UI across multiple screens with a slight overlap to tease the users on to the next screen:
When creating the 5 UI templates for Windows Phone 7, I made sure the above concepts were included.
The first two templates include a WVGA screen inside a phone device chrome. When printed the phone image is roughly the size of an iPhone or Nexus One. The template includes two tiles to be used for the application tile and the updated tile based on notification. Three Application Bar images have been included for 2, 3, or 4 buttons. As well as a place to write up to 5 menu items.
The next two templates display 6 screens per page in either portrait or landscape orientation:
The final template is for Panorama applications and allows for 5 portrait screens side by side with a slight overlap. The template uses alternating red & blue borders to show each screen’s full width. The two grid spaces between red & blue lines is the tease overlap for the next screen:
The templates are available for download as a PowerPoint file.
Have you already started designing Winodws Phone 7 Series applications? Do you find these templates useful? What changes would you like to see in these templates? Would you be willing to share some of your designs with others?
