[This is the English version of an article I wrote for the Netzwoche publication in Switzerland. This is part 2 of a 3-parts article about Metro. The original article in German can be found online on the Netzwoche website.]
With Windows 8, Microsoft is going to potentially install their new design language called Metro on a massive amount of computers of all shapes, from thin low-powered slates to full scale PCs. However Metro was not born overnight and in fact a lot of research was put into it. In this article we will discuss the origins of the Metro design language, the inspiration that was the source of it all.
A bit of history
Design, much like art, is evolving through a series of influences. In the case of the Metro design language, a few schools and movements have helped to shape it.
Bauhaus
Bauhaus was created in the 1920s by architect Walter Gropius in Germany. It is an ambitious movement that wanted from the start to integrate many aspects of life: graphic design, industrial design and later architecture. This school of design is characterized by a strong simplification of the object: avoid excessive decoration and frills, and instead concentrate on its functionality. This is underlined by the motto: “Form follows function”, meaning that the functionality of an object should govern its appearance. Anything in the form of the object that is not directly related to the function it fulfills is superfluous and should be omitted.
The world is changing
Bauhaus was created at a point in time where the world was changing tremendously. A world war and the great Spanish flu had just ended, which had cost many millions of lives. Nonetheless, this period between the two World Wars was marked by euphoria and a feeling of a new beginning.
The 1920s were also a time of transition; people went from manual work and artisanship to a society mostly dominated by industrialization. Objects that were earlier routinely created by hand were now made by machines. All this influenced the design proposed by the Bauhaus school.
Pure and functional
Be it in architecture, graphic design or industrial design, the characteristics of Bauhaus are purity and simplicity. For instance, notice how the items on Figure 1 are purely functional: there are no excessive decorations, no icons or gradients, nothing that confuses the message or the function.
Figure 1: Bauhaus inspired Industrial design, Architecture and Graphic design
This philosophy of “to the point” and “no nonsense” can be found in the Metro design language as well. In Metro, we speak of being “authentically digital”. Metro-inspired UI does not show excessive shadows, textures or glass effects that are found in other systems. Instead we acknowledge that the computer screen is not a simulation of nature, and we remove the useless decorations, concentrating instead on the function of the UI.
Swiss typography
Another important inspiration for the Metro design language is Swiss: the typography created in our country in the 1950s and refined since then plays a major role in Metro. It is quite obvious to anyone who used a Windows Phone that Metro puts a lot of emphasis on readability and type. It is not rare to use text blocks as command actuators instead of buttons. In fact, most controls have a simple and pure design, where typography plays a central role.
Purity, balance and readability
Fonts inspired by Swiss typography put readability in the forefront. Of course, this is especially true for fonts used on a computer screen, and probably even more on mobile devices. When used on smaller backlit displays, in broad daylight, readability can be a concern. This is why extra care must be put on the font used on these devices.
Most notably, anything that distracts the reader from the primary function of the letter must be avoided. This is very similar to the principles of Bauhaus that we discussed earlier: Form follows function, no frills, no excessive decoration. This is why the fonts created by the Swiss typography movement are sans-serif: The “serifs” are the small details, often a small horizontal or vertical dash, located at the end of letter segments. Serifs are quite popular in fonts used for print, but for extra legibility in Windows 8, sans-serif fonts are preferred, like the Segoe font family designed by Microsoft specifically for user interfaces, and used in Windows Phone, XBOX, Windows Media Center, and of course Windows 8.
Figure 2: Serif font, Sans serif font and font weights Motion design
Another strong influence of the Metro design language is motion design. Often used in movies, for example in the opening or closing credits, motion design is very useful for user interfaces running on computers, and most especially for touch-based UI.
By using subtle and fluid animations, the user interface can guide the user and hint what action needs to be taken next. This is especially true when the screen is fast and responsive: as soon as the user touches the screen, animations are played to help discover the features. A good example of this is the lock screen on Windows Phone: When the user presses the Windows button while the screen is locked, a short animation “bounces” the lock screen, which hints to the user that he should use his finger to pull the lock screen up. Similarly, when the Windows 8 device is locked, passing your finger on the lock screen will move the picture according to the finger’s vertical movement. The key here is for the hardware to react fast enough so that the relationship between the finger’s movement and the action on the screen is absolutely clear.
Kinetic typography
Many movies rely on kinetic typography, i.e. “text in movement” to introduce the viewer to the movie, in the opening credits. Some excellent examples can be found in designer Saul Bass’ work, for instance Alfred Hitchock’s movie “North by Northwest”. Other more recent examples can be mentioned, for example the introduction to “Pulp Fiction” by Quentin Tarantino, or the excellent intro by visual artists Kuntzel and Deygas to Steven Spielberg ‘s movie “Catch me if you can”.
Kinetic typography is also very pregnant in the Metro design language: For example in Windows Phone, the usage of the panorama control creates this effect of fluid motion. Horizontal motion is also very important in Windows 8, especially in slates used with touch in landscape mode. Of course the vertical motion used in list controls is still available, and combining both creates a very enticing user experience, just like motion design creates a feeling of excitement for the viewer before the movie starts.
Transportation signage
Like the name shows, Metro got some inspiration from the signage you see in airports, train stations, undergrounds. This universal design language relies heavily on typography and simple icons, often emphasized by plain bold colors. Because it relies on the principles we enumerated before, this design language is very efficient and to the point. It helps travelers to immediately understand where they need to go next, wherever they are, and regardless of the language spoken locally. Similarly, the Metro design language gives a feeling of hominess to the user.
Figure 3: Transportation signage is universally recognized
Additional references
For additional information on the Metro design language, these two videos should give you a great head start:
Conclusion
Understanding where the Metro design language comes from is a good starting point to understand how it can enhance your Windows 8 application. Microsoft’s ambition is to create a consistent user experience. For the end user, this consistency has big advantages: The user does not have to constantly learn new design concepts. Instead, he reuses what he already learned in other applications and in the operating system itself.
As we saw, Metro has core values, taken from the movements and schools it inspires itself from: Purity, simplicity, balance, fluidity. Those concepts help creating a beautiful user experience and to make the user feel at home.
Print | posted on Friday, April 27, 2012 9:52 PM