WP7 Connect - Follow us on Twitter WP7 Connect - Become a Fan on Facebook

The Story Behind Metro UI

February 18, 2011 1 Comment

The guys over at Windows Team Blog has put together a wonderful article about what is Metro UI and where did it come from. Here is a tidbit…


'The story of Metro

A couple years ago the Windows Phone design team realized that the design path that Windows Mobile was on was not sustainable. Once we decided to reset the direction, we didn’t look towards other mobile or PC user interfaces for inspiration. Instead, we surrounded ourselves by what we considered to be the best examples of design work, from Josef Müller-Brockmann and other pioneers of the International Style, Massimo Vignelli’s design systems for the NY Subway Map and brands like American Airlines, to conceptual work by Experimental Jetset. Similar inspiration was being used in Windows Media Center, Zune, and Xbox. In addition to this visual inspiration for our art direction, we create a series of principles to guide the interaction design, motion design, and overall experience for the phone.



Our design principles were, and still are:

Clean, Light, Open and Fast

We took an approach that we call “Fierce Reduction” to remove any elements in the UI that we felt were unnecessary; both visual elements and feature bloat. It allows us to shine a focus on the primary tasks of the UI, and makes the UI feel smart, open, fast, and responsive.

Alive in Motion

The transitions between screens in a UI are as important the design of the screens themselves. Motion gives character to a UI, but also communicates the navigation system, which helps to improve usability.

Celebrate Typography

Our design inspiration is very typographic, and it felt like it was time for User Interfaces to be uncompromising about type as well. Type is information, type is beautiful.

Content, Not Chrome

It’s the content on the phone that people want, not the buttons. Reducing the visuals on the phone that aren’t content will help you create a more open UI, and it also promotes direct interaction with the content.

Authentically Digital

Finally, we believe in honesty in design. A user interface is created of pixels, so in Metro we try to avoid using the skeumorphic shading and glossiness used in some UI’s that try to mimic real world materials and objects.

So now that we’ve established Metro, where do we go next? To help us think about what the future of our experience is, we need to understand where we’ve come from. '


This is a great back story to the birth of Metro UI… Check out the full article: Windows Team Blog


Addicted to WP7, 360 and tech in general...

More Posts - Twitter

Tags: News
  • psycros

    Metro UI looks like an ad from Playboy circa 1984. Its totally uninspired, has terrible flow, wastes screen space, has maybe the worst primary font ever and the animations are slow and totally out of place. If this is the direction Microsoft is heading then the destination is irrelevance.

HTC ONE (M8) For Windows Officially Announced & Now Available For Verizon Wireless (Press Release)

HTC offers Windows platform on flagship device, blends premium hardware with unique software experience BELLEVUE, WA – August 19,...

Watch Microsoft’s New Windows Phone Ad Featuring Instagram, OneDrive, Amazing Photos, & Cortana (VIDEO)

Check out the latest ad by Microsoft showcasing the Nokia Lumia 1020 with Instagram and OneDrive and the newly,...