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.

Modern UI

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 something Microsoft lacked for a long period of time.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

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.

Key

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.

Metro UI

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?

Phone

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.

Web

I also think the new interface will be quite successful on the web, because people want content 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

Metro Twit

My Kind of Phone

mkop

CoffeeStore

CoffeeStore CoffeeStore

Reddit Redesign Proposal

Reddit Redesign Proposal
Reddit Redesign Proposal

The Verge

The Verge

Xbox

Xbox

MetroStyle WordPress Theme

MetroStyle WordPress Theme

Christian Vasile is an enthusiastic Romanian web designer currently living in Denmark. You can follow him on Twitter at @christianvasile or visit his web portfolio at christianvasile.com.

Newsletter

12 Comments
  1. Joel Acevedo Nov 8, 6:32 pm

    I like the interface, colors, font face… but I agree that this OS works better for touch screen devices. The change is too drastic to what we have right now. I do like Windows 7 and I will not switch at the moment.

    Reply
    +3
    • Christian Vasile Nov 9, 5:57 am

      If history taught us something, that is how Microsoft launches operating systems. After a solid one, it comes a failure. It is a transition. In my opinion Windows 8 might be a transition to something else too. Vista was a transition between XP and 7. Millenium was transitioning between 98 and XP. I believe switching to Windows 8 should be postponed for as much as possible, because I think Microsoft has something very solid working on right now.

      Reply
      -3
      • James Isles Nov 9, 1:10 pm

        Hidden due to low comment rating. Click here to see.

        Reply
        -6
        • Chris Kluis Nov 13, 3:47 pm

          As a web designer – you should be thrilled with Windows 8. You can now build native apps in html/css/javascript and deploy them via the app store for both the desktop and phone.

          Windows 8 is a godsend for web designers.

          Reply
          +9
  2. Sean Patrick Nov 8, 7:59 pm

    Clean, fresh and clear. It’s where the web needs to go.

    Reply
    +7
  3. Sean Nov 9, 2:00 am

    Granted I have yet to actually install and use Windows 8 but I know that just a little while back other people were not too happy about not having the old Windows Start button and the Aero interface. At that time Microsoft said that it was still there but was not the default interface. So unless something changed since then the Aero interface should still be there under the hood though you may have to do some research to figure out how to make it the default if you so wish.

    As for the “beauty” of the interface on Macs I do not agree. I currently have to use a Mac for my job on a daily basis and really I don’t see any beauty in it’s interface. In fact I prefer my Windows Vista (and yes I am running Vista at home because I have no problems with it). Also as for the mac battery life that’s something that’s puzzled me for a very long time. I had a macbook pro 15 inch for 3 years and even when it was brand spanking new I couldn’t get the battery to last more than 2 hours and by the end I was lucky to get it to last much more than an hour. And it wasn’t just that macbook that didn’t have a long battery life. I had friends that also had macbooks and various other Apple products and each of them couldn’t get diddly squat for battery life out of their products. I’m not saying that Windows products are better on battery life but they’re not any worse either.

    Reply
    +2
    • Christian Vasile Nov 9, 5:55 am

      Hi Sean, thanks for the great input.

      I have to disagree with you on the Mac-problematic, unfortunately. I believe there is a specific beauty to see in Apple products, both from an industrial design point of view, and from a user interface point of view. Few computers running Windows can match that. They are just so simple and they work. My Mac crashed once in the 10 months I had it. My former Windows computer (a powerful Sony Vaio laptop) crashed at least thrice a week because I was playing Football Manager (a game that requires few things). I just wasn’t pleased with the computer I had, nor with the ones that I had before the Mac. Since I got the MacBook Pro, I know I turn it on and IT WORKS! This is basically what I am interested in – this is where the beauty lies.

      Regarding battery life, sure the battery won’t hold 8 hours if you do heavy photo editing in Photoshop for 3 hours. The battery is not supposed to be used for this kind of activities. When I am on battery, I dim the lights as low as possible (without getting out of comfort), I do not use keyboard light and I quit all the programs that I normally just leave running in the background. My mac battery holds to at least 5 hours of reading a book on the Kindle and at least three hours of seeing video (not HD though, I didn’t try it yet) – so it is good enough for me :)

      Reply
      -2
      • Anonymous Person Apr 8, 8:45 pm

        I disagree with you on the Mac OS vs Windows crash problem.
        First of all, Mac OS has far fewer 3d games, and here you are giving the worst example possible. If Football Manager would also work on a Mac (without virtual machines like BootCamp or layers like Crossover), then and only then would you have the right to compare the two. Always do apples-to-apples comparison.
        Let me explain to you the dilemma of OS crashing. Apple developes its OS for a limited number of devices , so that makes the job a hell of a lot easier than Microsoft’s job of making Windows for just about any x86 or x86_64 device out there. Then, there is the issue of drivers, that put actual responsibility on OEMs, so don’t blame Microsoft for it. Microsoft offered freedom for OEMs to compete, Apple wanted to just push its own shiny stuff without allowing others OEMs in.
        The interface of both Microsoft and Apple operating sistems originates for Xerox Parc, and you and I both know that both Apple and Microsoft used ideas of smaller companies in designing their OS.
        Apple under Steve Jobs created a cult and very stupid fanboys. Microsoft did too, but at least have a better selling point.
        Many people tend to belive that because Apple computers are being used in colleges and universities, supposedly they are better because they are being utilized by proffessionals and students.WRONG. That was the market that Steve Jobs tried to penetrate and dominate. Microsoft wanted to penetrate and dominate the business and consumer markets instead. SO there is another solved mistery.

        Both Apple and Microsoft made easy to use and “just works” operating systems. You have to be really stupid to believe one is superior to the other, when they intend to appeal to different types of people, one to the education system and casual users, the other to businesses , gamers, etc. Each one only works well for the right kind of people, and neither of them works for everyone and every situation. For example, Linux tends to work better for servers and supercomputers crunching big data.
        If you want to discuss more about this with me, you already have my email address from this post.

        As for battery life, it depends on many variables, INCLUDING but not limited to battery capacity, power consumption of the screen, power consumption of motherboard, cpu, etc., type of activity on the laptop, type of Power Profile used, etc. AGAIN, only compare apples-to-apples. They are quite not the same.

        Now, I’m neither an Apple fanboy, nor a Microsoft or Linux or any other. I tried many devices running Windows, Windows Phone, Linux, Android, Mac OS X, IOS, and I can tell you don’t have any strong experience even with Mac OS X. Windows 8 is just half-baked to ease the transition a bit. You’ll see it gain more traction over time. Apple lost their visionary marketing and aestethic design guru Steve Jobs, and that will probably-not certainly- its downfall. Time will tell. Google will surprise everyone and Android will be important, and Microsoft just has to iron out and complete the transition and it may as well surprise everyone. Modern UI has great potential if taken to a slightly higher level.

        Reply
        +2
        • Anonymous Person Apr 8, 8:50 pm

          Forgot to leave a nice question for you. Tell me: What has Apple really changed in its interface throughout time? Has it innovated anything? Guess not. Jobs was good at stealing one idea from here, one from there and boom: there’s your ecosystem. But it hasn’t changed since the 90s. So I think Microsoft may be well ahead of Apple. Even Google is ahead, and poses serious problems for Microsoft in the near future.

          Reply
          +1
  4. Andrei Nov 9, 10:11 am

    “While I am sure expert users will have no problems finding their way around a Windows 8 computer, how about a novice?”
    They will learn. Pick up a book, or some internet tutorials and learn! No one was born with the knowledge. It’s easy to say that the interface is the problem, without having the intention of learning it’s principles.

    Win 8 is an excellent interface, simple easy to use and fast.

    Reply
    +2
  5. Pritesh Desai Nov 19, 4:14 am

    I love the new design. It is minimal and beautiful.

    Reply
    +3
  6. Daisy Bono Nov 26, 5:32 pm

    I wonder how microsoft have come up to this kind of design. I appreciate the creativity behind it. Thanks for sharing this beautiful design.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters