{"id":12898,"date":"2012-07-18T08:19:11","date_gmt":"2012-07-18T12:19:11","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=12898"},"modified":"2023-07-10T17:13:14","modified_gmt":"2023-07-10T21:13:14","slug":"content-over-chrome-metro-design","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/","title":{"rendered":"Content over Chrome: Metro Design"},"content":{"rendered":"

Metro Designs – Style Development<\/h2>\n

The word Metro is getting tossed around a lot in the web design and development community. This can obviously be attributed to Microsoft\u2019s talk about the new Windows 8 operating system and its Metro interface, but that leads to some false sense of what a Metro design is. The title says it all really, it is content over chrome.<\/p>\n

After speaking to a few colleagues of mine I decided to write an article to hopefully expound on this subject. I received a few negative responses when telling people I like the Metro style, and among the responses were statements like, \u201cI just think the color scheme is too jarring\u201d, or \u201cI really don\u2019t like to lay things out in a bunch of boxes\u201d.<\/p>\n

They are missing the principles of the design style and looking just at how Windows had implemented it on their various platforms (i.e. Windows Phone, xBox, etc.).<\/p>\n

Metro has its roots in a very old concept we got from our friends in Switzerland about 60 years ago. It had an emphasis on clean, readable, and asymmetric design.<\/p>\n

Here are a couple of examples of Metro based design:<\/h3>\n

\"\"<\/p>\n

You can see in the example above (from this microsoft article) that it is possible to create something very attractive, with very little color.<\/p>\n

\"\"<\/p>\n

These guys have a great example of a tiled\/colorful interface make note of the great iconography and typography. This is another great principle of Metro: the content should be obvious to the reader. So an pie chart icon should speak intuitively that it will be some kind of reports in there.<\/p>\n

So what are some basic principles behind a Metro design?<\/h2>\n

Like all design style, there are guidelines, but no rules. Here are the three primary components to hit if you want to create a Metro styled site\/application (as well as the point hit on in the above paragraph):<\/p>\n

Typography<\/h2>\n

\"\"
\nMetro Ui Design Principles<\/em><\/p>\n

It is used as almost a subtle navigation for the user. Keep it clean, simple, and attractive. Typical Metro typography steers clear of serif fonts. Again this is a guideline, not a hard and fast rule.<\/p>\n

Simplicity<\/h2>\n

\"\"
\nWeb design trend: Metro UI<\/em><\/p>\n

The mantra here is \u201cContent over Chrome\u201d. Yes I am sure we all enjoy the big flashy websites with the laser-light shows in the background. It gets old though, and Metro prefers to have the focus on the actual content being presented, not being distracted by the background.<\/p>\n

Response<\/h2>\n

\"\"<\/a>
\nMetro Twit Website UI is a good example, but also the application itself is a great example of a responsive Metro UI<\/em><\/p>\n

Perhaps the most important aspect of this style is its responsiveness. Everything on the site should respond in some way to a user interactive. If you think about the overall design concept, it is very flat: flat background, flat content areas, and flat text. By adding some interaction you make the design feel like a living thing. So if a user slides, swipes, clicks, drags, or smashes, there had better be some response from the user interface.<\/p>\n

And there you have it. It is deceptively simple, but once you get the hang of it I believe you will find it a very rewarding design for the customer, the designer, and of course the user. And make note, no where in the definition of \u201cWhat is a Metro Design\u201d does it state you need to use hot-pink and magenta with square tiles. It is up to you how you implement it. A note on the square tiles though: they make sense, and are a great way to keep the UI easily understandable.<\/p>\n","protected":false},"excerpt":{"rendered":"

Metro Designs – Style Development The word Metro is getting tossed around a lot in the web design and development community. This can obviously be attributed to Microsoft\u2019s talk about<\/p>\n","protected":false},"author":64,"featured_media":12908,"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,4207,24,4206,225,4584,35,4050,49,1,107],"tags":[5905,780,571,5885,4308,1971,3946,5645,5643,1474,1127,4415,159,272,2152,5644,3118,1073,848,2149,237,5702],"yoast_head":"\nContent over Chrome: Metro Design<\/title>\n<meta name=\"description\" content=\"Metro Designs - Style Development The word Metro is getting tossed around a lot in the web design and development community. This can obviously be\" \/>\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\/content-over-chrome-metro-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Content over Chrome: Metro Design\" \/>\n<meta property=\"og:description\" content=\"Metro Designs - Style Development The word Metro is getting tossed around a lot in the web design and development community. This can obviously be\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-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-07-18T12:19:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-10T21:13:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/metro-twit-responsive-ui-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1281\" \/>\n\t<meta property=\"og:image:height\" content=\"688\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"David Stanley\" \/>\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=\"David Stanley\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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\/content-over-chrome-metro-design\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/\",\"name\":\"Content over Chrome: Metro Design\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/metro-twit-responsive-ui-design.png\",\"datePublished\":\"2012-07-18T12:19:11+00:00\",\"dateModified\":\"2023-07-10T21:13:14+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/276d5b1b14fcb5a563bd8f6d6092941a\"},\"description\":\"Metro Designs - Style Development The word Metro is getting tossed around a lot in the web design and development community. This can obviously be\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/metro-twit-responsive-ui-design.png\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/metro-twit-responsive-ui-design.png\",\"width\":1281,\"height\":688},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Content over Chrome: Metro 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\/276d5b1b14fcb5a563bd8f6d6092941a\",\"name\":\"David Stanley\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3b48d25df857ff8e910724b39a134982?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3b48d25df857ff8e910724b39a134982?s=96&r=pg\",\"caption\":\"David Stanley\"},\"description\":\"David Stanley is a Web Designer and Developer that blogs at his personal blog and is currently based out of SLC, UT. Though he hasn't been in the industry long his passion for creating and improving things has led him to have a very successful career thus far. He is a father of two awesome boys, and in his free time he likes to dive head first into new technologies, and code until his wife finally kicks him off the computer.\",\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/davidstanley\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Content over Chrome: Metro Design","description":"Metro Designs - Style Development The word Metro is getting tossed around a lot in the web design and development community. This can obviously be","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\/content-over-chrome-metro-design\/","og_locale":"en_US","og_type":"article","og_title":"Content over Chrome: Metro Design","og_description":"Metro Designs - Style Development The word Metro is getting tossed around a lot in the web design and development community. This can obviously be","og_url":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-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-07-18T12:19:11+00:00","article_modified_time":"2023-07-10T21:13:14+00:00","og_image":[{"width":1281,"height":688,"url":"https:\/\/www.andysowards.com\/blog\/assets\/metro-twit-responsive-ui-design.png","type":"image\/png"}],"author":"David Stanley","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"David Stanley","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/","url":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/","name":"Content over Chrome: Metro Design","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/metro-twit-responsive-ui-design.png","datePublished":"2012-07-18T12:19:11+00:00","dateModified":"2023-07-10T21:13:14+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/276d5b1b14fcb5a563bd8f6d6092941a"},"description":"Metro Designs - Style Development The word Metro is getting tossed around a lot in the web design and development community. This can obviously be","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/metro-twit-responsive-ui-design.png","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/metro-twit-responsive-ui-design.png","width":1281,"height":688},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2012\/content-over-chrome-metro-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Content over Chrome: Metro 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\/276d5b1b14fcb5a563bd8f6d6092941a","name":"David Stanley","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3b48d25df857ff8e910724b39a134982?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3b48d25df857ff8e910724b39a134982?s=96&r=pg","caption":"David Stanley"},"description":"David Stanley is a Web Designer and Developer that blogs at his personal blog and is currently based out of SLC, UT. Though he hasn't been in the industry long his passion for creating and improving things has led him to have a very successful career thus far. He is a father of two awesome boys, and in his free time he likes to dive head first into new technologies, and code until his wife finally kicks him off the computer.","url":"https:\/\/www.andysowards.com\/blog\/author\/davidstanley\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/12898"}],"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\/64"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=12898"}],"version-history":[{"count":1,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/12898\/revisions"}],"predecessor-version":[{"id":46576,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/12898\/revisions\/46576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/12908"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=12898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=12898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=12898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}