Since I’ve been working closely with the Metro Ui and Isotope for a client here in London I thought id share with you what the Metro Ui is about and how I understand it.

When we talk about “Metro” we are generally referring to the design style developed by Microsoft. Metro isn’t exactly new, the style has been around and evolving as early as the mid 90′s with Encarta 95 and elements crept into MSN 2.0. Over the years we’ve seen it included in Windows Media Center and very much so into Zune. Later as this visual design language was refined, and found its way into the Windows Mobile operating system, Windows Phone 7 and recently into the Xbox 360 dashboard update, and Windows 8.

A specially-made version of Microsoft’s Segoe font family, Segoe WP, is used as the main font family for all typographical elements. It was confirmed by Microsoft at Computex that Windows 8, (complete with new Windows 8 new logo) the successor to Windows 7, takes inspiration from Metro. Microsoft also plans to add the Metro design principles to other products and services, like the Xbox 360 and Windows Live, in order to create a unified and distinctive look across its consumer products and services.

Metro can be divided into two sections; the Metro Design Principles and the Metro Design Language. These principles are key to the UX of Metro, acting as UI guidelines to products such as Windows Phone 7 and the Xbox Dashboard update. Later, the language becomes a set of visual assets, user related interactions, transitions/motion sets, application flow elements and rules, which combine to create a unified user experience.

An analogy of the relation between Principles and Language could be an abstract concept like “Love” (a Principle) which could be expressed by a concrete symbol like ♥ or the combination of four characters “l-o-v-e”. I’m sure you could come up with an infinite number of other ways to express the concept “love”, including the sound of the word itself, photos or other metaphors.

The tangible manifestation of a concept is called language. If we had a Principle like Glass and I need to manifest it with three icons: a pencil (Edit), a star (Favorite) and a cross (Close) and a control like a button these could manifest in a visual language like this. If I give you these, I’m certain you could derive other icons or even controls.

Typography

Typography, typography, typography… when it comes to Metro everything seems to be about typography. Metro is not all about Typography. Typography is no more important than photos or images or icons or motion or sound. Remember the first two principles: Information is the star of the show. If it makes sense to express information with typography do it – otherwise don’t force it.

Typography can be beautiful when incorporated with design skills. For example, in Metro, we use typography in different sizes and different weights to convey structured information (beautiful example below). And this is exactly the thing that makes typography stand out from other media – it’s not typography for the sake of typography but typography as a particularly efficient and flexible tool to convey structured information. It beats icons, photos or other media on this particular area: structured information – structured information is information that has hierarchies, that shows an order, and that helps the user prioritize consumption of information. This is the reason we don’t use “bullet points” in Metro – they are not needed if you give the right size/weight treatment to text.

Windows Phone Metro Design Language

To empower developers to create Windows Phone apps, Microsoft could have just announced/talked about the Metro Design Principles but of course this would have meant developers had to create their own Design Language and spend hours and hours doing so. Creating a Design Language for a modern device like a phone is a big deal and requires of many hours of design, iteration, reviews and user testing. The Windows Phone Design Studio crafted a very solid Language that everyone can use.

Based on the Metro Design Principles, Microsoft provides the Windows Phone Metro Design Language. Using it will set you up for success to craft beautiful, compelling and consistent experiences for Windows Phone. The Windows Phone Design Language is determined by these categories:

Navigation. Layout.Composition Typography
Motion
Iconography
Images & Photos
Themes & Personalization
Touch Gestures & Targets
UI controls
Hardware
Services
Marketplace and Branding

Compared to the Principles that are abstract, the Language is concrete. So there is a concrete navigation system in Metro called Hub & Spoke (more here). There’s a concrete set of gestures like tap, double tap, tap & hold, flick, pan. There’s a concrete typographic style using Segoe in different weights and sizes to convey structured information. There’s a concrete set of UI controls like buttons, radio buttons and checkboxes, sliders and others UI metaphors. There’s concrete application interaction metaphors like Pivot, Panoramas and Pages.

All these set of concrete elements is what makes up the Windows Phone Metro Design Language. It’s a comprehensive, end-to-end, flexible and extensible design language.

But, is this out-of-the-box Design Language the only way to manifest the Metro Design Principles? No.

For example, could I use Helvetica or Swiss fonts in my Windows Phone app and still be Metro? Of course! As sans-serif fonts these and other fonts could be used instead of Segoe.

We will talk more about how to take Metro beyond what comes out-of-the-box in a future post but check out this article on Lessons from Swiss Style Graphic Design to explore some print design examples that follow the same Design Principles as Metro (other than Motion and Authentically Digital). They look pretty different from the out-of-the-box Windows Phone Metro Design Language (to be clear those are print examples…) but they are based on the same Principles. This could give you an idea of how the same Principles could be expressed in different ways beyond what we provide out-of-the-box.

Further reading on the subject:
Lessons from Swiss Style Graphic Design
Why metro now rules at microsoft