This section covers design-oriented content
that a developer will find very useful. Developers are an integral part to the
design/development cycle, which is why it is strongly encouraged that
developers embrace design concepts as much as possible to help create
better UX beyond designer mock-ups.
1. Design Approach
The design team at Microsoft refers to the "design
language" of Windows Phone 7, codenamed "Metro," when describing the
approach they took when designing the Windows Phone 7 UI. The Metro
codename is inspired by the graphics found in transportation systems
worldwide, which rely on big, bold, beautiful graphics and text to
communicate to the "end-user" or traveler where they need to go. It is
inspired by other sources as well, such as Zune, video games, product
packaging, and the like, which focus on these key principles:
Light and simple:
Focus on primary tasks, achieving a lot with very little (little user
effort and few phone resources, steps, and so on). Use whitespace to its
full advantage.
Typography:
Focus on beautiful, not just legible, with sensitivity to font weight,
balance, and scale to communicate a sense of hierarchy for the content.
Motion:
Responsive and alive UI. Transition between UI is just as important as
the design of the UI. Create an animation system, not just transitions.
Content, not chrome: Reduce visuals that are not content. Navigate via content itself.
Honest: Design for the form factor, keeping things simple and direct. Be authentic. Content makes the UI beautiful.
Probably the most important design approach not to take
is to simply port an iPhone or Android application to Windows Phone 7
without modifying the user interface to match the platform. The
application will look odd and out of place if it does not at least use
the default templates for the built-in controls and font styles for
text. In the next section I cover the great design resources available
to help you build an authentic Windows Phone 7 user interface, whether
you are creating a new application or porting an existing one.
2. Design Resources
The Windows Phone 7 documentation includes several
designer-oriented resources to help generate a beautiful user
experience. If you are new to Windows Phone 7 design or development, you
will want to review these resources.
2.1. Windows Phone Design System – Codename Metro
The Windows Phone Design System – Codename Metro is available here:
http://go.microsoft.com/fwlink/?LinkID=189338
This document describes what the product team calls
its design language: seven areas of differentiation, and "red threads,"
or guiding principles. The user experience of Windows Phone 7 is partly
inspired by the image of the simple and effective communication style
provided by metropolitan public transportation system signage as shown
in Figure 1.
The product team describes Metro as
"...our code name for our design language. We call it
metro because it it's modern and clean. It's fast and in motion. It's
about content and typography. And it's entirely authentic."
There are key points to take notice of in this
description. "Modern and clean" means an application should provide just
what is needed to get the task done, whether that task is to provide a
movie, the news, or a weather forecast.
"Fast and in motion" means anything other than snappy
performance is unsatisfactory. While this may seem obvious, the key
here is that a user's perception is what's important. No doubt some
tasks take time, so the key is to provide animation and indicators that
help shape the user's perception that the application is responsive.
"Content and typography" means that the focus of the
application is on the content, not application chrome. Navigate via the
content with touch instead of a scroll bar is one example. Typography is
incredibly important, so much so that the design team created a special
font type for Windows Phone 7 called Segoe WP that looks great onscreen
and is pleasing to the eye. Finally, "authentic" means that the
application does not try to do more than what it is.
.2.2. UI Design and Interaction Guide for Windows Phone 7
Here is a link to the UI Design and Interaction Guide for Windows Phone 7:
http://go.microsoft.com/fwlink/?LinkID=183218
It cannot be overstated: this document is a must-read
for both designers and developers. It covers all of the user experience
customizations, input methods, and controls to help developers and
designers understand how to build a great looking Windows Phone 7 user
interface.
Reviewing this document will help you combine Metro
with your company's brand in the best way, resulting in an authentic
user experience that is true to your brand and Windows Phone 7. Figure 2 is a page from the document with annotations.
The UI Design and Interaction Guide for Windows Phone
7 v2.0.pdf document prints out in a large format and is best viewed on a
large monitor. Each section provides a topic item, such as "Application
settings" (as shown in Figure 2-2).
It displays an image and textual context for the topic item, along with
guidance for designers and developers with do's and don'ts. As far as I
am concerned, this document is required reading for anyone who designs
or develops a Silverlight-based Windows Phone 7 application.
2.3. Application Icons
Windows Phone 7 design resources includes a zip of
icons to use directly in your application or as a model for custom
application icons you build. The application icons come in .png and XAML
vector format. The .png format comes in both a light and dark variant
to support the light and dark themes in Windows Phone 7. Figure 2-3
shows the included icons, as well as other sample icons. The image is
taken from the Windows Phone Design System – Codename Metro.pdf
document.
The icons are included with the Windows Phone 7
design resources, as well as installed by the Windows Phone Developer
Tools, at C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons
on an x64 Windows machine. The icons come in black and white to match
the built-in application themes available in Windows Phone 7.
The most common place to use the icons is for the
Application bar if included in your application; however, they be
incorporated into the main UI as well.
2.4. Design Templates for Windows Phone 7
The design templates for Windows Phone 7.zip file
includes 28 Adobe Photoshop files that designers can use to create
pixel-perfect UX. Share this download with your Windows Phone 7 designer
friends and they will be forever grateful. It takes the guesswork out
of how to size the design. It will also save rework for developers, as
the templates will be ready to go when imported – more on this in the
next section.
One little gem you will not want to ignore is the
Design Templates for Windows Phone 7.pdf document that is included in
the template download zip located here:
http://go.microsoft.com/fwlink/?LinkId=196225
This document details how to use the templates, which
is especially important for controls that are not shipped as part of
the Windows Phone Developer Tools. A great time to use this document is
when you need to build UI, like a notification, where there isn't an
existing control. The guidance is provided to help designers and
developers match both visually and in interaction the built-in version
of the control that appears in Windows Phone OS 7.0.
|
Many additional controls are shipped in the Silverlight Toolkit for Windows Phone, which is available for download at CodePlex: http://silverilght.codeplex.com.
|
|
This section concludes the overview of the design
resources for Windows Phone 7. Please do checkout these resources as it
will save you rework later. The next section covers the mechanics of how
designers and developers can work together to build a Silverlight for
Windows Phone 7 user interface.
