Windows Phone 7 Design Resources – UI Guide and Design Templates

Windows Phone 7 Design Resources – UI Guide and Design Templates

  • Comments 14
  • Likes

With the Windows Phone Developer Tools in Beta and Windows Phone 7 in Technical Preview, now is the time for you to build Windows Phone 7 apps in earnest. We have refreshed our developer documentation to help you build those apps, and we have two, new design-focused documents to help you make them look beautiful.

First up, the UI Design and Interaction Guide for Windows Phone 7 v2.0 has been updated from the ground up for beta. With additional information and a new layout we hope you will find more readable, this guide provides detailed information about UI elements and controls, UI system behaviors, and the interaction model for the touch interface based on the design system internally named Metro. Designers and developers should read this guide to learn about the dos and don’ts of UI implementations for their Windows Phone apps. We've made it easier to find specific guidance by putting it in bold in the right-hand column of each page.

Also available are the Design Templates for Windows Phone 7. These are a collection of 28 layered Photoshop template files and the Segoe WP font family that can be used to create pixel-perfect application layouts, to help guide UI development, or to pitch an idea. These design templates showcase many controls that are a part of the Windows Phone Developer Tools Beta. They also include examples of controls that are a part of Windows Phone, but are not available as a part of the Windows Phone Developer Tools.

Let us know what you think. If you have suggestions or feedback about these design resources, please email us at wp7des@microsoft.com and help spread the word – if you find these resources helpful, please tweet about them.

14 Comments
You must be logged in to comment. Sign in or Join Now
  • After Effects animations with the correct UI timings would also be useful for App promotional and demo purposes.   (How long it takes for a tile to flip around etc.)

  • CLaueR
    1 Posts

    @brao The release date for RTM has been announced today on Ch9: it will be September 16

  • The guidelines are fairly specific to what the different gestures are, however they are not specific enough to ensure that we will always get the same gestures across different apps. For instance, how fast should I flick before a pan becomes a flick? What's the tolerance on a tap (ie not to interpret it as a pan), and how much time do I allow between touch down and up? Or what about a double tap, and how close together should the two taps be located? (and since I can't rely on pixels as a distance how do we do this in for instance millimeters instead?) etc...

    To me it sounds like there should be a touch processor in the core API that we can take advantage of, so the way I define a tap will be the same as what someone else defines it as. Or at the very minimum the interaction guidelines should specify these things more clearly, so we all can build consistent user experiences.

  • brao
    2 Posts

    contd...  We want to work with Panorama and Pivot controls, is there anyway we start using these controls before the RTM release? any alternatives? Thanks..

  • brao
    2 Posts

    Hi Larry Lieberman, when is the RTM tools release date?

  • @Tobias - the system icons are installed on your local machine as a part of the Windows Phone Developer Tools at C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons You can download the tools at go.microsoft.com/fwlink

  • I'm disappointed about the fracturedness of the package: e.g. Icons used and shown in the styleguide and menu templates can't be found in the Icons.psd, etc. so I have to spend time creating a dummy version for mockups, etc. This has nothing to do with "feasibilty" but rather inconsistency. Or did I miss the point somewhere?

  • here is another resource: "Windows Phone Design System - Codename Metro"

    URL: go.microsoft.com/fwlink

  • @Larry Lieberman: good to hear. I'm really looking forward to developing for the platform, but so far I've restricted myself to XNA stuff until we get the full toolset. Knowing that panorama/pivot will be available in RTM is especially assuring, and I hope to see the remaining 'minor' controls available as well. UI consistency will do nothing but help WP7's image.

  • irco
    1 Posts

    wouldn't it make _more_ sense to provide templates for Expression Design, rather than PS?

  • Resources are definitely helpful, however, I'm surprised at the lack of descriptive layer labeling in the Photoshop files. A lot of the layers are named well, but many layers are named Layer 6, Layer 3 etc. It would make the files easier to navigate with better labeling.

  • @planetarian: we agree there are some key controls missing in the Beta of the WPDT.

    We will ship the three most important ones, (Pivot, Panarama, and Bing Maps),  in the RTM release of our tools, and they'll support very rich design experience as well. Of course we would have liked to have had these in the Beta but it wasn't feasible from an engineering/test perspective.

  • So when are the additional controls shipping ? "Few" weeks as was promised at time of BETA release has past. Would really like to hear news about additional controls... Even a roadmap of when they will be available will be great. Stop being so diplomatic :). Atleast give a time frame when native pivot,panaroma,time picker, date picker etc controls will be available. Thanks.

  • It's highly concerning to me that there are so many controls that are "not shipped as a part of the Windows Phone Developer Tools". Many basic controls such as context menus, pivot/panorama, time picker, even the basic switch... If you skimp on available controls then not only are you leaving it on developers' shoulders to spend time developing these controls, but you're also going to see a ton of apps with inconsistent experiences. Especially with something as complex as the panorama view, how many different implementations are we going to see? With so much missing, it seems like the developer tools wound up half-assed. Will we see these missing controls added in a new release?