What’s good in Metro UI which can be used in responsive websites

Any new trend or new product in market always starts with some positive and negative face and if it is Microsoft product, majority of people cannot turn down to give it at least one try, that’s why Microsoft dare to make the drastic UI change named as Metro UI, which is being called new design language of Microsoft. It is an extreme change wherein one is south pole and the other is north pole. This is a big move by Microsoft as this new UI will be used in all their platforms including desktop, tablet, mobile and their website. Let’s gray out the negative face and focus on positive face of metro UI which can be used in our responsive websites.

Basic design idea of metro UI is inspired by “information system of transport”

Metro UI is inspired by transport signsEvery design idea has some thought process and inspiration behind it. Metro UI design idea is derived from signs and symbols used in transitions, airports, sports and travel worldwide, which are very high in readability with clean and clear view of elements, and no unnecessary element is used. Thereby no distraction and person quickly and clearly perceive the provided information.

Metro UI is a typography based design

Since the idea is derived from signs and symbols used in transitions attention is given particularly to font and font attributes, style, size and location. Microsoft has designed a special Sagoe font family where special attention is given on the readability of the font. Web has already come out of web safe fonts, so any font-family can be used on web now. There is a good collection of google web font that can be used to emphasize the part of the web page.

Text is a part of design in Metro UI, that communicate the information and good design.

Content no chrome

Any unnecessary element can distract the user, in metro UI focus is given on the content only, no chrome or decoration Content is UI. A web page with unnecessary chrome elements can be de-clutter by removing the chrome and adding the flavor of chrome on the content itself. This feature can be used better in conjunction with typography by using the vibrant font colors properly, as excess use of vibrant color can leave behind a bad impression, may be an impression of site for kids.

An elegant and innovative design is always preferred over a flashy design, a car can look more valuable by adding chrome but not web.

Distract the user and get the attention by using animation

Proper use of font and color emphasize the UI elements in metro UI, animation is used to get the higher attention on any specific information, which actually distract the user from the flow and get the attention. It need to be used very carefully as it can distract the user, and leave behind an impression of UI for kids and whole world is not social media, games, music and video, there are people who works. 🙂

Window Metro UI is on mobile first paradigm

Metro UI is initially designed for smartphone and tablets, where the special attention is given to the touch devices and the same design is being pushed in desktop and its websites, which is of course a bold move by Microsoft. Mobile first approach is a future friendly approach as the traditional internet is going away and future is all about mobile. All the application or websites should be developed with mobile first approach. If the desktop design space is compared with mobile, a designer almost loose the 80% space and focus automatically moves on the more important part of a website to be upfront, that in turns gives us more user friendly and more better UI.

Conclusion

Metro UI is being called a new design language of Microsoft which actually is an implementation of new future proof trend, and all these trends are already in the market, but thanks to Microsoft to bring it in single platform. Metro UI can off course be used as an inspiration at varying levels, but it need not to look identical or look like it is manufactured by Microsoft. For instance typography principle can be used without needing to use Segoe font family, any other font family can have a good impression. Consider content is UI, no chrome philosophy and mobile first approach while working on any project.

Author: Gopal Juneja

A UX/UI enthusiast living in India Delhi having 18+ years of industry experience to use in beautiful design and handsome front end coding.

2 thoughts on “What’s good in Metro UI which can be used in responsive websites”

  1. “Basic design idea of metro UI is inspired by information system of transport”
    Right, people should not forget to realize where the “info systems of transport” comes out in first place. Remember Olympic pictographs? This is a fundamental of every visual design – to convert mass amount of info into its logical and laconic symbolism.
    So, the “metro” is nothing new after all.

    “Metro UI is initially designed for smartphone and tablets where the special attention is given to the touch devices and the same design is being pushed in desktop and its websites which is of course a bold move by Microsoft. ”

    Exactly right, minimum of visualization over maximum of info.
    I think its somewhat similar (in visual concept) principle on how in some Japanese Uni’s students were given to write an essay on random subject in 5000 words, then re-write it in 500, then in 50, and finally in 5 or 10.

    “It need to be used very carefully as it can distract the user and leave behind an impression of UI for kids and whole world is not social media, games, music and video, there are people who works.”
    And I totally agree with you on your sarcasm. People are paying away tooo-ooo much of their precious time on garbage so-called “social media”.
    One person simply cannot be friend of a hundreds, not even tens. It is not a friendship, but continuous and annoying self-proclamation. Grand BS in anyway, whether its “twit” or “fb”.
    Btw, I’ve got some new trail-runners shoes last night at very bargain price!!! (Jesus! How did I forgot to let the entire world to know about it???)

Leave a Reply to Andrew Prozorov Cancel reply

Your email address will not be published.