These postings are provided "AS IS" with no warranties, and confers no rights. You assume all risk for your use.
Paul LabergeDeveloper Evangelist
Frédéric HarperDeveloper Evangelist
Metro is gaining popularity as a way to create compelling app designs for Windows Phone. It’s theme is distinct and very oriented towards providing the user with information. At the same time, given its emphasis on information, it is more than just presenting data on the screen. A well-built Metro app follows a set of principles that make the app truly flow and through that makes the app useful.
The marketing for Windows Phone often proclaims it as the glance and go platform. The intent of this catch phrase is to convey the fact that you can get information from your phone in only a very short amount of time looking at it. And from that quick glance and the information you retain from it, you can decide the course of action you want to take from it, be it opening your email client to check your email, find out who called you, answer a Twitter message, or even grab that umbrella because your weather app told you that it’s raining outside. The platform really tries to live up to that glance and go mantra.
But how does an app use Metro to achieve the glance and go goal? Like life, there is really no one answer to that question; your creativity as the author of the app plays a distinct role in this process and guides it to its finish. That said, free reign to do whatever you want can lead to issues with the experience the app provides its users.
With great power comes great responsibility.
That’s where the Metro Design Principles come in.
The principles as laid out in the graphic above are meant to provide you with a set of guidelines for building your app using Metro the right way. What it is not is a blueprint. The guidelines above are not meant to define your app or its personality; the intent is to allow you room to express the creativity of your app.
So, with that said, here is a brief description of the principles as laid out above:
Clean, Light, Open, Fast: This refers to the flow of the app. How is the experience of the app from the user perspective? Is it responsive and dynamic? Is it inviting and usable?
Celebrate Typography: Rarely is text mistaken for art (at least in the visual sense; in a literary sense it is absolutely – one of my personal favourites of literary text as art is Ken Follett’s Pillars of the Earth, but I digress…). In Metro, however, text is very much artful. Because Metro is very text-driven (again, due to its focus on information), how you use fonts and how you place text on the screen is very important. That said, your app should not be only text; this is a common misconception with Metro. Use text wisely. Use it as much as you need it and no more. Make sure that the text flows with other screen assets like images, video, buttons, etc. It should look and feel natural.
Alive and In Motion: This principle follows closely with Clean, Light, Open, Fast. Your app should not feel or be static. Use animation (but not too much to cause negative distraction). Use of colour is important (you know those apps in the Marketplace that are black backgrounds with white text and not much else? Yeah, those apps may look “metro-ey”, but they are not really Metro). Make sure your app invites interaction with the user. Your app should compel the user to explore and use your app.
Content not Chrome: When we say “chrome” we speak of the facilities of the app meant to provide peripheral functionality. Chrome in this context are things like app toolbars, system information like battery life remaining, URL bars, etc. Your app should focus on giving the prime real estate of your app to its content. Content is king. Not buttons.
Authentically Digital: In the times of the Renaissance, there was an explosion of discovery that made a permanent impression on the human condition and how we view ourselves. Art, science, philosophy, social awareness – all of it was viewed through new lenses with the guidance of genius of the likes of Galilei, Michaelangelo, da Vinci, Machiavelli, Copernicus and others. The world was their canvas and the expression in their creations were limited only by their own creativity. We, on the other hand, are not afforded the boundlessness that these great thinkers had in the physical sense. The unlimited potential of the apps we create are truly found in their digital nature. This is because apps are limited by the form factors that they are housed in. The art and awesome power of the app are found in the bits that are interpreted by the hardware.
The content of this post is just a very brief description of the Metro Design Principles. If you want a truly immersive description of them, I encourage you to check out Arturo Toledo’s post titled 31 Weeks of Metro Design | #1 Metro Design Principles and the Metro Design Language.
This post is the second in a series of posts on Metro found on this blog. The first post (“Unlocking the motivation of your mobile app user”) can be found here. The third post, "Isn’t “tile” just another word for “icon”? Infography vs iconography explained." can be found here. The fourth post (“Going with the flow… Using Metro to control the experience”) can be found here. The fifth and final post (“Making users awesome in the moment”) can be found here.