Metro Design LanguageBy Prashant TiwariMetro is an internal code name of a typography-based                               ...
F IGURE 1: W INDOWS 8 S TART S CREENThe design language was designed specifically to consolidate groups of common tasks to...
as it is attractive." CNET complimented the design language, saying, "It’s a bit more daring andinformal than the tight, s...
Upcoming SlideShare
Loading in …5
×

Metro design language

540 views

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
540
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Metro design language

  1. 1. Metro Design LanguageBy Prashant TiwariMetro is an internal code name of a typography-based Clean, Light, Open, Fastdesign language created by Microsoft, originally foruse in Windows Phone. A key design principle of Metro Typographyis better focus on the content of applications, relying Alive In Motionmore on typography and less on graphics ("contentbefore chrome"). Early uses of the Metro principles Content, Not Chromebegan as early as Microsoft Encarta 95 and MSN 2.0,and later evolved into Windows Media Center and Zune. Later the principles of Metro wereincluded in Windows Phone, Microsofts website, the Xbox 360 dashboard update, andWindows 8Microsofts design team says that the design language is partly inspired by signs commonlyfound at public transport systems; for instance, those found on the King County Metro transit system, which serves the greaterDESIGNED TO BE "SLEEK, QUICK, MODERN" Seattle area where Microsoft isAND A "REFRESH" FROM THE ICON-BASED headquartered. The design language places emphasis on goodINTERFACES. typography and has large text that catches the eye. Microsoft says thatthe design language is designed to be "sleek, quick, modern" and a "refresh" from the icon-based interfaces of Windows, Android, and iOS. All instances use fonts based on the Segoefont family designed by Steve Matteson at Agfa Monotype and licensed to Microsoft. For theZune, Microsoft created a custom version called Zegoe UI, and for Windows Phone, Microsoftcreated the "Segoe WP" font family. The fonts mostly differ only in minor details. More obviousdifferences between Segoe UI and Segoe WP are apparent in their respective numericalcharacters. The Segoe UI in Windows 8 had an obvious differences as being similar to SegoeWP. Notable characters had a typographic changes of the characters 1, 2, 4, 5, 7, 8, I, and Q.The new Windows 8 Start Screen, making use of flat, colored live tiles and a laterally scrollingcanvas as used in Windows Phone and Xbox 360 Dashboard.
  2. 2. F IGURE 1: W INDOWS 8 S TART S CREENThe design language was designed specifically to consolidate groups of common tasks tospeed up usage. This is accomplished by excluding superfluous graphics and instead relyingon the actual content to also function as the main UI. The resulting interfaces favor larger hubsover 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. “ Internally, Microsoft has compiled a list of principles as core to the design language. Close to the official launch date of Windows 8 (October 26, 2012), more developers and Microsoft partners started working on creating new Metro applications, and many websites with resources related to this topic have been created, as well as the Microsofts UX guidelines for Windows Store Apps. Early response to Metro wasF IGURE 2: W INDOWS P HONE 8 S TART S CREEN generally positive. In a review of the Zune HD, Engadget said, "Microsoft continues its push towards big, bigtypography here, providing a sophisticated, neatly designed layout thats almost as functional
  3. 3. as it is attractive." CNET complimented the design language, saying, "It’s a bit more daring andinformal 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 theUI, the "Peoples 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 andexplains the user experience of Metro:While the Metro-style interface introduced in Windows 8 was designed to be user-friendly on tablets, it is less accommodating forTHE INNOVATION HERE IS THE FLUIDITY OF a desktop, and less customizableEXPERIENCE AND FOCUS ON THE DATA, than its predecessors. Users haveWITHOUT USING TRADITIONAL USER particularly disapproved of the removal of the Windows Start menuINTERFACE CONVENTIONS OF WINDOWS that users are acclimated to as it hasAND FRAMES. DATA BECOMES THE VISUAL been featured in all versions ofELEMENTS AND CONTROLS. SIMPLE Windows since Windows 95. InGESTURES AND TRANSITIONS GUIDE THE previous versions of Windows, theUSER DEEPER INTO CONTENT. A TRULY Start menu provided a moreELEGANT AND UNIQUE EXPERIENCE. convenient way for novice and experienced users alike to launch programs and applications. Somereviews argue that Microsofts decision to ditch Aero is the result of a conscious effort to reduceusage of system GPU resources and to prolong battery life, in order to target tablet marketrather than its traditional desktop user base. In addition to removing the Start Menu, Windows8 takes a more modal approach with its use of full-screen apps that steer away from relianceon the icon-based desktop interface. In doing so; however, Microsoft has shifted its focus awayfrom multitasking and business productivity.

×