Metro (design language)

Microsoft Design Language (or MDL), previously known as Metro, is a design language created by Microsoft, and is based on flat design style. This design language is focused 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.[1][2] The design language evolved in Windows Media Center and Zune and was formally introduced as Metro during the unveiling of Windows Phone 7 in 2010, after which it was incorporated into several of the company's other products, including the Xbox 360 system software and the Xbox One system software, Windows 8, Windows Phone, and Outlook.com.[3][4] 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.[5]

Microsoft Design Language 2 (MDL2) was developed alongside Windows 10, making a number of adjustments.[6][7] In 2017, Microsoft introduced the Fluent Design System, which gradually replaced Metro in the years following.[8]

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,[9] which favored text as the primary form of navigation, as well as early concepts of Neptune.[10] 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 and with more focus on clean typography and less on UI chrome.[11] 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 Phones 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

Principles

Microsoft's design team cites as an inspiration for the design language signs commonly found at public transport systems.[14] The design language places emphasis on 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.[15] 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,[16] and for Windows Phone Microsoft created the Segoe WP font family. The fonts mostly differ only in minor details. More obvious differences between Segoe UI and Segoe WP are apparent in their respective numerical characters. The Segoe UI font in Windows 8 had obvious differences – similar to Segoe WP. Characters with notable typographic changes included 1, 2, 4, 5, 7, 8, I, and Q.

Reception

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".[29] Technology news outlets Ars Technica,[30] TechRadar,[31] CNET,[32] Engadget[33] and Network World[34] and mainstream press Bits Blog from

See also

• Android Holo
• Flat design
• Skeuomorph design
• Human interface guidelines
• Windows Aero
• Universal Windows Platform apps

External links

• Microsoft by the Numbers website
• Modern Design at Microsoft (Archive)
• UX guidelines for Windows Store apps on MSDN
• Design Guidelines for Windows Phone on MSDN