Hi there–you are browsing the old Nordkapp website. New one will be out soon!

Windows Phone 7 for Designers — Cheat Sheet

A downloadable Windows Phone 7 Cheat Sheet to help mobile interaction designers.

by Teppo Kotirinta Principal Designer

Hello,

here’s a little something helpful for all you interaction designers out there — Windows Phone 7 Cheat Sheet!

We did it here at Nordkapp to help us design some of our recent WP7 projects. It’s somewhat ashamedly based on Microsoft’s Design Guideline document(s). We’ve dug out only the important bits, added some other comments and highlighted the parts that might come as a surprise of existing Symbian, iOS or Android designers and developers.

Notes

We also found that Microsoft’s documentation currently is lacking many precise pixel counts and locations for various crucial UI elements. In fact, it seems common in the official documents to state something like “this hasn’t been implemented yet, try to design something like this”. We planned to show more exact pixel counts in this document but that proved to be difficult, mostly because the existing documentation is either lacking or conflicting itself. For example the size of gutters seems to change from screen to screen, varying between 15, 22 and 24 pixels for example. Add to that the fact that there is no way to take screenshots from the device itself to verify how they’ve really been implemented, we decided to leave pixel guides out for now. (There’s a new beta state Windows application from some French people that claims to be able to take screenshots, but it’s somewhat complicated to get running.)

This is problematic as gutters are one of the first things that visual designers would look at when designing WP7 app. The fact that such information is not available makes the situation difficult. Perhaps these keep changing and the issue is solved case by case (pivot by pivot) in the code, effectively customizing empty spaces depending on the content at hand.

We are prepared to update the Cheat Sheet as more information becomes available from Microsoft, the screenshot tool or you, dear readers.

How to use the Cheat Sheet

One recommended use for the document is to just print it out on an A3 and start marking what kinds of screens your application will have. While doing this, you’ll soon find more screens to design that you hadn’t even considered before. Once you find your screens, you’ll find most important things regarding that screen type highlighted as bullet points right next to them, and you can start designing without reading a 100 page PDFs and trying to find that info there. Although, at some point, you’ll want to read those documents as well. Once you’ve read them, this Cheat Sheet will also act as quick reference point and design deliverables planner.

Go at it!

Download the Cheat Sheet

Windows Phone 7 Cheat Sheet (PNG 2.3Mb) A3
Windows Phone 7 Cheat Sheet (PSD 4.6MB) A3
Windows Phone 7 Cheat Sheet (PDF 29.5MB) A3

Other Helpful Resources

By the way, this post is related to another one we did, called Windows Phone 7 for Users.

29 Comments

  1. 23.05.2011 at 17:14
    Pingback: Windows Phone 7 for Users | Nordkapp Blog
  2. Haven’t tried these, but I reckon the approach should work. You essentially take a bitmap and save it from the entire screen via a simple Silverlight app. In that app you could have an image or images within a container.

    Let’s hope Mango introduces the actual screenshot capability.

    http://social.msdn.microsoft.com/Forums/en-US/windowsphone7series/thread/b13c4d4b-5d36-48ec-99c0-c9ab8de88095

    http://blog.markarteaga.com/ScreenCaptureOnWindowsPhone7.aspx

    Ville
  3. There’s probably a load more for the simulator but here’s one that could work there. Perhaps more straightforward to use the simulator anyways:

    http://www.innovativetechguy.com/?p=13

    Ville
  4. Great additions people! Thanks. We update them to the post links as soon as we get a chance to test if we can get them working. :)

  5. Great cheat sheet but I dont seem to be able to get this in high res. If I was to do designs I would greatly appreciate the high res file where I can take so me of these screen to usse in my scketches.

    Thanks

  6. Victor Juri:

    Thanks for the comment. However, this Cheat Sheet doesn’t try to replace actual graphic assets, but act as an overview of what’s going on. Use it as such.

    You can download PSD layouts directly from Microsoft: Design Templates for Windows Phone 7.

    They are a more high res and can be used for basis of actual layout work. (Althought layered PSDs would have been nicer.)

  7. Great stuff but with a couple of inaccuracies even from a quick glance:

    1. You can’t “support” a HW search key in your app. It’s inaccessible to developers.
    2. Status bar is not interactive (except for showing up when you touch there)

    Alan Mendelevich
  8. 30.05.2011 at 13:30
    Pingback: Weeknote 194 + 195 | Nordkapp Blog
  9. @Alan

    Thanks for pointing those things out. Things are maybe not so simple though:

    1 — Search may not be supported right now, but built-in apps already demonstrate that it’s meant to be and meant to search within the app contexts. Although even that is not so clear, as you can read in our WP7 for Users post
    : sometimes Search goes to Bing, sometimes to in-app search. It’s simply not consistent.

    2 — Status bar being “interactive” is Microsoft’s wording for the matter. The clock is interactive, at least.

  10. Hello,

    Take look at what the Microsoft Windows Phone Design Team calls “the grid”.

    Check out my blogpost :

    http://modul8com.wordpress.com/2011/11/05/as-long-as-you-follow-the-metro-grid-youre-good/

    The magic number is 12, so every multiple of 12 is OK.

    Hope I helped you…

    Michael

  11. No Doubt! Microsoft is doing great as well as Nokia new phones are also… I am in middle east now and I know the importance of Android here..

  12. 04.10.2012 at 15:02
    Pingback: Weeknote 256 | Nordkapp Blog

Leave a Reply

Your email address will not be published. Required fields are marked *