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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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
Image may be NSFW.
Clik here to view.
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]
Image may be NSFW.
Clik here to view.
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
Image may be NSFW.
Clik here to view.
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
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
Image may be NSFW.
Clik here to view.
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.
References
[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