Skip to main content

The origin of the Metro UI design language

In a neat little historical post over at the site Project Metro, the origins of the Metro UI design language are given some detail. What makes it interesting is the information came from a Microsoft presentation on the topic at an early "Behind the Tiles" event.

We won't steal all of their thunder from the fun little read, so we'll just tease you with a bit of it:

"The whole idea started with the Swiss Movement in the 1960′s. They wanted a way to communicate to people through design, while being different yet direct. What was born from this movement was the font, Helvetica. It was the first simplistic yet sophisticated design font that delivered a clear and precise message. Microsoft knew with the rise of Apple and Android that they needed to make a change. They needed to be different but also wanted a clearer way to deliver its message..."

Very interesting stuff, especially about the use of Helvetica and Segoe fonts (Windows Phone uses a slight variation called Segoe WP). Personally, we'd like someday to see a detailed history of the evolution of Metro UI through Microsoft (we've seen some early iterations in Media Center, then through Zune to Windows Mobile 6.5 and up to Windows Phone 7).

Source: Project Metro

Daniel Rubino is the Executive Editor of Windows Central, head reviewer, podcast co-host, and analyst. He has been covering Microsoft here since 2007, back when this site was called WMExperts (and later Windows Phone Central). His interests include Windows, Microsoft Surface, laptops, next-gen computing, and arguing with people on the internet.

24 Comments
  • i have stolen that image for my phone wallpaper.
     
    thank you :)
  • That makes two if us
  • *Generic admittance of pilfery*
  • Good idea!
  • I've written my bachelor's thesis about the Metro design language.
    It was a very interesting topic, but sadly it's written in German, so won't be very useful to wpcentral :)
  • Darf ich davon was lesen? Interessiert mich ;) zumind. Eine Zusammenfassung ;)
  • Werd beizeiten mal einen Teil hochladen, und dich in Kenntniss setzen :)
  • ser klein bissen deutch.
     
    i don't know how to spell that but that's what i said when i lived in Germany.
  • lol, Well the correct (whole) phrase would be "Ich spreche ein bisschen Deutsch" – "I speak a little German". But I guess people understood what you meant ;)
  • Link ist ist als Antwort auf mein Originalposting zu finden, viel Spaß beim lesen!
  • Oh ja, würde mich auch interessieren!
  • Ebenso: werde dir den Link schicken, wenn ich dazu komm sie hochzuladen!
  • Link ist ist als Antwort auf mein Originalposting zu finden, viel Spaß beim lesen!
  • Share it anyways! My german is rusty, but I'd love to read it anyways. 
  • I posted the link as a reply to my original message, have fun :)
  • Link to the theoretical part of my thesis. If I can free up some time, I will try to summarize the chapters in English within the next week, but for now it's written in German ;)
    https://skydrive.live.com/redir.aspx?cid=f118ba2b7c124fd3&resid=F118BA2B...
     
    I hope this works, I've never "published" something through SkyDrive before :)
  • Use Microsoft translator!
  • Hey,Daniel. What font does WPcentral use?
  • IV had it as my wallpaper awhile back now hulk takes the spot rippiing out my phone screen lol
  • I thought it originated by the directions and info posted in metro stations
  • I know all the stations here in Chicago have the info in metro format
  • The 'Metro Design Language' originates from Information Design used in signage for public transport. The rise of Helvetica (and Swiss design in general) was apart of the information design trend to provide clear information through glyphs in order to communicate effficiently without confusion whatever language you speak or culture you are apart of. http://www.helveticasubway.com Another example of 'Metro design' is when Margaret Calvert improved upon the Kinneir system of signage in the UK to make all signs uniform and simpler to understand by using shapes and colours. http://designmuseum.org/design/jock-kinneir-margaret-calvert
  • Nice info, thanks!
  • Mee too haha