24

The origin of the Metro UI design language

Metro

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

0
loading...
8
loading...
52
loading...
0
loading...

Comments

There are 24 comments. Sign in to comment

Adiliyo says:

i have stolen that image for my phone wallpaper.
 
thank you :)

IceDree says:

That makes two if us

cae758 says:

*Generic admittance of pilfery*

ChilliPalmer says:

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 :)

Adorath says:

Darf ich davon was lesen? Interessiert mich ;) zumind. Eine Zusammenfassung ;)

ChilliPalmer says:

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.

ChilliPalmer says:

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 ;)

ChilliPalmer says:

Link ist ist als Antwort auf mein Originalposting zu finden, viel Spaß beim lesen!

Fantasian says:

Oh ja, würde mich auch interessieren!

ChilliPalmer says:

Ebenso: werde dir den Link schicken, wenn ich dazu komm sie hochzuladen!

ChilliPalmer says:

Link ist ist als Antwort auf mein Originalposting zu finden, viel Spaß beim lesen!

Sam Sabri says:

Share it anyways! My german is rusty, but I'd love to read it anyways. 

ChilliPalmer says:

I posted the link as a reply to my original message, have fun :)

ChilliPalmer says:

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 :)

Sarang68 says:

Use Microsoft translator!

Sarang68 says:

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

theman60099 says:

I thought it originated by the directions and info posted in metro stations

theman60099 says:

I know all the stations here in Chicago have the info in metro format

ahdr says:

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

procen says:

Nice info, thanks!