Select Page
Exploring Microsoft’s Modern Design Language

Exploring Microsoft’s Modern Design Language

The “Modern” design language – formally known as “Metro” is Microsoft’s “new” set of design guidelines which has been integrated across many of their software products. Microsoft is just now starting to really push this modern design language as a standard within the company, we can actually see hints of it in some of their older applications like Windows Media Center and the Zune music player – both of these products started the trend for Microsoft to start focusing on elegant design, typography and animation.

Zune HD

Where did this Modern design language come from?

It’s actually influenced on three external foundations:

  1. The Modern Design Movement (The Bauhaus)
  2. International Typographic Style (Swiss Style)
  3. Motion Design

The Modern Design Movement (The Bauhaus)

The Bauhaus movement was geared towards the removing of any extra decorations and ornaments and leaving the focus solely on the purpose and ultimate functionality. This approach to design is distinctly different from what Apple created with iOS which has for the most part relied on a more Skeuomorphism approach. An approach that tries to replicate real world imagery and functionality through realistic ornamental elements.

Here is a good example of from iBooks that shows a Skeuomorphic approach to design with it’s wood grain background, shelves, heavy use of shadows and of course actually showing what looks to be books on the shelf.

Skeuomorphism in iBooks

Take that compared to Kobo Reader on Windows Phone, you can se a striking difference between the two images – the popular new term for this style is “Flat”, we are starting to see many other companies adopt this Flat style. Google’s Android is probably the biggest company outside of Microsoft to adopt this new style – I have to commend them for making their UI much more consistent and clean through flat design.

Kobo Reader

I’m not going to get into the debate on which is “right” Skeuomorphism or Flat Design, I think they both have their advantages and disadvantages and the user simply needs to pick a style they like and join a platform that is attractive to them. I’m a big fan of the flat design style I tend to design towards the functionality rather than an ornamental style.

International Typographic Style (Swiss Style)

The Swiss style emphasizes cleanliness, readability and objectivity with a strong focus on layout and grid systems and the use of bold flat color. You have seen this style of typography almost anywhere that you go, it is used in signage at airports, bus stations the Olympics and many other information dense environments.

Swiss Style Typography

The elegant use of typography in Microsoft’s design language is one of the main reasons I love designing on their platform. It used to be that great typography was only for print design, Microsoft was able to bring it into the digital realm in an aesthetically pleasing and functional way.

As you can see below, Windows 8 and Windows Phone applications are based very strongly on the grid, you can read a lot more about how Microsoft uses the grid here: Laying out an App Page

Grid Unit Structure
Windows 8 Grid Structure

Application Grid Template
Visual Studio 11 Grid Template

In addition to the grid structure, Microsoft has also used big bold colors in their new Modern environment.

Windows 8 Start Screen
Windows 8 Start Screen

Color gives the sense of emotion, attraction and makes it feel more organic as well – especially when the color is used on the hardware itself.

Windows Phone
Nokia Phones

Motion Design

The final and certainly not the last, Motion Design is the third external influence of the Modern Design Language. Similar to Typography, we see motion design everywhere – from the Television and Movies we watch, to digital billboards and scoreboards and of course animations in the applications we use on our phones and computers.

The best Motion design in my opinion is motion that is used in a subtle and simple way, whether it’s a link background color fading in and out as you mouse of it or as various UI elements slide or flip into place as you use your phone.

Wrapping Up

When you take these 3 external influences and pair them up with Microsoft’s five design principles (Pride in Craftsmanship, Fast and Fluid, Authentically Digital, Do More With Less and Win as One) you get a very strong foundation and understanding of how to design for Windows 8 and Windows Phone. We’ll dive deeper into the 5 design principles in our next exploration article coming up soon.

Check out our initial Exploration Introduction Article: Exploring Modern App Design and User Experience

Confused about Windows 8? Let’s hear your questions and comments!

Confused about Windows 8? Let’s hear your questions and comments!

We keep hearing about Windows 8 being “confusing” or “hard to use” or simply a “bad” operating system by journalists and other people. We completely disagree and think too many people are jumping to conclusions before really understanding or experiencing Windows 8.

So, we want to know what is causing you problems, what are your concerns, why do YOU think it’s bad?

  1. What have you heard about Windows 8?
  2. Have you actually USED Windows 8?
  3. What frustrates you about Windows 8?

We want to help eliminate the FUD going around about Windows 8 and hopefully clear up some confusion users may be having.

Please keep the conversation civil, this is not a conversation about “Which OS is best” or about name calling. It’s about Windows 8 and your experiences with it.