Modern UI Style Design by Microsoft

What’s Modern UI?

Modern UI is a new design language created and made popular by Microsoft with the introduction of Windows 8, however the interface was used for the first time with Windows 7 portable devices. Partially we’ve seen this interfaces style since MSN 2.0 or Encarta 95, but not entirely as they are today. The Modern UI design focuses on beautiful typography and less on graphics, while putting the content in the center.

The user interface was called “Metro” until actually few weeks ago. The American giant had to drop the name because of a lawsuit from the German retailer Metro AG. So if you are confused about Microsoft’s move, so are we. But today we are not here to talk about their name, but about how can the new UI influence web design.

Although it first appeared under the tutelage of a huge American company, the “Modern” was built on the design principles of classic Swiss graphic design, also known as the International Typographic Style. The style was developed more than 60 years ago and emphasizes readability, objectivity and cleanliness. An easy thing to notice is the use of a grid and sans-serif typefaces.

With Microsoft, “Modern UI” had quite a long time of development, since it appeared in Windows Media Center 2003 for Windows XP Media Center Edition. This focused a lot on content and used text as the primary form of navigation. Not much happened until 2006, when Zune refreshed the interface using several other principles, like focusing even more on content, beautiful typography and less UI chrome. From there it went on Windows 7 phones and then on Microsoft’s new operating system, Windows 8, released recently in full after a period of beta testing. Other products, such as Windows Live Messenger, Live Mesh and Outlook, include Modern influences in their user interface design.

The good about Modern UI

The new style design finally takes Microsoft on the path of creating beautiful interfaces, and brings them a step closer to Apple’s operating systems and their interfaces. As an Apple fan and user I can definitely tell you that the new “Modern” of Microsoft intrigues me a bit too much. It is not just a list of things that you can follow and there you go, you can create your own interface. Modern UI is about more than that, it is about creating quality and inspiring others. It is a principle of its own. It is the somethingMicrosoft lacked for a long period of time.

Modern inspires confidence and motivated towards detail. It creates and gives a feeling of reliability and safety. This new minimalistic approach might just be the future of the web. We all assume tablets and touch, portable devices are the future of technology, and Modern UI is created for touch devices mainly. Yes, Windows 8 for computers has the same interface, but who knows for how long we will still use our mouse and keyboard to move around a screen?

Key design elements

When designing with Modern principles, you need to use a hierarchical approach, as the style enables a flow form top-level down to detail.

The basic principle of Microsoft’s Modern UI version is the tiles used for navigation. Some templates can already be spotted here and there on the internet, but you can always create your own. Remember balance, symmetry and hierarchy are three important key principles to keep in mind.

Typography is something else you need to closely look at when designing with Modern principles. Remember content is the most important, that’s where the focus should be. Keep the text in the tiles short, a person should not use more than few seconds to find out what’s important on the page. A website designed with these principles should offer a quick overview of the content.

“Metro is our design language. We call it Metro because it’s modern and clean. It’s fast and in motion. It’s about content and typography. And it’s entirely authentic.”

This is how Microsoft described their new user interface vision at the release announcement of Windows 8. They encountered however some legal issues on the way, and are still under fire from Metro AG, one of the largest retail/wholesale group in the world, for using the Metro “trademark”. Even before we wrote this article, Microsoft stopped using this term and sent out a memo to its developers to temporarily refer to the design language as Modern UI (a name less powerful). Back in August it emerged that Microsoft planned to use “Windows 8” to replace “Metro”, which in my opinion is another weak and irrelevant term that lacks flare and doesn’t stimulate imagination at all. The settlement between Microsoft and Metro AG might be an important development in this case, as Metro is clearly a powerful, good and catchy name for such a popular user interface design.

The bad

Although it might not be a downside, it is in my opinion something Microsoft overlook (on purpose, I believe) – they were quite aware of the fact that the new Windows 8 style is friendlier for tablets than for the actual computers we browse the internet on right now. The style is more accommodating for tablets and touch devices – and although many of us have tablets right now, most of us still use the computer as out main browsing device.

Microsoft focused more on the future – I agree, but you can’t simply ignore the current trends. Microsoft decided to remove the Windows Start Menu, introduced long time back with Windows 95. For some users the transition might be too fast to digest. While I am sure expert users will have no problems finding their way around a Windows 8 computer, how about a novice? Some of them could barely make it through 10 minutes of Windows 7 browsing (which Microsoft branded also as “easy to use”). How would they be able to make use of Windows 8, a total new interface and a total new way of communicating with the computer?

Yes, I agree the Aero interface used a bunch load of GPU resources – but there should have been other ways of putting limits to this. Apple’s OS X looks beautiful and it doesn’t use huge loads of resources. If the Cupertino-based company could do it, so should Microsoft too… And don’t get me started on the battery life, with very few Windows computers out there being able to outdo a Mac. So why ditch the whole Aero instead of improving it?

With Modern UI Microsoft shifted its approach from multitasking and business productivity. And this will be seen in all the “Windows 8” web designs around the internet. Many think there will be a huge difference between the OS interface and the web design style. There will not. The same principles will apply to both of them.

Response

Microsoft generally received positive feedback from the press and beta testers in regards to Modern UI and Windows 8. Most reviews applauded the great focus on beautiful design, typography and content and considered it even better than the “tight, sterile icon grids and Rolodex menus of the iPhone and iPod Touch” (CNET).

Windows 8 on the web

We do not know yet how popular the new style will be on the internet – only history will be able to say this, so we need to wait a bit more to draw conclusions. However, as an operating system interface, Windows 8 style seems to be a very successful competitor for Mac OS X, at least in the long-term future.

I also think the new interface will be quite successful on the web, because people wantcontent in a beautiful wrap. If you are able to combine both of these, you are one step closer to a successful design: and this is the key principle behind Modern UI. Putting the focus on content, while also keeping typography and design elements in mind, is what Modern UI was designed for. So I have no doubt that it will be popular on the internet, but it needs some time. People still need to get a grip of it and learn what’s good about it. Just give it some time and it will come.

Conclusion

If Microsoft understood something from the failures of the past years, it was the fact that they need a new, fresh start. They need to focus on the future more than on the present. They need to be a powerful competition throughout what they do, not throughout what they were fifteen years ago. And “Modern UI” is that new, fresh start. It is the beginning of a new era, the beginning of other companies starting to finally challenge Apple – which is, in the end, good for everyone, because competition brings the best out in every and each one of us.

“Windows 8 style” is clearly the future: minimalistic, focuses on content and beautiful user interface and is touch-friendly. Now let’s see how well people receive it and draw some further conclusions in one or two years. Until then, I only have three words:Tremendous work, Microsoft!

Modern UI Style Examples

Below can you see some examples of the new interface design on the internet. Not all of them are actually used, some are just made for fun, but they give a good insight of how websites and web applications could look in the future.

MetroTwit

My Kind of Phone

Modern UI Style Design by Microsoft

7:32:00 AM

What’s Modern UI?