Windows Phone 7 for Designers — Cheat Sheet

Posted in Interaction Design, Interfaces and Mobile

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.

Let’s talk

Ilkka

Ilkka Haavisto Business Development Director +358 40 511 9038

Panu

Sami Erpo Head of Business Development, Europe +372 50 71 968

Panu

Panu Korhonen Managing Director +358 50 301 0432

Sami

Sami Niemelä Creative Director +358 50 528 9265