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:

image

When an application is pinned to the Start screen, the application tile is shown:

image

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:

image

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:

image

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:

image

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.

image

image

The next two templates display 6 screens per page in either portrait or landscape orientation:

image 

image

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:

image

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?

Windows Phone 7 UI Templates

3 Comments

    1. Jim Burman says:

      How do you know how many pixels to correspond to a given type face?

    2. Mark Tucker says:

      Each grid square equals 40 pixels. The Visual Studio templates for creating Windows Phone applications include a page title that uses a 20 pixel font and a list title that is 72 pixels. Looking at the styles in App.xaml there is a note that indicates that a 20px font maps to 15pt and 72px maps to 54pt. I have not confirmed this. The font used is called Segoe.

    3. DESIGNING FOR WIN PHONE 7…

      Designing applications for the Win Phone 7 is very similar to designing for print. In my opinion, it…

    4. DESIGNING FOR WIN PHONE 7…

      Designing applications for the Win Phone 7 is very similar to designing for print. In my opinion, it…

    5. Windows Client Developer Roundup for 3/29/2010…

      This is Windows Client Developer roundup #18. Starting with this issue, I’ll be combining the WPF and…

    6. Tabletwriter says:

      Just getting my feet wet in WP7 development. Attended a Nokia/Microsoft developer event yesterday and one of the presenters used a WP7 template pad during a demonstration. I thought, yeah, I need to make one for OneNote…anyway, I was looking up the pad for inspiration when I stumbled on to your templates…and they look great! Thanks for sharing them and feeing up my afternoon (:

Leave a Reply

Windows Phone 7 UI Templates

4 Trackbacks