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.
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 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
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 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
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
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
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
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 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
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
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