{"id":14797,"date":"2012-09-24T16:26:36","date_gmt":"2012-09-24T20:26:36","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=14797"},"modified":"2014-07-14T17:00:43","modified_gmt":"2014-07-14T21:00:43","slug":"50-epic-metro-style-design","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/","title":{"rendered":"50+ Epic Metro Style Design"},"content":{"rendered":"

So in the past couple of months i’ve really fallen in love with some of the metro designs I have seen around the net. I am a big fan of minimalism, and Metro Design is pretty minimal – except its also boxy, and colorful (if you want it to be) which is also another one of my favorite types of designs. So I really enjoy browsing through them, and today I put together a nice list of them for you to enjoy as well! If you aren’t sure what “Metro Design” is or what kind of style this trend portrays, then, lets dive into what it is! Shall we? Lead the way!<\/p>\n

What Is Metro Style?<\/h2>\n

We talked a little bit about Metro Design<\/a> before – so check that out for a little more in depth on what it is, and the guidelines for a metro design – but here is the wikisplanation:<\/p>\n

Metro<\/a> is an internal code name of a typography-based design language created by Microsoft, originally for use in Windows Phone 7. A key design principle of Metro is better focus on the content of applications, relying more on typography and less on graphics (“content before chrome”). Early uses of the Metro principles began as early as Microsoft Encarta 95 and MSN 2.0, and later evolved into Windows Media Center and Zune. Later the principles of Metro were included in Windows Phone, Microsoft’s website, the Xbox 360 dashboard update, and Windows 8.<\/p>\n

“Metro” is based on the design principles of classic Swiss graphic design. Early glimpses of this style could be seen in Windows Media Center for Windows XP Media Center Edition, which favored text as the primary form of navigation. This interface carried over into later iterations of Media Center. In 2006, Zune refreshed its interface using these principles. Microsoft designers decided to redesign the interface and with more focus on clean typography and less on UI chrome. The Zune Desktop Client was also redesigned with an emphasis on typography and clean design that was different from the Zune’s previous Portable Media Center based UI. Flat colored “live tiles” were introduced into the design language during the early Windows Phone’s studies. Microsoft has begun integrating these elements of the design language into its other products, with direct influence being seen in newer versions of Windows Live Messenger, Live Mesh, and Windows 8.<\/p>\n

Response to Metro has been generally positive. However, In August of 2012, rumors began circulating that one of Microsoft’s retail partners, German company Metro AG, had threatened legal action against the software giant for infringing on the “Metro” trademark. A memo was sent out to developers and Microsoft employees to stop using the term “Metro” until a replacement term is established or the legal case is settled. Microsoft is temporarily referring to the design language as Modern UI<\/a>. On August 9, 2012, it emerged that Microsoft was planning to use the term “Windows 8” to replace Metro in consumer marketing materials. The “Modern UI” term appears to be intended for developers who plan to build software based on Redmond’s new design principles.\n<\/p><\/blockquote>\n

Wow, so interesting, its little bits of tech history like that which excites me and gets my geeky juices flowing! “Metro principles began as early as Microsoft Encarta 95” Wow, that really takes me back – I used to be an Encarta 95 Junkie. I remember when we got our very first computer in 1995 and didn’t have internet yet, but you best believe I was digging through Encarta ’95 like every day! I would pop in that CD and enjoy the sights and sounds of history and science and whatever was in there, it wasn’t much compared to the vast expanse of the internet – but back then, it was magical. Ahhh nostalgia.<\/p>\n

Anyway – today we have rounded up some of the “modern” examples of Metro Style Design seen in Web Design as well as Mobile Applications (mostly for the windows Phone, or Windows 8). But really you can apply these metro design principles to any project (online or off) just follow the examples shown here and you will have yourself a nice little modern design (perhaps make an awesome responsive web design<\/a> :D)! Whatever you are working on (could be anything, maybe even some print brochures!) I hope that you get inspired, and Enjoy!<\/p>\n

<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nLove the colors and “slickness” on this one<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nERMAGHERD. THIS LOOKS MAZIN’. This is a Reddit client designed for Windows 8 using Metro Style Design<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nThis is a really nice concept of what Behance on Windows 8 might look like. Epic Metro Style UI Design!<\/em>
\n<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nAnother awesome, albeit different, concept for a metro styled Windows phone Behance app<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nCool Metro Style WordPress Theme<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nReally cool Windows 8 – Patient Records App using Metro Style Design. The medical field can really use some nice designs haha<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nAnother awesome Windows 8 App – this one is really nicely styled, I like it. Gaana.<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nNice Responsive Metro Style WordPress Theme<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nMetro Design – Pinterest Style!<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nAwesome windows metro style app for Dribbble<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nAnother metro style wordpress theme<\/em><\/p>\n

\"\"<\/a>
\nI like these really minimal layout examples, shows you basically the shape\/layout of most metro style UI’s that originated from the new Microsoft products<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a>
\nAwesome Russian Web Design Inspired by Metro Style Design<\/em><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

What was your favorite Metro Design? Are you a fan of the new metro style\/look? Have you made one? Did you used to geek out on Encarta ’95 like me? Let us know in the comments below! Thanks for Reading!<\/p>\n

You like this? Don’t forget to follow us on twitter @andysowards<\/a> and like us on facebook @andysowardsfan<\/a>! We are also on that Google Plus<\/a> & Pinterest<\/a> thing.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

So in the past couple of months i’ve really fallen in love with some of the metro designs I have seen around the net. I am a big fan of<\/p>\n","protected":false},"author":1,"featured_media":14810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[537,24,4206,35,4050,107,6],"tags":[4056,753,550,5885,33,5887,3946,5645,5763,233,1474,1127,4415,452,272,2151,1073,848,237,5702,5764,5880],"yoast_head":"\n50+ Epic Metro Style Design<\/title>\n<meta name=\"description\" content=\"So in the past couple of months i've really fallen in love with some of the metro designs I have seen around the net. I am a big fan of minimalism, and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"50+ Epic Metro Style Design\" \/>\n<meta property=\"og:description\" content=\"So in the past couple of months i've really fallen in love with some of the metro designs I have seen around the net. I am a big fan of minimalism, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2012-09-24T20:26:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-07-14T21:00:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/metro-style-splash-screen.png\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"373\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Andy Sowards\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andy Sowards\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/\",\"name\":\"50+ Epic Metro Style Design\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/metro-style-splash-screen.png\",\"datePublished\":\"2012-09-24T20:26:36+00:00\",\"dateModified\":\"2014-07-14T21:00:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\"},\"description\":\"So in the past couple of months i've really fallen in love with some of the metro designs I have seen around the net. I am a big fan of minimalism, and\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/metro-style-splash-screen.png\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/metro-style-splash-screen.png\",\"width\":600,\"height\":373},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"50+ Epic Metro Style Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\",\"description\":\"Design Inspiration & Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415\",\"name\":\"Andy Sowards\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg\",\"caption\":\"Andy Sowards\"},\"description\":\"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards\",\"sameAs\":[\"https:\/\/www.andysowards.com\"],\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"50+ Epic Metro Style Design","description":"So in the past couple of months i've really fallen in love with some of the metro designs I have seen around the net. I am a big fan of minimalism, and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/","og_locale":"en_US","og_type":"article","og_title":"50+ Epic Metro Style Design","og_description":"So in the past couple of months i've really fallen in love with some of the metro designs I have seen around the net. I am a big fan of minimalism, and","og_url":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2012-09-24T20:26:36+00:00","article_modified_time":"2014-07-14T21:00:43+00:00","og_image":[{"width":600,"height":373,"url":"https:\/\/www.andysowards.com\/blog\/assets\/metro-style-splash-screen.png","type":"image\/png"}],"author":"Andy Sowards","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Andy Sowards","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/","url":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/","name":"50+ Epic Metro Style Design","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/metro-style-splash-screen.png","datePublished":"2012-09-24T20:26:36+00:00","dateModified":"2014-07-14T21:00:43+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415"},"description":"So in the past couple of months i've really fallen in love with some of the metro designs I have seen around the net. I am a big fan of minimalism, and","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/metro-style-splash-screen.png","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/metro-style-splash-screen.png","width":600,"height":373},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2012\/50-epic-metro-style-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"50+ Epic Metro Style Design"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","description":"Design Inspiration & Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/2e0f72bd7f6497fd883e2bd67d9f3415","name":"Andy Sowards","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15f95b011563b5894883b22bd4b32d59?s=96&r=pg","caption":"Andy Sowards"},"description":"Im a professional Freelancer specializing in Web Developer, Design, Programming web applications. Im an Avid member of the Design\/Development community and a Serial Blogger. follow me on Twitter @AndySowards","sameAs":["https:\/\/www.andysowards.com"],"url":"https:\/\/www.andysowards.com\/blog\/author\/admin\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/14797"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=14797"}],"version-history":[{"count":0,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/14797\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/14810"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=14797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=14797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=14797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}