Metro seems to be the newest thing as regards design principles, and for most people, that makes it the in thing. This UI culture is important to both designer and developer. Its bold, beautiful and minimalistic in nature.
As new as Metro design may sound, it’s not so new at all in its entirety! It’s been there all along, you’ll definitely may have seen it at least on one old billboard, flyer , railway station (yea railway station). Both Print and Digital media have applied the Metro design principles long before the phrase metro design and the concept of Windows 8 was ever coined! In its simplest form, Metro design is an upgraded principle from the age old minimalistic design principle.
Simply put, Microsoft has improved on minimalistic design and called it Metro!
Metro Design Language Guidelines
Light, Clean, Open, Fast (Fierce Reduction)
Metro Design believes that the UI be clean and simple but above that, the user should have a fast, smooth and simple experience. The User should not have to go through multiple steps to perform a simple task, Users could simply touch, hold down, swipe, double tap to achieve simple task. Users should also not be made to go through many pages or phases to get this done, developers and designers must clean up the flow, process or the phases the user has to follow to accomplish task in apps, in summary don’t just simplify the look of the site, simplify the application flow.
Content, not Chrome
The concept of Metro design centers around flatness, such that borders, drop shadows , complex backgrounds and anything else of such is forbidden in metro, regardless of how minimalistic your design may be, the use of any of these would unmetrofy (you know what I mean right?) your design. Metro design principle also requires the use of whitespaces, lots of whitespaces. Icons used in metro design are also minimalistic like everything else. Microsoft makes good example of this by just using single colored icons per application such that in all of windows 8, the icons are either white or black depending on your color scheme such that if you’re using a dark color scheme, your icons would be white and vice versa.
The content (consumption and generation) takes first priority to design elements, the content is promoted through typography, very clean typography. While popular web-safe fonts like Helvetica Arial Sans-Serif can be used, Segoe is encouraged of course. Typography just like anything else in design can be overdone, Metro is not 100% about typography. Typography is key in Metro because it offers a unique and minimalistic way to convey structured information to the user. For example, font size and font color help to easily differentiate between navigation elements, page tiles, headers and contextual text.
Motion helps to add a feel of liveliness to metro which could otherwise easily become boring due to its flatness, use of large whitespaces and simplicity. Page transition and
Motion is there to serve and contribute to making information the star of the show. Use motion to emphasize (or de-emphasize) your application work flow.
Unlike many other design principles, metro does not try to digitize none digital items even in their digital versions. An Ios app for reading, buying or selling books would/may have the picture of a real bookshelf with books on it as its app icon, browsing through such an app, the experience would be made by the developer to resemble looking through a real world bookshelf. Ios calendar and address book apps also tend to do this as well contrary to the Metro design principles. Ios design choice may be better to some folks as regards this principle, this may vary from user to user, but the use of truly digital design concept to represent real world items is a Metro design principle and not according to a public opinion poll. Metro design Principle believes that users care more about being able to consume or create information (depending on the app) rather than having representation of physical world objects inside their gadgets.