Datasheet

important role alongside weight and style when applied to text. Unlike in a lot of software systems,
where it is almost an afterthought, the use of different typography in signs can dramatically affect
the readability and thus the effectiveness of those signs.
Using transportation signage as a base, the Windows Phone team collaborated with other teams
within Microsoft in order to fl esh out the design language. For example, the use of motion and
animation in the Xbox, the use of navigation via content on the Zune and Media Center, and the
intimacy of the ZuneHD interface were all sources of inspiration for Metro.
The resulting Metro design language is about being modern with a clean and fast user experience.
It ’ s about delivering an experience that is in motion and all about the content. Being authentically
digital in design and using clear typography are also important throughout the Windows Phone
experience.
Principles
In order to build a consistent experience across the Windows Phone platform, it was important not
only to have a concept of a design language, but also to have a set of principles that would govern all
decisions made in constructing the user experience. The following are the Metro design principles:
Clean, light, open, fast
World class motion
Integrated hardware and software
Content, not chrome
Soulful and alive
Before you learn more about the Metro experience itself, take a moment to review these principles
and more importantly think about how they can affect the way you build the user experience for
your application. The fi rst principle talks about the experience being “ Clean, light, open, and fast. ”
Although this doesn ’ t limit itself to certain aspects of the interface, you can apply this principle
by making sure your application isn ’ t cluttered with icons and images and that any action the user
takes is fast and responsive.
Just because screens on mobile phones have gotten larger over the last couple of years, this doesn ’ t
mean that you can pack more information onto a single screen. Doing so makes the content hard to
read and diffi cult to navigate. Build a clean and light interface that displays only the important and
relevant information to the user. This will necessitate larger and clearer fonts, which is where rich
typography becomes important. The Metro design language celebrates typography and provides you
with some rich fonts out - of - the - box for making your applications clear and easy to read.
The introduction of touch screens brought with it a need for haptic, or at least responsive, feedback.
If you imagine touching the water in a glass or on a pond, you can immediately see the water
ripple out from where you fi rst touched the water. Instantaneous feedback, such as the changing of
background color or a slight vibration of the device, gives the impression that the application is alive
and awaiting the user ’ s instructions. You will notice that motion is built into the core platform. The
Start is made up of tiles that dynamically update and respond to being touched. Transitions provide
➤
➤
➤
➤
➤
Metro Design Language
❘
7
CH001.indd 7CH001.indd 7 10/6/10 9:13:13 PM10/6/10 9:13:13 PM