Inspiration Web Design

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

4.5/5 (2)

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

Metro-Style Design

* * *

8 MDG

Metro-Style Design

* * *

Windows Phone

Metro-Style Design

* * *

Rock Werchter

Metro-Style Design

* * *

BBC

Metro-Style Design

* * *

Windows Azure

Metro-Style Design

* * *

SPL Cricket

Metro-Style Design

* * *

Droptiles

Metro-Style Design

* * *

Cheval Blanc Randheli

Metro-Style Design

* * *

Minimal Monkey

Metro-Style Design

* * *

Far from the Tree

Metro-Style Design

* * *

Space Shower

Metro-Style Design

* * *

Pierrick Calvez Studio

Metro-Style Design

* * *

REI 1440 Project

Metro-Style Design

* * *

Wink TTD

Metro-Style Design

* * *

Interactive Advent Calendar

Metro-Style Design

* * *

Ceska Filharmonie

Metro-Style Design

* * *

Metro Twit

Metro-Style Design

* * *

Everest

Metro-Style Design

* * *

My Own Corks

Metro-Style Design

* * *

George Badea

Metro-Style Design

* * *

YCN

Metro-Style Design

* * *

Pierre Saikali

Metro-Style Design

* * *

Regent College

Metro-Style Design

* * *

Spell Tower

Metro-Style Design

* * *

Unit Portables

Metro-Style Design

* * *

Apps Builder

Metro-Style Design

* * *

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.

Leave a Reply

Your email address will not be published. Required fields are marked *