MIX10: Windows Phone UI and Design Language

In their Windows Phone UI and Design Language presentation at Microsoft’s MIX10 conference, Albert Shum and Michael Smuga discussed the principles behind the Windows Phone design and how developers can take advantage of the phone’s user interface in their applications.

The Windows Phone design team started by looking at what people do in real life. They were really inspired by transportation graphics, which are: grounded in good design that lets people find their way, simaple, and universal. The influence of transportation graphics is why the Windows Phone UI is codenamed “Metro”. Bold colors, simple, but out of the way when not needed –like transportation graphics.

Metro is our design language. It’s modern and clean. It’s fast and in motion. It’s about content & typography. And its entirely authentic.

Metro Principles: way to interpret the language and make it yours.

Clean, Light, Open, & Fast

Feels fast and responsive

Focus on primary tasks

Do a lot with very little

Fierce reduction of unnecessary elements

Delightful use of whitespace

Full bleed canvas

Celebrate Typography

Type is beautiful, not just legible

Clear, straightforward information design

Uncompromising sensitivity to weight, balance, and scale

Alive in Motion

Feels responsive and alive

Creates a system

Gives context to improve usability

Transition between UIs is as important as the design of the UI

Adds dimension & depth

Content, not Chrome

Delight through content instead of decoration

Reduce visuals that are not content

Content is the UI

Direct interaction with the content

Authentically Digital

Design for the Form Factor

Don’t Try to be What it’s NOT

Be Direct

Application Tips

The Metro user experience focuses on the individual and their tasks and helps organize information and apps for them.

Panoramic canvases allow developers to break through the frame of a single viewport.

The team designed the Windows phone for “life maximizers” that: value technology, are busy professionals, interact with friends and families. They used two personas that represented this segment: Anna and Miles.

Red threads are the brand principles that are being delivered to the user. For Windows Phone they are personal, relevant, and connected. These can be applied to applications as well.

The visual design of applications for the Windows Phone should be a balance of the Metro style and a company/app’s brand.

Use motion but remember pacing is important: the more you use it, the less special it becomes.