The panorama page within a Windows Phone App gives designers the chance to really express their creativity. This is the front page, the magazine cover, the eye-catching centrepiece.
Whatever you choose to use for the background of this page, whether a graphic or photo, it needs to be seamless, flowing with the page as it moves 360 degrees. There are many beautiful apps on Windows Phone that don’t make best use of the panaroma feature, so getting it right with a killer graphic can make all the difference.
Technical specs:
- JPEG image is recommended
- Always 800px height
- Between 480px and 1024px width (however I have used a 1440px width for large panorama and this worked well)
Remember the rate of motion of the panorama is relative to the panning gesture, this is determined by the total width of the top content layer relative to the width of the background image.
To import panorama into your project simply select the panorama control and choose an image source in the brushes panel.
Tiles
The tiles used on Windows Phone are a visual shortcut to an application. They can be controlled in one of two ways, either using a complete custom image of your own, or using a transparent PNG with a graphic in place to fit in with the colour theme the user has chosen for their phone.
Which one you choose depends on your client. A client with a strong brand identity may wish to keep the tile totally within brand, but it can often be more aesthetically pleasing to take advantage of the user themes. You can use multiple tiles to indicate different levels of service; this is worth considering in the concept phase.
Tiles can also communicate information to the user directly from the application. This will always use user and system defaults but is a necessary consideration when designing the tile. Will the information be displayed? What will that information be? And where will it lie on the tile?
Technical specs:
- 173px x 173px
- 256dpi
- JPEG or PNG
Loading graphics/Custom icons
When an application is loading a graphic is displayed to inform the user of the situation. When you’re creating a new project a default image is also created to serve this purpose. Replacing this image couldn’t be simpler, just create your custom graphic (usually with some kind of static loading indicator) and replace the SplashScreenImage.jpg file in the project root.
The image must be a JPEG file and 480px x 800px dimensions.
With custom icons, the metro theme provides a basic icon set, however some situations call for something specific. Any custom creative should be clear, understandable, and use real world metaphors that are familiar to users. Remember to comply with the metro theme and use the circular border around any image to keep consistency. Files and examples for this can be found in the development kit we talked about in Layout Using Expression Blend.
To add an icon into the application select the icon button and use the Common Properties panel to locate and assign the file.
Downloads
Download the free Windows Phone development tools here
