The Microsoft design language

The Microsoft design language | Build 2012 | Channel 9:



5 Keys elements of "Metro" design


1. Typography
Metro is founded upon clean beautiful typography.
Proper color, weight, and size can help eliminate all of the chrome, color, and graphically over manipulated design elements. Even hierarchy can be easily and cleanly shown with just typography. It is not just about typography, it is about the content.

2. Authentically Digital (Inversion of Focus)
With Metro, the user is not focused on the chrome elements such as menus, buttons, panels, and color images with in the chrome that are shaded, the user is focused on the content.
With Metro, there has been an inversion of focus. Great interfaces get out of the way.

3. Spacing with thoughtful reduction
Spacing is important—and made possible with the removal of all of the chrome and over-manipulated design elements. Even if there is room for another button or feature, it certainly does not mean that you should add it. In fact the opposite, you should challenge every element. It takes focus. From a visual design perspective, no longer do we need chrome on top of chrome nested in chrome.

4. Motion (fast and fluid)
Motion, used properly, can create a fun fluid interface. It brings the experience to life. In my view, motion is more important than graphic design. Metro uses animation in the right places and for the right reasons:

5. Asynchrony and intelligence
It is easy to overlook the importance of this element just as Steve Jobs admittedly missed object-oriented programming when he visited Xerox Parc where he became inspired to produce the Mac. It is easy to miss Async Programming in the same way.