Web Design Showcase: 10 Metro Style WordPress Themes

What is Metro style?

Metro is a user interface created by Microsoft (much like Windows Phone, Zune and Xbox), which is meant to allow the user to interact directly with the content and have the same experience on all media formats. It achieves this by relying more on typography rather than graphic elements: “content before chrome” and has been adapted as a design style due to its clean and dynamic build.

Origins and principles

It’s inspired from Swiss graphic design (the Bauhaus Design School is known for highlighting minimalism and the desire to make form and function beautiful) and it relies heavily on 5 principles:

The Best Deals For Digital Design Assets - InkyDeals.com. Learn More>>

  • clean, light, fast, open aesthetics
  • dynamic, moving transitions and interactions
  • embrace the beauty of typography
  • content-focused interface
  • authentically digital design


Due to a trademark infringement on one of Microsoft retail partners, Metro AG, the term “Modern UI” replaced “Metro” for developers since August 2012. Currently, the Microsoft Developer Network documentation refers to it as “Microsoft design language” (since September 2012). During Microsoft’s Build 2012 developer conference “Microsoft design language” was also used by the company.

Now that you’re updated on all the details regarding Metro, let’s take a look at 10 inspiring WordPress themes created in this style, gathered by Brainik’s web designer Laurentiu David:

One touch





Metro Style


Rocket Board

Metro Mobile


Have you used Metro style in creating a website, or have you seen one that should be in this showcase? Help us by letting us know is the comments section below.

(Visited 1,963 time, 1 visit today)

13 Comments Web Design Showcase: 10 Metro Style WordPress Themes

  1. Surprised person Apr 28, 2013 at 07:54

    MVC is also created by M$.
    Even “entities” is created by M$.
    OS is also created by Microsoft.
    Let me.. Oh M$ has a search engine? Then google definitely IS created by Micro$oft.

    LoL, no it’s a lot if I ask search before posting something like this, just think before posting, I beg.. :(

    P.S many of these designs are mason, not metro.

    1. ultraorange Apr 28, 2013 at 18:00

      wow, I have no clue what any of that means, but I do know that the designs posted are metro influenced

    2. Andra Apr 29, 2013 at 14:26

      Sorry, Surprised person, I’m not sure I understand what you think is not accurate in the article. Could you please be clearer?

  2. Website Design Preston May 2, 2013 at 09:05

    Fantastic Blog! I really impressed from you. I just hear about METRO STYLE but never get such wonderful information about it. I will follow it with my website design projects and make more creative and impressive designs. Your Website designs are awesome. I can say you are one that have years of experiences in this field. A big thanks for such great article.

  3. Surrey Web Design May 28, 2013 at 11:08

    It’s a very informative blog post on Metro style. It looks pretty decent and user friendly.

  4. Pingback: Custom Balloons option now live on new style website. | Custom

  5. Alexander Jun 6, 2013 at 13:27

    Очень классный сайт. Спасибо вам.

  6. Pingback: Metro Arayüz Tasarımı Nedir,Nasıl Yapılır? | Enes Aktas

  7. wordpress deveoper Jul 21, 2013 at 06:06

    There are many hosting providers out there who would
    offer an affordable hosting package with all-inclusive features and tools.
    Please open the menu Select php – My – Admin in c – Panel database with the name (_wordpress) that you created earlier in the first step.

    You must sustain a WP blog along with your website.

  8. Pingback: Metro Arayüz Tasarımı Nedir,Nasıl Yapılır? | Enes Aktaş

  9. Pingback: personalised balloons and custom banners – Personalised Balloons

  10. Pingback: personalised balloons and custom banners

Leave A Comment

Your email address will not be published.