Home » Arts & Entertainment, programming

The Metro Design Language

Submitted by 2 Comments | 2,718 views

A couple years ago the Windows Phone design team realized that the design path that Windows Mobile was on was not sustainable and decided start afresh.

Design inspiration for Metro

When given the chance for a fresh start, the Windows Phone design team drew from many sources of inspiration to determine the guiding principles for the next generation phone interface. Sources included Swiss influenced print and packaging with its emphasis on simplicity, way-finding graphics found in transportation hubs and other Microsoft software such as Zune, Office Labs and games with a strong focus on motion and content over chrome. [1]

Metro is the name of the new design language originally created for the Windows Phone 7 interface and now also used for the Xbox 360 Dashboard and Windows 8.

Microsoft's basic description of Metro

Guiding Principles of the Metro Design Language

There a few core concepts of the Metro design language which we’ll outline here. Each concept, or guiding principle, contributes to the look and feel of the whole system as well as the layout and frequency of elements used within the interface. These principles govern not only Microsoft’s own Metro apps, but should govern applications that independent developers create as well. [2]

Clean, Light, Open and Fast

Example of a Windows Phone Metro style application

Unlike previous incarnations of the Windows interface where stuffing everything on one screen and making maximum use of your screen real estate was considered a good thing, Microsoft’s new direction is that interfaces should be very simple and have a good deal of white space. Focus the user on the primary tasks and reduce clutter. This makes the UI feel smart, open, fast, and responsive. [3]

Xbox 360 Dashboard: Live tiles are a great example of simplicity

Live tiles are a great example of simplicity. The screenshot above of the new metrofied Xbox 360 dashboard could be on a tablet and you wouldn’t know the difference because it’s so simple it can scale to different form factors. [4]

Celebrate Typography

Typography is emphasized in Metro and this benefits the user in many ways

Type is information, type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content.

Alive in Motion

Alive in Motion - good example Watch this video on YouTube

Motion is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, navigation, extra dimension and depth and improves the perceived performance of the whole interface.

The best Metro experiences are the ones that are alive and colorful while at the same time emphasize typography and simplicity.

Content, Not Chrome

It’s beautiful. It’s less chrome. The focus is on the content.

Content not Chrome is one of the more unique principles of Metro. By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to direct interaction with the content.

Authentically Digital

Sometimes, this principle is simply called “honesty”. Design explicitly for the form factor. Don’t hold the user to real-world limitations or waste space on design elements that don’t relate to the function you are looking to accomplish.


[1] From Transportation to Pixels: The story of Metro
[2] Metro Design Language of Windows Phone 7
[3] Metro Design Principles for Windows Phone, Windows 8 & Xbox 360
[4] When Metro design falls off the tracks – The three pillars of Metro

Related posts


Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.