Embracing Metro Design

June 29, 2012

Next week I’ll be releasing the first post in a series entitled “Metro Pass”. The goal of the series is to help you learn about Metro style app development by breaking down the massive amount of documentation on MSDN into easily digestible components, but more on that next week. Before I felt comfortable releasing the series, I wanted to make sure I had a good understanding of the Metro design language. In my opinion there is no better way to get comfortable with a new concept than to actually put it to use. My first thought was to create a sample application and apply Metro best practices to it. That just didn’t resonate with me as I would be writing a throw away app with no real world value. As a result I just couldn’t get motivated to do it.

For several weeks, I didn’t know how to proceed. Then it finally dawned on me, “My blog!” I know my blog isn’t a Windows 8 application, and, in fact, it’s not even written on the Microsoft stack (it’s WordPress, so it’s running on PHP, MySQL, etc.) Over the past year I’ve been changing the look and feel (in WordPress parlance that’s theme) of my blog to get something I’m happy with. During that time I’ve used the following themes:

 

The last theme (Diary/Notebook) is the one I had been using most recently. It’s a nice theme, but I couldn’t put my finger on why I felt it wasn’t quite right. As I started to read through the MSDN docs on Metro style apps I was finally able to figure out what was bugging me about my blog. Chrome. (No, not the browser). Metro is all about putting content before chrome and immersing users in the things they love. In the case of my blog, it’s about making my content (posts) front and center. However, my blog had a lot of chrome on it. Let me show you what I’m talking about. Below is the layout of my blog prior to the makeover:

metrofy-wp-01

The header, sidebar, and footer are all chrome. They’re getting in the way and distracting the user from the original reason they came to the blog, to read content.

metrofy-wp-02

With that in mind, I decided to take a very minimalist approach to the site design. I created icons for each item in the header, footer, and sidebar. I then grouped those icons together and placed the group in the upper and lower right hand corner of the page which resulted in this:

metrofy-wp-03

By making just this minor change I was able make the posts (content) the focal point of the site, remove distractions, and still allow readers to do all that they could prior the redesign. It might not seem like much, but I believe it makes all the difference in the world.

In windows 8 , , ,
permalink