Designing with Metro for Windows Phone

I’ve read through several Metro presentations and sat through some sessions and realized that none of them is really too ground to earth, “what does this really mean to me as an application developer” -approach. I see a lot of “Personal, Relevant, Connected“, “Authentic experience” type of hype words being used, but that really doesn’t tell me how I should put controls to the screen, and how should I visualize them.

I try to cut down the hype and give some concrete examples what and how you should go with Metro when you design your application. Whole point of Metro desing language is to cut out all the excessive bling bling from your applications, have very clean and light feeling to your UI – so just a glance should tell the user all the necessary info, aim for that. So in developer terms – no 3D (authentically digital), no excessive color effects, have a lot of empty space between the controls, use enough big fonts – one could say this is very spartan way of designing the UI.

It goes without saying, that all the Silverlight controls that come with WP SDK adher to this design philosophy, so if you’re creating custom controls, you won’t go too much wrong by mimicking the build in controls look and feel/behavior. For example push buttons don’t have visible focus state, their rectangles are either empty or filled to show the state. Simple and clean.

The screen size is locked to 800 * 480 in every WP7 phone, no matter which model or manufacturer you have. That gives you pretty solid foundation for planning the UI, only thing you need to worry is portrait/landscape(left and right) and if you allow the switch between these two modes.

Full screen games are free from Metro restrictions, feel free to go crazy – but if your game appears withing the WP page frame, then you should follow the Metro guidelines. I won’t go more into details about game design rules, perhaps in a later post separately when I share some of the basic game design guides.

There are Windows Phone Design Templates as part of the Windows Phone SDK, which are layered photoshop templates and with those you can really do pixel to pixel application layouts very easily (Download the 89 Mb package from http://msdn.microsoft.com/en-us/library/ff637515%28VS.92%29.aspx)

And now to the raw details. There are two primary components in WP OS 7 Chrome, Application Bar and Status Bar.

Status Bar can be hidden, but you really shouldn’t do that, as it includes stuff like battery indicator and system clock, which users really like to see. By default only the system clock is visible, and it is opaque and takes 32 pixels in height and 72 pixels in width from your screen. In landscape mode the status bar grows from 32 to 72 pixels. If user taps the Status Bar area, rest of the relevant icons will be shown (Signal, Data, Call forwarding, Roaming, Wireless, Bluetooth, Ringer mode, Input status, Battery)

Application bar is where devs can put their icons. The rules are:

  • Up to four icons, system draws automatically a circle around them
  • Does not move in switch between portrait/landscape, but icons rotate
  • 72 pixels in height, width is whole screen in portrait
  • Opacity recommendated values are 0, .5 and 1
  • Icon size is 48 * 48, white foreground and transparent background using alpha channel

In application bar you have also a menu, where you can put text menu with max 5 items and the text should be between 14 to 20 characters only.Use very simplistic icons, like add could be plus sign, close could be just the X, search for example magnifying class etc. Remember to put text hint, so if your users don’t get your idea, clicking the three dots will bring up the icon buttons with the text hints (and the menu). Cool thing for graphically impaired people like me, is that the SDK comes with 64 free ready icons (C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Icons)

Rule with colors is that use user-defined system theme color unless you have really strong reason against it, as this way you can always guarantee that the theming won’t render your application unusable if your custom drawing color is same as the background of the theme.

For the fonts, stick with system Segoe to maintain WP general look and feel, there are five styles for it (regular, bold, semi-bold, semi-light and black). It is highly recommended not to use any fonts under 15 points in size.

Alright, here was the short intro to Metro, will be continued in part 2 where we go through the basic controls like Panorama and Pivot, then we talk about push notifications and live tiles, toasts etc. We’ll check out also the navigation and some general UX rules, stay tuned 🙂

About Jani Nevalainen

Windows developer who's been working on Microsoft Platforms since 1996. Windows Phone dev MVP 2013, Windows Development Platform MVP 2014. Currently working as Technical Evangelist for Microsoft Finland Developer Experience team.
This entry was posted in Windows Phone and tagged , . Bookmark the permalink.

Leave a Reply

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