microsoft
Cleanup
Cleanup
To meet the Microsoft Wiki's quality standards, this article or section may require cleanup. Please help by improving the article.
The Metro style in use as the Start screen of .

The Metro style in use as the Start screen of Windows 8.

Microsoft Design Language (MDL), previously known as Metro and modern UI, is a design language created by Microsoft, with a focus on typography and simplified icons, absence of clutter, increased content to chrome ratio ("content before chrome"), and basic geometric shapes. Early examples of MDL principles can be found in Encarta 95 and MSN 2.0. The design language evolved in Windows Media Center and Zune and was formally introduced as Metro during the unveiling of Windows Phone 7. It has since been incorporated into several of the company's other products, including the Xbox 360 system software, Xbox One, Windows 8, Windows Phone, and Outlook.com. Before the "Microsoft design language" title became official, Microsoft executive Qi Lu referred to it as the modern UI design language in his MIXX conference keynote speech. According to Microsoft, "Metro" has always been a codename and was never meant to be a final product, but news websites attribute this change to trademark issues.

Microsoft Design Language 2 (MDL2) was developed alongside Windows 10. The Fluent Design language extended it in 2017.

History

The design language is based on the design principles of classic Swiss graphic design. 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, as well as early concepts of Neptune. This interface carried over into later iterations of Media Center. In 2006, Zune refreshed its interface using these principles. Microsoft designers decided to redesign the interface with more focus on clean typography and less on UI chrome. These principles and the new Zune UI were carried over to Windows Phone, first released in 2010 (from which much was drawn for Windows 8). 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 design language during the early Windows Phone studies.

In an interview, it was explained that different Microsoft divisions use each other's products, and the extension of Metro was not a company-wide approach, but instead teams such as Xbox liked Metro and adapted it for its own products. Many of Microsoft's divisions ended up adopting Metro.

Microsoft Design Language 2 (MDL2) was developed alongside Windows 10. This version introduced a new set of widgets, including date pickers, toggles and switches, and reduced the border thicknesses for all user interface elements.

Principles

Microsoft's design team cites signs commonly found at public transport systems as an inspiration for the design language. It emphasizes good typography and has large text that catches the eye. Microsoft saw the design language as "sleek, quick, modern" and a "refresh" from the icon-based interfaces of Windows, Android, and iOS. All instances use fonts based on the Segoe font family designed by Steve Matteson at Agfa Monotype and licensed to Microsoft. A custom version of the font called Zegoe UI was created for Zune devices, and the Segoe WP font was similarly created for Windows Phone. Both Segoe WP and Zegoe UI differ only in minor details, whereas more obvious differences are apparent between Segoe UI and Segoe WP, specifically in their respective numerical characters.

Joe Belfiore was one of the architects of Metro. At Nokia World 2011, Belfiore explained that the UI aims to be "artistic" in textual elements and iconography. He also mentioned the "motion" of the UI, specifically in Windows Phone, of the Live Tiles, moving dots, and kinetic scrolling.

Animation plays a large part. Microsoft recommends consistent acknowledgement of transitions and user interactions (such as presses or swipes) by some form of natural animation or motion. This aims to give the user the impression of an "alive" and responsive UI with "an added sense of depth".

Reception

On mobile

On Windows 8 desktop

Name change

In August 2012, The Verge announced that an internal memorandum had been sent out to developers and Microsoft employees announcing the decision to "discontinue the use" of the term "Metro" because of "discussions with an important European partner", and that they were "working on a replacement term". Technology news outlets Ars Technica, TechRadar, CNET, Engadget and Network World and mainstream press Bits Blog from The New York Times and BBC News Online published that the partner mentioned in the memo could be one of Microsoft's retail partners, German company Metro AG, as the name had the potential to infringe on their "Metro" trademark. Microsoft later stated that the reason for de-emphasizing the name was not related to any current litigation, and that "Metro" was only an internal project codename, despite having heavily promoted the brand to the public. In some contexts, the company began using the term "Modern" or the more generic "Windows 8" modifier to refer to the new design, possibly as a placeholder.

In September 2012, "Microsoft design language" was adopted as the official name for the design style. The term was used on MSDN documentation and at the 2012 Microsoft Build conference to refer to the design language.

In a related change, Microsoft dropped the use of the phrase "Metro-style apps" to refer to mobile apps distributed via the Microsoft Store.

Gallery

See also