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.
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
Other Helpful Resources
- Windows Phone 7 Design Resources – UI Guide and Design Templates
- Microsoft’s Windows Phone 7 Cheat Sheet (Text)
- Take WP7 device screenshots using Windows Phone Device Manager
- NEW: App Hub — Develop for Windows Phone & Xbox 360
By the way, this post is related to another one we did, called Windows Phone 7 for Users.