Jeff Huang Team : Web Design Tags : Web Design User Experience

How Microsoft dominates the modern digital industry

Jeff Huang Team : Web Design Tags : Web Design User Experience

(Metro UI Concept by Microsoft, 2010)

I'll always remember how I was blown away by the Window's Phone 7 and its Metro UI design guideline a few years ago. For the past few years, Microsoft has adopted a whole new design language to a great extent on their products and branding. And this philosophy has influenced the industry.


Early period

The new design language has been adopted in Microsoft’s earlier media player, Zune, in 2006.  The Microsoft design team decided to reduce the interface, with more focus on Typography and less on UI Chrome. These principles were carried over to the Windows phone in 2010 and became the official Metro UI Guideline in 2010. Which at that time, made other companies and websites look very traditional. 


Inspired from the past

The Microsoft design team have revealed its design is based on three distinct pillars on their updated design guide and renamed it "Modern UI":

The Bauhaus
This iconic design school promoted a powerful design philosophy: Remove anything that's superfluous. 

International typographic style (Swiss Style)This style promotes cleanliness, readability, and objectivity as its central themes. 

Inspiration from pioneers like Saul Bass, who used motion along with type and design to create beautiful title sequences for films.



Microsoft’s design philosophy has influenced other companies and is evident in many designs throughout devices and web. 

Focus on Typography

Flat Design (Authentic digital)
A contrast to the skeuomorphic design. Instead of bringing a realistic calculator or address book into our devices, it should be designed in a digital way.

Grid system
The grid system is well used in the concept as well. They use a grid system layout - an interface which emphasises the content in a way which allows the user to easily scan through and dive into the content they want to reach.

Content first
Reduce anything from a page that is not content. Let content speak, not just be decoration.