Advertisement
Typography

Emulating Microsoft's Metro Design Language

by

Over the past few years, Microsoft has adopted its incumbent design language to a significant extent. Metro is the aesthetic basis of Windows 8; Microsoft's next operating system shipping this October. Let's take a look at what Metro is, how we can emulate some of its desirable principles and take a look at where it's being used already.


What is Metro?

Metro is the name given to the design language used in Microsoft's current and next-generation operating systems, including the upcoming Windows 8, the current Xbox 360 dashboard and in some of their websites. Aspects have already been evident in some of the company's earlier work, back in Windows XP and the Zune.

Microsoft's design team have revealed that the language is partly influenced by public transport signs which places a significant emphasis on typography and a visual hierarchy consisting of text with varying properties. In software desgn, Microsoft described Metro as a "refresh" from the interfaces of Windows (pre-8), Android and iOS which feature primarily icon-based interfaces.

Although the sharp transition seen in Windows 8 has been open to controversy, Metro's reception has been chiefly positive, and it's not difficult to see why.

To Microsoft's credit, the aesthetic of [the Metro UI] is a bit more daring and informal than the tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch. - CNET

Microsoft highlight four principles as being fundamental to the Metro UI; typography, motion, "content not chrome" and honesty. Let's take a look at how these translate to the web.


Typography

Typography is a very key principle in Metro. As a user interface, Metro swaps out traditional icon-based design for navigation which is comprised solely of text. When said text needs to conform to a defined grid, it's placed on quadrilaterals of solid color.

Metro is described as being modern and that is evident through the use of sans-serif type, specifically, in the case of Windows, the Segoe family of fonts. In Metro-influenced design, text is largely differentiated by nothing more than size, keeping typeface, weight and other properties the same or similar, differentiating in other properties only when acting as a link or on an alternative background color.

With the reduction of graphics in favour of text, Metro influences the use of text at all levels. A hierarchy is therefore born and on a minimalist site design, type size can act as the only distinction between sections (say, a blog post title and accompanying text). Marrying few disparities between text styles with a good, consistent use of whitespace is a core part of the typographical principles in Metro.

Microsoft themselves have an article on Metro's typography guidelines. While it's obvious you don't have to comply with them (it's mainly a guideline for native software developers) the guide does demonstrate one way to use Metro's typographical ethos at various levels.


Content, Not Chrome

In conjunction with the typographic features of Metro, "content, not chrome" plays a huge part in the visual distinction of Metro to other ways of designing.

The visible graphical interface features of an application are sometimes referred to as "chrome" - Wikipedia

Metro's minimalist approach is ultimately met by avoiding interfaces with chrome. Instead, you'll encounter content-centric designs which consist chiefly of text observing the aforementioned typographical qualities. By removing the chrome, designs push content as the main focus, particularly advantageous in blogs and other text-based sites.

By avoiding chrome in the design, a site can benefit from more seamless scaling and work effectively at smaller screen sizes, as part of a responsive design. You can observe an example of this by looking at Metro apps in Windows 8, juxtaposed with comparable ones on Windows Phone 7. The "content, not chrome" philosophy plays into a responsive design that's obviously important when designing to be consumed at multiple sizes.

In Google Chrome, we strove to eliminate [Chrome] - not just because it leads to a simpler, cleaner design, but because we felt that your web applications should not appear to be constrained within the bulky cruft of a browser - they should feel like first-class applications on your desktop. - Google.

Microsoft's main belief in "content, not chrome" is to delight with content, not decoration, achieved by reducing anything on the page that is not content. By doing so, you can achieve a pleasingly simple user experience, a philosophy that has been evidenced many designs on the web already, even if they don't look quite like Microsoft's Metro. Even browsers are implementing software to give users a viewing option that adheres to the principle.


Motion and Scrolling

The Motion aspect of Metro as a design language is something focused for applications, and its influence on your design is dependent on how much interaction a user has and the level of transition that interaction invokes.

Microsoft believes, through Metro, that the aesthetic of a design is matched in importance by the fluidity and performance of the design, and that the motion principles provide depth and responsiveness to a site.

Windows 8 and Windows Phone 7 also have a fondness for horizontal scrolling, with content laid out in a direction that's virtually non-existent in a more traditional design paradigm. It hasn't really been translated to the desktop web, even in Microsoft's own sites, but is quite popular in mobile design. Therefore, responsive or touch-centric designs can utilize this pretty effectively. (Although, while this is used in Metro-based UIs, it's not an official principle and is already evident across operating systems.)


Authentically Digital

Metro is "authentically digital", a contrast to some of the more skeuomorphic design principles of companies like Apple. For example, Apple designed its Contacts, Calendar, Notes and Reminders apps to resemble their more physical counterparts, something which has proved pretty controversial.

Microsoft believes in something very different. The Metro language is designed so its principles don't try to resemble something that it's not, and instead embrace its digital nature through design. So, instead of making a list of contacts look like the address book you might buy in a store, it should look like a list of contacts on a phone or computer to comply with the principles in Metro.

The logo for Windows 8 was met with controversy of its own, but it plays into Microsoft's principles of being authentically digital. Sure, it still looks like a window, but not like the window that's part of a building - instead, simply the window in the name - so there's no faux glass or wood in it. Even your design of a button should take no influence from the design of a button you encounter in real life.

Choosing not to emulate a traditional to-do list has allowed the designers [of Clear, for iPhone] to think differently and make full use of the technology available to them. The app has been built around multi-touch gestures and along with smooth animation, it makes for a very unique and elegant experience. - Shaun Cronin

This concept plays its part into the "content, not chrome" idea by removing superfluous detail that does nothing to support content.


A Philosophy, Not A Design

Importantly, Metro is not one design. While there are definitely sites out there built to directly resemble Windows 8 or Windows Phone 7, that's just one interpretation of the language. Your design doesn't need to look identical to a Metro Windows app to conform to the language.

Designs can take inspiration from Metro at varying levels, but obviously don't necessarily have to look like they were manufactured by Microsoft. You can implement the typographical principles of Metro without needing to use Segoe as your typeface family of choice, much like you can implement "content, not chrome".

Actually, with typography playing such an integral part of Metro, your design can end up looking nothing like Microsoft's whilst still taking advantage of its practices.


Roundup: Inspired by Metro

Metro was engineered primarily for software design, but its features have begun to influence the web too, starting with Microsoft's own properties.

Microsoft.com Preview

The preview of Microsoft.com is a very nice refresh of the company's homepage to really align itself with Metro and give it a responsive update.

My Kind of Phone

My Kind of Phone is the UK blog of Windows Phone, so it's pretty natural that it should follow the design language of the platform it covers. You can also see Metro's "Motion" principles in play here, with some content transitioning in as you hover over items.

Zune

Microsoft's Zune site is very heavily influenced by Metro, especially notable since the Zune was the first device to really embrace a full-blown Metro interface. You can see in the design a perfect embodiment of Metro on the web.

BBC

The BBC's current homepage adheres heavily to Metro principles with a bold use of typography and grids.

Google / Gmail

Even Google's websites have a spark of Metro, with the most recent redesign of the app suite featuring a generous use of whitespace and use of typography. Much like in Microsoft's guidelines for typography, Google uses a single accent color in the midst of its simple typography.

Related Posts
  • Code
    Articles
    Mobile Operating Systems in 2014Dj45i preview image@2x
    As a mobile developer, it's good to be familiar with the most important platforms in the mobile space. In this article, we'll take a look at the most important mobile operating systems, their current state, and how they're performing in the current mobile landscape.Read More…
  • Web Design
    Roundups
    5 Awesome Ghost Themes You Can Learn FromGhost logo
    With the world near-saturated with the success of WordPress, along came Ghost, 2013's new blogging platform of note. Born from a simple concept, the project was successfully backed with nearly £200,000 of Kickstarter pledges and released to the world as an alternative open source platform. Much like WordPress, Tumblr or any major blogging platform, Ghost is supported by an ever-growing community of themes to customize the appearance of your blog. In this roundup, we're going to take a look at a handful of some of our favorite Ghost themes and analyse why they work so well.Read More…
  • Web Design
    Design Theory
    Responsive Web DesignDsfd rwd retina
    Unless you’re totally new to the industry, or you’ve been living under a rock in the faraway lands of another planet, you’ll have heard about responsive design. Even if you don’t understand it fully, it’s bound to be something you’ll have come across or interacted with in some way or another.Read More…
  • Web Design
    CMS
    Understanding Ghost: Stages of DesignUnderstanding ghost retina
    The process of building themes for Ghost is incredibly smooth, simple and very easy to learn. But before you start building an actual Ghost theme it's important and helpful to understand the role themes play in the overall Ghost ecology so that you can design in the optimal way.Read More…
  • Web Design
    Design Theory
    All About Trends in Web DesignDsfd trends retina
    As long as the web has been around there have been certain design trends which have popped up from time to time. Some of these trends have stuck around and, over time, some have disappeared. Think back to the time of Geocities, to the time of ‘Web 2.0’ designs and closer to home, with the “flat design” trend that’s popular now. Now, in 2013, the web industry is changing as rapidly as ever. New techniques, or ways of working, pop up every month, if not every week.Read More…
  • Web Design
    Industry
    Flat Design, iOS 7, Skeuomorphism and All ThatFlat retina
    The notion of flat, "digitally authentic" design has been a popular topic of conversation and controversy recently, especially with the software design efforts of Apple, Microsoft, Google and their respective flagship operating systems. Subtle colours, light typography and the other commonalities of modern flat design have all found a working role in the construction of the neoteric design trends we're all coming to love (or hate). We're going to take a look at these trends in this article to see what all the fuss is about.Read More…