What is Metro?

Metro is a term used by Microsoft to describe one of its key “design languages”. This means that although each product designed using Metro is individual and has its own specific appearance, there are common themes that mean there’s a consistent look and feel. A great example of what’s meant by a design language is a chess set: although a bishop is obviously different to a pawn, there will be a similarity in style that clearly unites them and distinguishes them from pieces in another chess set.

Where does Microsoft use Metro?

Although Metro goes back to the mid 1990s, it came to prominence with the Zune media player and the Windows Media Center. Later it became used for the Xbox 360 menu system.

In the past couple of years it’s formed the basis of Microsoft’s smartphone operating system Windows Phone 7. It will become even more prominent later this year when it is used for one of the two main looks (and the default starting set-up) for Windows 8, including on desktop computers.

Where did Metro come from?

Although it’s not been confirmed, there’s a lot of speculation that the style was inspired by that used for signs on the public transport system operating in Microsoft’s home base near Seattle.

What does Metro look like in practice?

The main features of Metro include that it’s based around squares or “tiles” that mainly feature words rather than images. These words are generally written in variants of a single typeface, Segoe, and are usually in a large and clear style. As touchscreen devices have become more common, the tiles have often included thumbnail images, for example of album covers in a library of music files, and have been set up in a way that the user can “swipe” along a line of thumbnails that extends past the end of the screen.

What are the main principles of Metro

Microsoft has listed four main principles that help unify interfaces that follow the Metro design:

Content not Chrome: This means that both the background of the page and the background of a tile (behind the text) are kept plain, usually with a solid color, to avoid distracting from the text.

  • Honesty: This means that when a designer is using Metro, they should pay specific attention to the device the software will appear on, for example by intentionally designing Windows Phone 7 for a small touch-screen rather than simply scaling down a style from PCs. This principle may have made designing Windows 8 more difficult as it will be used on both traditional and touch-screens of a variety of sizes.
  • Motion: This means that the way screens change, for example when swiping through icons, or when opening a new screen when an icon is clicked of pressed, should be done in a consistent manner. This is intended to make the experience of using the interface much smoother.
  • Typography: This means having text that is both visually attractive and functional. As well as using the consistent typeface, Metro designers are asked to think carefully about where to place the text, and how to use different sized text or bold text to help organize the information on a page.