IT tutorials
 
Mobile
 

Windows Phone 7 : Silverlight User Interface Development - Designing for Windows Phone 7 (part 1) - Design Approach, Design Resources

6/7/2013 7:42:02 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

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.

Figure 1. Metropolitan signage as inspiration

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.

Figure 2. UI Design and Interaction Guide format

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.

Figure 2.3. Collage of application icons for Windows Phone 7

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.

 
Others
 
- Developing BlackBerry Tablet Applications : Working with the File System - SQLite Databases
- Developing BlackBerry Tablet Applications : File System Access (part 3) - File Browse for Multiple Files
- Developing BlackBerry Tablet Applications : File System Access (part 2) - File Browse for Single File
- Developing BlackBerry Tablet Applications : File System Access (part 1)
- iPhone Developer : Assembling Views and Animations - Managing Subviews - Tagging and Retrieving Views
- iPhone Developer : Assembling Views and Animations - Recovering a View Hierarchy Tree, Querying Subviews
- Java ME on Symbian OS : Handling Diversity - Handling Screen and Display Diversity
- Java ME on Symbian OS : Handling Diversity - Handling Diverse Multimedia Formats and Protocols
- Java ME on Symbian OS : Handling Diversity - Supporting Diverse Input Mechanisms
- Windows Phone 7 : Building 2D Games with the XNA Framework - AlienShooter Game Play (part 6) - Updated GameplayScreen Class, Collision Detection and Memory Management
 
25 Inspiring Game of Thrones Quotes
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS