Emulating Microsoft’s Metro Design Language

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.