Mike Kruzeniski



My Favorite Metro Apps

by mkruzeniski. Average Reading Time: about 5 minutes.

In just over a year, the Windows Phone app marketplace has quickly grown from nothing to 50,000 apps. An exciting part of watching the marketplace grow is seeing how app developers and designers have taken on and interpreted Metro for their own apps. While Metro can sometimes be seen as stark or very black and white, the philosophy behind it is to reduce UI chrome so that content can shine through. The best Metro apps on Windows Phone use their unique brand content, colors and imagery to bring their app to life. Over the year I’ve kept an eye out for the apps that I think have done a great job using Metro as a starting point, and below are twelve of my favorites. All of them use the basic Windows Phone grid and controls, and have a Metro style to them, but each have their own distinct voice and personality. They aren’t black and white – they’re all colorful, playful, and vibrant.
 
One note is that I’m mainly looking at visual design quality in these examples, not the quality of functionality, or even the quality of motion design. This isn’t a “best apps of the WP marketplace” list – These are my favorite when it comes to playing with and extending the Metro design language. There are lots of other really great apps in the marketplace that stay closer to the core Metro style. Also, with 50,000 WP apps out there, I definitely haven’t seen them all. If you have any favorites – let me know.
 

Amazon Kindle

The Kindle app manages to get a lot of content in to it’s opening Panorama without feeling cluttered. The background graphic and logo make it very clear that this is an Amazon application, but they don’t shout – the content is still the hero on every screen. Marketplace link

Bank of America

When we launched the Windows Phone SDK, there was a lot of excitement about our Panorama control. What I like about the BofA app is that is does a lot with just the Pivots, some color and texture, and careful attention to the type. Marketplace link

DC Comics

DC Comics uses core Metro styling for it’s Pivots in most of the app, but has a very distinct and playful personality on its opening Panorama. The background graphic is really well chosen – it’s exciting, but doesn’t conflict with the foreground content. The comic typeface and DC Comics logo bring just the right amount of Brand voice. Marketplace link

ESPN Scorecenter

The Scorecenter app has a very refined grid that allows the app to fill the screen with a lot of information, yet manages to still feel clean and open. It uses bold background colors to both give the app a strong personality, and to distinguish between the different sports in the app. The ticker at the bottom of the screen packs in even more info, but feels light, and makes this very clearly an ESPN branded experience. (Full disclosure: my team collaborated with ESPN on the design of this app). Marketplace link

Evernote

Evernote did a really nice job of branding their splash / sign-in screen. The rest of the app is very simple and mostly sticks to core Metro controls. But, their consistent use of brand colors and the subtle but deliberate placement of their logo creates a space that feels very distinctly Evernote. Marketplace link

Flickr

I don’t love everything about the Flickr app, but I think they were very successful with these screens. Again, they use just the right amount of brand elements and color to make the app feel like Flickr, and they manage to fit a lot of content in without feeling too crowded. The image in focus breaks the grid thoughtfully to make it the most important element on the screen. Marketplace link

Flixster

The Flixster app is really straightforward. It sticks to Metro controls, but a bold splash screen and consistent use of a strong background color across the app manages to make this app feel unique on my phone. Marketplace link

IMDB

The IMDB app has a lot of fun with the content it has: imagery in the background, content in the foreground, brand colors, and their logo. There are moments when it can feel a bit noisy, but it’s a fun app to play with. Marketplace link

NY Times

The New York Times feels very at home with the Metro controls. By just dropping in their logo and swapping out the typeface in the body, the NY Times app feels very appropriate and unique from other apps. I really like the small touches of red to call out breaking news. The only downsides are that the content is a bit tight and would benefit from more spacing, and that the motion design is too heavy. Marketplace link

Paramount

Paramount has created individual apps for some movies. Shown here are screens from the Zoolander movie app, Waiting for Superman, School of Rock, and the Last Airbender. They stick to the core Metro controls, but make great use of their media content in both the foreground and background. Marketplace link

Rdio

Sometimes a well placed, well sized logo in the Panorama header and a nice background color are all it takes. Oh and, great attention to type and grid alignment. Marketplace link

Vevo

Again – sometimes a well placed, well sized logo in the Panorama header and a nice background color are all it takes. This one could use a bit more spacing to let the content breathe. Great use of doublewide tiles to show off their content. Marketplace link

 
I’m really looking forward to seeing the apps coming to our marketplace in 2012. I’ve had the chance to preview some apps that will be showing up soon, and I’ve seen some really beautiful work.
 
Want to learn more about Metro and designing apps for Windows Phone? Arturo Toledo is doing a whole series of blog posts this month – check it out.
 
Follow me on Twitter here

27 comments on ‘My Favorite Metro Apps’

  1. Robert says:

    Evernote, Vevo, Rdio, Bank of America, Flixter and Espn are all my favorites. The ESPN app does have a few visual issues in my opinion. Not sure they need the boxes around the scores.

  2. Brandon says:

    Nice read and I like you choices. Adding links to the programs in the marketplace would have been a nice addition.

  3. Rich Y. says:

    A nice article. I was thinking of writing a similar one myself, as a lot of people (predominantly ones on other platforms) are so app-crazy that they overlook the aesthetics of a well-designed app that follows a rubric and complements an OS. Good picks.

  4. Bil Simser says:

    Nice summary and collection. I agree these are all great looking apps and there are even more in the marketplace added every day with great potential. People need more posts like this to highlight the beauty you can achieve with Metro.

  5. [...] Link: Mike Kruzeniski’s Portfolio [...]

  6. Excellent examples that enrich the visual language of Windows Phone and link the originally pure Metro design to the distinctive brand appearances. Personally I would add the Spotify and Foodspotting app which are both from interface design as well as user experience superior of their iOS counterparts.

  7. This is very good choice of applications. But all of them use pivot / panorama controls. Can you please make blog about camera / calculator / sound applications that use mostly one screen layouts?
    I know this is not “metro” but many developers as me got problems with designs “one screen” applications.

  8. DP says:

    Gruber linked to this and thus Tumblr on Android UI designs: http://androidniceties.tumblr.com/ – on both, the Evernote design really pops. Kudos to those guys!

  9. Disinto says:

    Good job at describing Metro UI (even though you could have mentioned the complete lack of ‘faux leather’, 3D icons or emboss effects since Metro is purely digital and don’t intend to reproduce some real life textures. It’s IMO vastly superior to iOS design language.
    I think the list is also too US-centered. You could have mentioned general apps like Foursquare, 4th & Mayor, Vimeo, TVShow, YouTube Pro, Dailymotion ;)

  10. Hamranhansenhansen says:

    > even though you could have mentioned the
    > complete lack of ‘faux leather’, 3D icons
    > or emboss effects since Metro is purely digital
    > and don’t intend to reproduce some real life
    > textures. It’s IMO vastly superior to
    > iOS design language.

    The Metro design language has the luxury of being largely academic, so it doesn’t have to solve real-world problems.

    Metro hardly has any apps and they already all look alike. A well-placed logo and background color and attention to your grid times 500,000 is not going to cut it.

    The eye has been trained through millions of years of evolution to recognize color and texture and shape. So if you need to enable the user to recognize which app they are in out of hundreds of apps they use, then distinguishing each app visually with a different texture is really the least you can do. Especially when you consider that under different lighting conditions and with different visual acuity for each user, many different colored apps will look the same. So 3 apps that look dramatically different in the lab all look like the same blue app to the user when they area in the Subway.

    And we’ve already seen that one of the biggest challenges in UI is just to communicate to the user what is a button and what is not. We exaggerate the 3D elements and shadows and so on because that is what works. Users pick up an iPhone and they go to work. That has not been the case with Metro. It could not sell Zunes, it has not sold phones, and it has not even won over John C. Dvorak and Paul Thurrott on Windows 8, so the jury is way, way out on Metro. You’d do better to ask how can Metro’s appeal be broadened rather than make fun of what other platforms are doing to solve the legitimate needs of hundreds of millions of non-technical phone users.

  11. khang says:

    Great write-up! It could be my Lumia 710 but some UI quirks of Metro irk me. One is the lack of onscreen “back” elements that I’m used to with iOS cause my thumb an extra bit of discomfort reaching down to physically press the button. It could be a lack of visual consistency or it could be that I’m conditioned to iOS.
    The second I’m wondering if it only happens on an infrequent basis or if it’s common among most Metro apps: little or no visual feedback onscreen when highlighting/selecting objects. With the thin sans-serif font, some apps make the whole screen gray and other apps provide no visual cues to let you know you’ve successfully selected a link by pressing it more than a moment. The Tapatalk-for-WP7 app “Board Express” is one example of this that comes to mind. Have you run into this?

  12. leo says:

    Seeing the screenshots it looks nice, but reading the comments doesn’t seem so positive (read the Rdio marketplace comments for example).

  13. tom elders says:

    The metro design style seems to indicate that the content you’re looking at is too big for the device you’re looking at it on.

    I’m not a fan of the text going off the edge of the screen.

  14. [...] Metro apps are looking really nice.  Why does the IMDB app on Windows Phone look better than on iOS?  It’s got to be either easier to make a beautiful Metro app than a beautiful iOS app, or they put more effort into their Metro app.  But why would you put more effort into the much less popular platform? [...]

  15. Dirk Lenz says:

    Clean and functional UI design lookalikes Developers need to find grid space for that extra bit of soul though.

  16. spoonyfork says:

    Inception in the Flixster app? That was the summer of 2010. How old are these screen markups?

  17. [...] there’s a nice gallery here of some of the latest apps from @mkruzeniski: While Metro can sometimes be seen as stark or very [...]

  18. monsieurturtle says:

    >The Metro design language has the luxury of being largely >academic, so it doesn’t have to solve real-world problems.

    How would you argue that iOS or Android’s ICS designs aren’t of exactly the same character?

    >Metro hardly has any apps and they already all look alike. >A well-placed logo and background color and attention to >your grid times 500,000 is not going to cut it.

    Except that this is (in a parallel sense) exactly what people held up about iOS as opposed to Android, before the latter had a steady design language. iOS may be chief on apps, but a majority of them offer the same chromed navigation bar (simply swapping colors or adding a logo) and the same quick navigation bar at the bottom.

    >The eye has been trained through millions of years of >evolution to recognize color and texture and shape. So if >you need to enable the user to recognize which app they >are in out of hundreds of apps they use, then >distinguishing each app visually with a different texture >is really the least you can do. Especially when you >consider that under different lighting conditions and with >different visual acuity for each user, many different >colored apps will look the same. So 3 apps that look >dramatically different in the lab all look like the same >blue app to the user when they area in the Subway.

    You are making a ludicrous overstatement of the importance of visually distinguishing design factors. In one sense, you think that the color and placement cues are inefficient, and in another you seem to argue that users will become bewildered in the midst of a task and actually forget which app they are in.

    If the iOS design language is functional, then you would have to admit that the Metro language is equally so. They approach the same problems with the same solutions, albeit with a slightly different structure: color and placement still play a role, menus remain fairly consistent, and ultimately, if a user is going to get “confused” about what app he/she is in, there is enough visual information available to clarify.

    Ironically, you are making a case for the use of real-world textures, in the midst of relatively negative responses toward Apple’s application of leather textures and other such visual gimmicks to the point of gaudiness.

    >And we’ve already seen that one of the biggest challenges >in UI is just to communicate to the user what is a button >and what is not. We exaggerate the 3D elements and shadows >and so on because that is what works. Users pick up an >iPhone and they go to work. That has not been the case with
    >Metro. It could not sell Zunes, it has not sold phones, and
    >it has not even won over John C. Dvorak and Paul Thurrott >on Windows 8, so the jury is way, way out on Metro. You’d >do better to ask how can Metro’s appeal be broadened rather
    >than make fun of what other platforms are doing to solve >the legitimate needs of hundreds of millions of non >technical phone users.

    You seem to have little or no understanding of the functionality of any iOS alternatives. Metro is easily as usable as iOS is, and both offer more fluidity of work (in trade of functionality) than Android.

    Most users who actually use a Windows Phone device end up loving the interface, despite whatever shortcomings the platform has (and indeed, when they explain why they might have given up the device, it is typically because of either app selection or platform limitations pre-7.5 rather than the design).

    Blaming the inability to sell Zunes or Phones on the Metro design itself is completely clueless. Take a look at Android and tell me if the platform has gotten where it is based on it’s design principles. Functionality, device choice, price, carrier support, platform support, application support and other factors matter just as much as hardware or software design. It even comes down to more iffy factors, such as in-store displays and store attendant recommendations (as I’ve seen the latter happen alarmingly often).

  19. [...] aus. Wer noch mehr Tipps will findet eine Zusammenstellung von Michael Hell sowie eine Liste von Mike Kruzeniski, einem Mitglied des Windows Phone [...]

  20. [...] Mike Kruzeniski recently wrote about being a fan of Windows Phone’s Metro and all the great designs that springboard off of it. He highlight some of the apps he thinks really use Metro to its fullest and have great UI designs. Which made me think, what’s my favorite app UI? I don’t have a Windows Phone (I’m an admitted Apple addict) but that’s not really the point. All operating systems have apps with great UIs and horrible UIs. What I want to do is share those favorites (or least favorites if there’s one you particularly detest). So, what’s YOUR favorite UI? [...]

  21. [...] Mike Kruzeniski – My Favorite Metro AppsThe UI style isn’t my particular jam but here’s a good collection of people who’ve executed well on it. [...]

  22. [...] 经过选择设计模式,定制并创建设计模式,你基本上设计了app。听起来很简单!其实不是,事实上只是选择了正确的设计模式,定制了它们的工作区块。我发现Windows Phone设计工作室投入了超过2年加工与展开Windows Phone体验与UI。设计模式是非常灵活与广泛的。经过在Windows Phone Design Day回顾将近200个app,我相信它们当中90%使用已有的设计模式与定制设计模式。当我开始我在设计工作室的工作,我对Metro并不熟悉,我的印象是它很漂亮但所有app都看起来很像。现在我在这里写给你的是关于再利用(re-using)已有的设计模式设计整个app做出改变?是的!我印象里6个月前,在Windows Phone中所有的都是Pivot与Panorama时代。但是我发现经过6个月,许多Windows Phone app比仅使用一个Pivot或Panorama更丰富。所有的事情是相通的。这三种类型的屏幕依次主导了app中无限量布局的可能性。这是app之间区别的地方。定制Panorama面板的可能性、Pivot页面的无限量。Windows Phone app使用的Metro设计语言可以非常丰富与独特。像“如果背景不是黑色就不是Metro”的迷信不是真的。请查看Mike K的这篇文章或者Core77的Windows Phone设计辩论。 [...]

  23. [...] 经过选择设计模式,定制并创建设计模式,你基本上设计了app。听起来很简单!其实不是,事实上只是选择了正确的设计模式,定制了它们的工作区块。 我发现Windows Phone设计工作室投入了超过2年加工与展开Windows Phone体验与UI。设计模式是非常灵活与广泛的。经过在Windows Phone Design Day回顾将近200个app,我相信它们当中90%使用已有的设计模式与定制设计模式。当我开始我在设计工作室的工作,我对Metro并不熟悉,我的印 象是它很漂亮但所有app都看起来很像。现在我在这里写给你的是关于再利用(re-using)已有的设计模式设计整个app做出改变?是的!我印象里6 个月前,在Windows Phone中所有的都是Pivot与Panorama时代。但是我发现经过6个月,许多Windows Phone app比仅使用一个Pivot或Panorama更丰富。所有的事情是相通的。这三种类型的屏幕依次主导了app中无限量布局的可能性。这是app之间区 别的地方。定制Panorama面板的可能性、Pivot页面的无限量。Windows Phone app使用的Metro设计语言可以非常丰富与独特。像“如果背景不是黑色就不是Metro”的迷信不是真的。请查看Mike K的这篇文章或者Core77的Windows Phone设计辩论。 [...]

  24. [...] http://kruzeniski.com/2012/my-favorite-metro-apps/ itt van egy pár szép Metro app, csak, hogy átérezzétek, hogy milyen is a kinézet. [...]

  25. [...] 经过选择设计模式,定制并创建设计模式,你基本上设计了app。听起来很简单!其实不是,事实上只是选择了正确的设计模式,定制了它们的工作区块。我发现Windows Phone设计工作室投入了超过2年加工与展开Windows Phone体验与UI。设计模式是非常灵活与广泛的。经过在Windows Phone Design Day回顾将近200个app,我相信它们当中90%使用已有的设计模式与定制设计模式。当我开始我在设计工作室的工作,我对Metro并不熟悉,我的印象是它很漂亮但所有app都看起来很像。现在我在这里写给你的是关于再利用(re-using)已有的设计模式设计整个app做出改变?是的!我印象里6个月前,在Windows Phone中所有的都是Pivot与Panorama时代。但是我发现经过6个月,许多Windows Phone app比仅使用一个Pivot或Panorama更丰富。所有的事情是相通的。这三种类型的屏幕依次主导了app中无限量布局的可能性。这是app之间区别的地方。定制Panorama面板的可能性、Pivot页面的无限量。Windows Phone app使用的Metro设计语言可以非常丰富与独特。像“如果背景不是黑色就不是Metro”的迷信不是真的。请查看Mike K的这篇文章或者Core77的Windows Phone设计辩论。 [...]

  26. jagor says:

    I haven’t seen many metro apps for the iPad, so when we made Presentation Note, an app for presenting directly form the iPad, targeted at power point users, we decided to go with this design. The reactions are great so far.

Leave a comment