Metro Design Language
Encyclopedia
Metro is an internal code name for a typography
-based design language
created by Microsoft
, originally for use in Windows Phone 7. Early uses of the Metro principles, such as the typography, began as early as Microsoft Encarta 95, and later evolved into products such as Windows Media Center
and Zune
. Later the principles of Metro were included in Microsoft's mobile operating system, Windows Phone
, the Xbox 360
dashboard update, and Windows 8
. A specially-made version of Microsoft's Segoe font family, Segoe WP, is used as the main font family for all typographical elements. It was confirmed by Microsoft at Computex that Windows 8
, the successor to Windows
7, takes inspiration from Metro. Microsoft also plans to add the Metro design principles to other products and services, like the Xbox 360
and Windows Live
, in order to create a unified and distinctive look across its consumer products and services.
. Early glimpses of this style could be seen in Windows Media Center
for Windows XP Media Center Edition
, which favored text as the primary form of navigation. This interface carried over into later iterations of Media Center. In 2006, Zune
refreshed its interface using these Metro principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome. The Zune Desktop Client was also redesigned with an emphasis on typography and clean design that was different from the Zune's previous Portable Media Center
based UI. Flat colored "live tiles" were introduced into the Metro design language during the early Windows Phone's studies. Microsoft has begun integrating these elements of the Metro design language into its other products, with direct influence being seen in newer versions of Windows Live Messenger
and Live Mesh.
-based interfaces of Android and iOS
All instances use fonts based on the Segoe font family designed by Steve Matteson at Agfa Monotype and licensed to Microsoft. For the Zune, Microsoft created a custom version called Zegoe UI, and for Windows Phone
, they created the "Segoe WP" font family; apart from minor differences, the fonts are largely the same.
said, "Microsoft continues its push towards big, big typography here, providing a sophisticated, neatly designed layout that's almost as functional as it is attractive." CNET
complimented the Metro design, saying, "it's a bit more daring and informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch."
The Industrial Designers Society of America (IDEA) awarded Windows Phone, which uses Metro, the "People's Choice Design" gold award as well as the "Best in Show" award. Isabel Ancona, the User Experience Consultant at IDEA, explained why Windows Phone won this award and explains the user experience of Metro:
Animation plays a large part, with transitions, and user interactions such as presses or swipes recommended to always be acknowledged by some form of natural animation or motion. This is intended to give the user the impression that the UI is "alive" and responsive, with "an added sense of depth."
Internally, Microsoft has compiled a list of principles as core to the Metro Design Language.
Typography
Typography is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading , adjusting the spaces between groups of letters and adjusting the space between pairs of letters...
-based design language
Design language
A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings...
created by Microsoft
Microsoft
Microsoft Corporation is an American public multinational corporation headquartered in Redmond, Washington, USA that develops, manufactures, licenses, and supports a wide range of products and services predominantly related to computing through its various product divisions...
, originally for use in Windows Phone 7. Early uses of the Metro principles, such as the typography, began as early as Microsoft Encarta 95, and later evolved into products such as Windows Media Center
Windows Media Center
Windows Media Center is a digital video recorder and media player developed by Microsoft. It is an application that allows users to view and record live television, as well as organize and play music and videos...
and Zune
Zune
Zune is a digital media brand owned by Microsoft which includes a line of portable media players, a digital media player software for Windows machines, a music subscription service known as a 'Zune Music Pass', music and video streaming for the Xbox 360 via the Zune Software, music, TV and movie...
. Later the principles of Metro were included in Microsoft's mobile operating system, Windows Phone
Windows Phone
Windows Phone is a mobile operating system developed by Microsoft, and is the successor to its Windows Mobile platform, although incompatible with it. Unlike its predecessor, it is primarily aimed at the consumer market rather than the enterprise market...
, the Xbox 360
Xbox 360
The Xbox 360 is the second video game console produced by Microsoft and the successor to the Xbox. The Xbox 360 competes with Sony's PlayStation 3 and Nintendo's Wii as part of the seventh generation of video game consoles...
dashboard update, and Windows 8
Windows 8
Windows 8 is the codename for the next version of the Microsoft Windows computer operating system following Windows 7. It has many changes from previous versions. In particular it adds support for ARM microprocessors in addition to the previously supported x86 microprocessors from Intel and AMD...
. A specially-made version of Microsoft's Segoe font family, Segoe WP, is used as the main font family for all typographical elements. It was confirmed by Microsoft at Computex that Windows 8
Windows 8
Windows 8 is the codename for the next version of the Microsoft Windows computer operating system following Windows 7. It has many changes from previous versions. In particular it adds support for ARM microprocessors in addition to the previously supported x86 microprocessors from Intel and AMD...
, the successor to Windows
Microsoft Windows
Microsoft Windows is a series of operating systems produced by Microsoft.Microsoft introduced an operating environment named Windows on November 20, 1985 as an add-on to MS-DOS in response to the growing interest in graphical user interfaces . Microsoft Windows came to dominate the world's personal...
7, takes inspiration from Metro. Microsoft also plans to add the Metro design principles to other products and services, like the Xbox 360
Xbox 360
The Xbox 360 is the second video game console produced by Microsoft and the successor to the Xbox. The Xbox 360 competes with Sony's PlayStation 3 and Nintendo's Wii as part of the seventh generation of video game consoles...
and Windows Live
Windows Live
Windows Live is the collective brand name for a set of services and software products from Microsoft, part of their software plus services platform. A majority of these services are Web applications, accessible from a browser, but there are also client-side binary applications that require...
, in order to create a unified and distinctive look across its consumer products and services.
History
"Metro" is based on the design principles of classic Swiss graphic designInternational Typographic Style
The International Typographic Style, also known as the Swiss Style, is a graphic design style developed in Switzerland in the 1950s that emphasizes cleanliness, readability and objectivity. Hallmarks of the style are asymmetric layouts, use of a grid, sans-serif typefaces like Akzidenz Grotesk, and...
. Early glimpses of this style could be seen in Windows Media Center
Windows Media Center
Windows Media Center is a digital video recorder and media player developed by Microsoft. It is an application that allows users to view and record live television, as well as organize and play music and videos...
for Windows XP Media Center Edition
Windows XP Media Center Edition
Windows XP Media Center Edition is a version of the Windows XP operating system designed to serve as a home-entertainment hub. The last version, Windows XP Media Center Edition 2005, was released in October 2004.-Versions:...
, which favored text as the primary form of navigation. This interface carried over into later iterations of Media Center. In 2006, Zune
Zune
Zune is a digital media brand owned by Microsoft which includes a line of portable media players, a digital media player software for Windows machines, a music subscription service known as a 'Zune Music Pass', music and video streaming for the Xbox 360 via the Zune Software, music, TV and movie...
refreshed its interface using these Metro principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome. The Zune Desktop Client was also redesigned with an emphasis on typography and clean design that was different from the Zune's previous Portable Media Center
Portable Media Center
Portable Media Center is a defunct hard drive-based portable media player platform developed by Microsoft. Announced at the 2003 Consumer Electronics Show , and released in early 2004, it was originally positioned as a competitor to Apple's iPod.The platform was conceived in line with Microsoft's...
based UI. Flat colored "live tiles" were introduced into the Metro design language during the early Windows Phone's studies. Microsoft has begun integrating these elements of the Metro design language into its other products, with direct influence being seen in newer versions of Windows Live Messenger
Windows Live Messenger
Windows Live Messenger is an instant messaging client created by Microsoft that is currently designed to work with Windows XP , Windows Vista, Windows 7, Windows Mobile, Windows CE, Xbox 360, Blackberry OS, iOS, Java ME, S60 on Symbian OS 9.x and Zune HD...
and Live Mesh.
Development
Microsoft's design team says that the Metro UI is partly inspired by signs commonly found at public transport systems, for instance on the King County Metro Transit, a public transit system that serves the Seattle metropolitan area where Microsoft is headquartered. Metro places a large focus on typography and has large text that catches the eye. Microsoft says that Metro is designed to be "sleek, quick, modern" and a "refresh" from the iconComputer icon
A computer icon is a pictogram displayed on a computer screen and used to navigate a computer system or mobile device. The icon itself is a small picture or symbol serving as a quick, intuitive representation of a software tool, function or a data file accessible on the system. It functions as an...
-based interfaces of Android and iOS
All instances use fonts based on the Segoe font family designed by Steve Matteson at Agfa Monotype and licensed to Microsoft. For the Zune, Microsoft created a custom version called Zegoe UI, and for Windows Phone
Windows Phone
Windows Phone is a mobile operating system developed by Microsoft, and is the successor to its Windows Mobile platform, although incompatible with it. Unlike its predecessor, it is primarily aimed at the consumer market rather than the enterprise market...
, they created the "Segoe WP" font family; apart from minor differences, the fonts are largely the same.
Response
Response to Metro has been generally positive. EngadgetEngadget
Engadget is a multilingual technology blog network with daily coverage of gadgets and consumer electronics. Though on appearance Engadget functions much like a blog and may be defined as such, much of its editorial content takes the form of an online magazine...
said, "Microsoft continues its push towards big, big typography here, providing a sophisticated, neatly designed layout that's almost as functional as it is attractive." CNET
CNET
CNET is a tech media website that publishes news articles, blogs, and podcasts on technology and consumer electronics. Originally founded in 1994 by Halsey Minor and Shelby Bonnie, it was the flagship brand of CNET Networks and became a brand of CBS Interactive through CNET Networks' acquisition...
complimented the Metro design, saying, "it's a bit more daring and informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch."
The Industrial Designers Society of America (IDEA) awarded Windows Phone, which uses Metro, the "People's Choice Design" gold award as well as the "Best in Show" award. Isabel Ancona, the User Experience Consultant at IDEA, explained why Windows Phone won this award and explains the user experience of Metro:
Principles
The Metro design language was designed specifically to consolidate groups of common tasks to speed up usage. This is accomplished by excluding superfluous graphics and instead relying on the actual content to also function as the main UI. The resulting interfaces favour larger hubs over smaller buttons and often feature laterally scrolling full bleed canvases. Page titles are usually large and consequently also take advantage of lateral scrolling.Animation plays a large part, with transitions, and user interactions such as presses or swipes recommended to always be acknowledged by some form of natural animation or motion. This is intended to give the user the impression that the UI is "alive" and responsive, with "an added sense of depth."
Internally, Microsoft has compiled a list of principles as core to the Metro Design Language.
External links
- Metro Design Language of Windows Phone 7, Microsoft