courses I tutorials

Explore different tutorials to get hands on with Silverlight and Expression Blend across a wide array of topics in a short time.

school.tutorials

Windows Phone Series

This series of tutorials includes a walkthrough of the standards and design elements that embody the Windows Design.

More tutorials...

Design Language of Windows Phone

When given the chance for a fresh start, the Windows Phone design team drew from many sources of inspiration to determine the guiding principles for the next generation phone interface. Sources included Swiss influenced print and packaging with its emphasis on simplicity, way-finding graphics found in transportation hubs and other Microsoft software such as Zune, Office Labs and games with a strong focus on motion and content over chrome.

Not only has the new design language enabled a unique and immersive experience for users of Windows Phone; it has also revitalized third party applications. The standards that have been developed for Windows provide a great baseline, for designers and developers alike. Those standards help them to create successful gesture-driven Windows Phone experiences built for small devices.

Guiding Principles of the Design Language

There a few core concepts of the design language which we’ll outline here. Each concept, or guiding principle, contributes to the look and feel of the whole system as well as the layout and frequency of elements used within the interface.

What's covered in this video:

  • Design inspiration
  • Guiding principles of the design language
  • Examples of each principle in action
watch video

Principles of Design

Typography. Type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content.

Motion is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, extra dimension and depth and improves the perceived performance of the whole interface.

Content not Chrome is one of the more unique principles of the Windows UI. By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to the smaller screen size and gesture-based interactions.

Honesty. Design explicitly for the form factor of a hand held device using touch, a high resolution screen and simplified and expedited forms of interaction. In other words, be “authentically digital”.

Unique Components of the Interface

Following the guiding principles of the Windows style UI, the Windows Phone design team has come up with more than a few unique interface components. In this section you will see different Windows Phone UI components in action.

What's covered in this video:

  • Fonts, colors and themes
  • Interface navigation components
  • Application level components
watch video

Signature Examples of Motion

At this point, you have seen examples of the signature animations in Windows. In this section, you will see each animation singled out, allowing you to see how the system of interactions is created and how the motions adhere to the guiding principles. Not only will this continue to illustrate the Windows design language but it will also help you design your use of motion in your own applications.

What's covered in this video:

  • Taking a look at interface level animations such as Live Tiles
  • Application level animations such as Swivel and Zoom
watch video

Conclusion

In this lesson, an overview of the design language of Windows Phone was provided. After a brief background, the guiding principles were explained and examples of the principles in action were given. You were also given a look at the unique interface and application level components and the signature animations that comprise the Windows Phone interface.