Sunday, 23 February 2014

Metro UI Recipe: What Microsoft has used in its Metro UI

Seriously, buying Lumia over an Android was a result of curiosity about Metro UI by Microsoft. And I remember, I wasn't asleep till 3 a.m, and was tracking down each and every single piece of Lumia's features.  So, today I elaborate in my terms, why that interface is handsome! Meanwhile you can check out which apps are crafted best with this UI.

1.Font

Most prominent font Metro UI has adopted is font named "Segoe UI" on the desktop OS, and "Segoe-WP" on the mobiles. Microsoft designers have powerfully structured the typography of Metro UI with this font. Have a look at this image. Isn't the way the word "people" is displayed, just awesome? How professional that font and its size sums up on a whole screen!


 2. High Contrast

 The beauty of font used is glorified by the contrast background. And the white space canvassed is like a big big playground.

3. Icons


 In my opinion, icons those Metro UI has used are as good as other frameworks. No big deal. But well played UX guys. Primary actions are defined well by icons. On the phones, secondary actions appear when that three dots (...) icon is touched. So all in all, UX is specially taken care of. It is also being said that, the numbers in squares you find in any list, are inspired from Swiss currier company's numbering style on their packages.

4. Swipe


There is much discussion on the internet, that swipe UI will not save Windows and all stuff like that. I really don't think so. See, this is something different than other UI available in the market now. Yes there are many many classy applications which are the 'players' in swipe. But a cute trick here is, 90-10 view of navigable menus. You can  see a little glimpse of next menu item's title on the current screen you are working on.

Swipe UI in Nokia Lumia
Indicating the next navigation items in queue.



Swipe UI in Nokia Lumia
Indicating the next piece of content in the queue.




These are the four iconic pieces of whole Metro UI. Have I missed on anything? Comment below for that, yeah and apologies if anything is actually left out. So, get a "Segoe UI" font, put it on a contrast backdrop, with extra readable font size, decorate it along with some cute icons, use full power of Swipe UI, and your Windows Phone app is ready to show off. Nah, kidding. It takes much more than just this.

I'll come up in my next post, why Metro UI has not been a savoir for Microsoft, in spite off such a hard work implied.

Also Read