Metro Style. Website-Mimics: a Fresh Whiff in Design

What design styles do you prefer? Do you adhere to classical time-tested scenarios or maybe you start testing the hottest trends as soon as they appear? This entry will interest progressive design nerds at first turn because we are going to showcase some inspiring metro-style website designs at the end of this brief preamble.

First of all, let’s clear up what is covered under the term “metro-style design”. Actually it’s a typography-based design language developed by Microsoft on the principles of Swiss graphic design. Swiss style was created in Switzerland in 1950s. It is denoted by the hallmarks of cleanliness, readability and objectivity. Asymmetric layouts, grids, sans-serif typefaces, flush left, ragged right text and photos instead of illustrations are characteristic for Swiss style standards.

As you might have already noticed, fresh and sleek metro-style is focused on the content, emphasized with prominent typography and less graphics. Flat colored "live tiles" and laterally scrolling canvas can also be faultlessly reckoned among the recognizable metro-style features. Windows Phone, Microsoft's website, Xbox 360 dashboard and Windows 8 are just few bright examples of the implemented metro-style principles.

By the way, did you know that some brilliant ideas for metro-style design have spawned in Microsoft's developer minds owing to common language signs, which we come across every day at public transport systems and King County Metro transit system (Seattle area, not far from Microsoft’ headquarters) in particular? By parity of reasoning, awesome typography and large text inevitably catch our eyes, just like the above mentioned signs. In fact, avoiding the excessive graphics, collating regular tasks into groups and letting the content work as main UI were to make user experience simple, intuitive and prompt.

Speaking about metro-style design it’s impossible to miss the animation as according to Microsoft’s suggestions, the website should seem “alive” and respond all user actions.

If you are interested in deeper investigation of Microsoft design language principles, click here to see their compilation. You may also have a look at the recently posted interview with Arturo Toledo, an experience architect and UI designer, who worked for Microsoft in Redmond for 7 years and personally took part in metro-style development.

Now it’s a good time to browse the collection of website designs inspired by metro-style.

* * *

Microsoft

* * *

8 MDG

* * *

Windows Phone

* * *

Rock Werchter

* * *

BBC

* * *

Windows Azure

* * *

SPL Cricket

* * *

Droptiles

* * *

Cheval Blanc Randheli

* * *

Minimal Monkey

* * *

Far from the Tree

* * *

Space Shower

* * *

Pierrick Calvez Studio

* * *

REI 1440 Project

* * *

Wink TTD

* * *

Interactive Advent Calendar

* * *

Ceska Filharmonie

* * *

Metro Twit

* * *

Everest

* * *

My Own Corks

* * *

George Badea

* * *

YCN

* * *

Pierre Saikali

* * *

Regent College

* * *

Spell Tower

* * *

Unit Portables

* * *

Apps Builder

* * *

Wrapping Up

In general, public response to metro-style emergence was mainly positive. The trend was called daring, innovative, functional and attractive. Surely, the opposite opinions exist as well. We would be happy to know what do you personally think about the style itself and websites picked out for today’s post. Leave your feedback in the comment section below.