If you saw any of the Build videos from two weeks ago, then you would’ve heard the term ‘Metro’ bandied about a lot. Metro is the whole design language behind Windows Phone, and is a big part of the future of Microsoft, and is a real departure from not only the legacy of design within Microsoft, but stands out from current trends in interface design across other systems.
However, to understand it completely, we thought we’d do a quick dive into the design principles behind Metro and where it came from.
Bauhaus
One of the origins of Metro was in Bauhaus, the German modernist school of design. At the essence of the Bauhaus school of thought is a fierce reductionism. It’s about stripping back all the adornment and flair, and reducing it to the function. Bauhaus was a reaction to over adornment and over decoration (which is reminding me of Elliot Jay Stocks’ talk about HTML5 and CSS3 flair) that was happening before the industrial revolution. With the industrial revolution, things had changed. However, the people who were designing and making were using yesterday’s design thinking and yesterday’s techniques. Yesterday’s techniques cannot work today.
International Typographic Style
The Bauhaus movement has had a monumental influence on design ever since. However, one of the areas it’s had the most influence was typography. The International Typographic Style, or Swiss Typography Movement, came directly out of the Bauhaus school of thought, where the focus is on the functional, with using clean, crisp typography. It’s about flat colour, beautiful hierarchy and symmetry.
We see this style a lot in every day life. In airports, underground lines, train lines, bus stations the style is used constantly, as it is clear, crisp and extremely legible. The reason International Typographic Style works is because of ‘Way-finding systems’. That is, using clean, crisp, clear information to get information across as quickly and accurately as possible. Our lives are constantly in motion, so we need to have to be able to glance at these kind of signs, get the information and keep going.
Emotional impact through motion
When it comes to emotional response, the first point of call is usually the sound. When you hear the opening bars of Star Wars, you immediately get an image in your head. A black screen. Rolling, yellow text. However, the same can be achieved through the use of type and motion. Looking at Saul Bass‘s work on films like Man With the Golden Arm or North by Northwest, you can see the power that kinetic typography can have. Looking below is a great example of a more modern approach to title design, influenced by Bass, can be seen in the Catch Me If You Can titles (another great example is in Tim Minchin’s Storm). This kind of movement brings the text and shapes to life, taking them from being plain symbols to something that can elicit an emotional response.
Wrapping up
In essence, the inspiration behind the Metro design can be boiled down to three points:
- Reductionism, making function beautiful
- Beautiful, clear, clean, crisp typography. Bold use of colour.
- Making an emotional connection. Being fast and fluid through motion design and cinemetography.
or in one point:
- Make something clear and beautiful, then bring it to life.
If you want to find out more about the Metro design language for Windows Phone and Windows 8, then I’d suggest having a look at the talk given by Samuel Moreau, the director of UX design and research for Windows and Windows Live, on ‘Designing Metro Style: principles and personality‘ that was delivered at Build last week.
[...] [...]