Windows Phone Apps

A&E, Lifetime and History come to Windows Phone

General News

Android tries to find visual identity through 'Material Design', borrowing from Microsoft

Windows Apps

A&E, Lifetime and History bring Pawn Stars, Duck Dynasty and more to Windows 8.1

Developers

WPCentral extends its partnership with Nokia DVLUP to give away more free design consultations for your app!

Windows Phone Apps

WhatsApp getting new history settings to help you easily clear past conversations

Windows

A trip down memory lane: 30 years since Windows was announced

Microsoft News

Step inside the Microsoft Archives and see the past of your favorite company

Developers

Former UX Designer for Windows Phone teams up with Nokia DVLUP Design Consultations

Microsoft News

Outlook.com to remove chat messaging history - backup your pastime conversations today

Windows Phone News

Windows Phone Design team on 2015 OS redesign rumor: LOL

Editorials

Microsoft Memories - a look back, at the past of Redmond technology

Microsoft News

Windows 8.1 screenshots leaked, redesigns showcased

Editorials

Meet the latest Windows Phone incarnation, iOS 7

How To

Metrofy all the web with these browser extensions

Windows Phone News

Spice up your networking with some Metro business cards

Developers

Former Experience Designer for Windows Phone, Arturo Toledo, tells you why the new Facebook app is still very Modern

Developers

Get up to design speed with this handbook for Windows 8

Windows Phone Apps

Metro newspaper app for Windows Phone fixed

Windows Phone Apps

Metro newspaper app for Windows Phone broken, update on the way

Windows Phone News

Meet Your Match Challenge website now live - will you switch?

< >
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...
0
loading...
0
loading...
0
loading...

Reader comments

The origin of the Metro UI design language

24 Comments

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

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

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