Microsoft Design Style Inspirations - Microsoft Design Style Series Part 2

Brent Schooley / Wednesday, August 22, 2012

In order to truly understand something it is often important to understand where it originated.  This is especially important when the subject at hand is design.  Almost everything designed today has its roots somewhere in the past.  The Microsoft design language is no exception.  In this article, I will introduce the three major design influences that contributed to the formation of the design language used in products ranging from the Zune all the way to Windows 8.

(Note: This post is the second part in a series.  If you haven't read the beginning of the series, you can find it here: What is Microsoft design style?)

Inspiration #1: Bauhaus

Bauhaus Book

Bauhaus was a design school in Germany founded by Walter Gropius that ran from 1919-1933.  In a time of great artistic exploration and experimentation, many designs started to favor form over function.  Designs like this feature heavy adornment and contortion of shapes for the sole purpose of looking fancy.  The goals of Gropius and the other members of the Bauhaus school was to focus on form and function working together holistically.  What this means is that the designs they came up with were simple but functional.  When a design was being created, the goal was to distill the concept down to its core and remove all extraneous elements.  When you do this, you end up with a design that directly conveys the function without any distracting bells and whistles or adornments.

…[a design] must be true to itself, logically transparent, and virginal of lies or trivialities.

Walter Gropius

Inspiration #2: International Typographic Style / Swiss Style

Swiss Design

International Typographic Style is a design style that originated in Switzerland in the 1950s.  It should come as very little surprise, given the name, that a major emphasis of International Typographic Style is typography.  Not just any typography though, clean and readable typography. The fonts used are sans-serif fonts such as Helvetica. The designs tend to feature a bold use of color as well.

Another strong component of the Swiss Style is the use of grid layouts.  Grid layouts are used by designers to add structure and organization to their designs.  Using vertical and horizontal (and sometimes diagonal) lines, a grid layout creates a structure along which elements can be placed.  Designs created using a grid layout have very crisp alignment which aids in readability and understandability.  International Typographic Style is employed heavily in signage.  Road signs, airport and railway (Metro!) signage, and even bathroom signs all stem from this style.  

A major portion of many designs in this style use either photographic imagery or iconography.  When photography is used, it is typically full-bleed and used in lieu of illustration.  When iconography is used, the icons tend to be simple and monochromatic.  The icon should cleanly and clearly represent the concept.  An example of this would be the male and female icons that you'll find on most bathroom doors or the airplane icon used at airports around the world.

Inspiration #3: Cinematography and Motion Design

The final major inspiration for the Microsoft design language is cinematography and motion design.  This is probably an inspirational piece that is best explained visually, but setting the stage with a few concepts never hurt.  Once upon a time, the opening title sequences for movies were highly artistic and used lots of animation to set the scene for the movie that a person was about to watch.  One of the masters of this technique was Saul Bass.  One of my favorite quotes by Saul Bass is:

My initial thoughts about what a title can do was to set mood and the prime underlying core of the film's story, to express the story in some metaphorical way.  I saw the title as a way of conditioning the audience, so that when the film actually began, viewers would already have an emotional resonance with it.

It is this emotional connection that cinematography and motion design create through the use of animation that is at the heart of why it is an inspiration for the Microsoft design style.  I mentioned that this concept is best conveyed visually, so here is a great example showing off some of Saul Bass' greatest work: click here to view example on Vimeo

Wrap-up and a look ahead

In this post I briefly introduced the concepts from the design world that heavily influenced the Microsoft design language.  In the next post I'll begin to introduce the Microsoft Design Principles with the first: Pride in craftsmanship.  As the series moves forward, I will refer back to concepts introduced in this post and how they apply to Windows 8 application design.

If you have any questions or comments, please feel free to comment below or find me on Twitter @brentschooley.  You can also reach me via email at bschooley@infragistics.com.