Hearing Metro in the perspective of language for the first time? Well, take a look at the UI of latest Microsoft product. Yeah that’s Metro and I just love it! Here’s what a design language is;
A design language is an overarching scheme or style that guides the design of a complement of products or architectural settings. Designers wishing to give their suite of products a unique but consistent look and feel define a design language for it, which can describe choices for design aspects such as materials, color schemes, shapes, patterns, textures, or layouts. They then follow the scheme in the design of each object in the suite.
In automobiles, the design language is often in the grille design. For instance, many BMW vehicles share a design language, including front-end styling consisting of a split kidney and four circular headlights. Some manufacturers have appropriated design language cues from rival firms.
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 began as early as Microsoft Encarta 95 and MSN 2.0,and later evolved into Windows Media Center and Zune. Later the principles of Metro were included in Windows Phone, Microsoft’s website, the Xbox 360 dashboard update, and Windows 8. A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics.
“Metro” 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. 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.
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 system, which serves the Seattle area where Microsoft is headquartered. Metro places emphasis on good 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 icon-based interfaces of Windows, Android, and iOS. Not only Microsoft the whole tech world says the same.
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, Microsoft created the “Segoe WP” font family. The fonts differ only in minor details.
Response to Metro has been generally positive. Engadget 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:
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 favor larger hubs over smaller buttons and often feature laterally scrolling 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.”
THE TECH BLOG 