Metro UI Inspiration

I’m fascinated with Metro UI design, and I’m not just talking about Metro UI on the Windows Phone 7 device. Studying the design principles really opened the door for me to really think about user experience. Don’t get me wrong, I’m still a hardcore developer, but if you have been to any of my Windows Phone 7 talks you’ve heard me say…

Being a developer is no excuse for not being a designer.

I take that seriously, but I never used to. Previously, I have had a strong stance that in order for me to develop a feature I need to know exactly how you want the user interface to look, right down to the pixel. This all changed when I moved to a smaller company and I had a lot more control over the features I was implementing. As long as the feature accomplishes the overall goal I pretty much have free reign to design that feature the way I think it should be designed. That freedom extends from the code architecture to the user interface. At first, even in the new company I tried to push the idea of me needing a mockup before I started developing the feature. That didn’t last long. I would get exactly what I asked for.

A mockup written in crayon or on a napkin that is just an awful 30 second thought that had little consideration for how the user would actually use the feature.

I soon stopped asking for a mockup and started thinking more in terms of what the user’s objective is going into the screen and how I can help accomplish that user’s objective it the simplest way. Thinking in this way really makes you write less CRUD forms and more of a task driven UI.

I have a Windows Phone 7 as my company phone and that OS does such a great job at user experience and has had so much success in its design that I have been doing a considerable amount of Metro UI design that extends beyond just Metro for phone applications. Extending Metro design principles to a feature rich web application has been quite a challenge. Along the path of studying Metro UI design and learning more about user experience I have found some resources that have inspired me to write some great applications.

I wanted to share a few of those inspirational resources with you.

The first and probably the best Metro UI resource you can find is the Microsoft Zune software.


This application just oozes design. I have a Zune Pass that allows me to listen to whatever music I want. I listen to music when I write code. I find myself staring at Zune when it’s playing because it’s so fascinating. If you have never used it, you must try it. Everything animates so well and it organizes complex content into quite a structured collection. I could write this entire post about Zune design. It is quite a masterpiece.

The second inspiration resource to check out is the Microsoft Surface 2.0. The tools for the new 2.0 framework just recently came out and the new version has some Metro UI elements in it now.

Surface 2.0

The third resource is Deviant Art. I know it sounds strange but there is a decent amount of activity on Deviant Art that is centered on Metro UI. I’m particularly interested in Chris Lindhartsen’s work.

Chris Lindhartsen Blog Concept

He is a designer that writes concept applications that would serve well as Metro UI styled applications. I am personally a fan of his designs for the IRC client and email client but you can take a look at everything he has in his Metro Across Windows project.

The fourth resource that can really help you find your inspiration is looking at Windows Phone 7 apps. Metro is not required for WP7 apps but it is recommended by the design guidelines. Some developers really only use the cookie cutter Metro designs that the phone creates in the project templates but others expand on Metro’s clean, simple, and modern approach. Have a look at apps like Cocktail Flow and 4th and Mayor.

4th & Mayor Cocktail Flow

Of course, I could not have a post about Metro UI without mentioning Windows 8. The concepts designs and teasers have been released and the immersive mode looks incredible. Windows 8 really takes a new, creative approach to Metro.

Windows 8

Several other applications/websites are popping up that are inspired by Metro UI. Some really excel at the Metro approach. Here is a list of sites you could benefit from if you are looking for Metro design ideas.