ux.artu.tv » Blog Archive » 24 Weeks of Windows Phone Metro Design | #18 Creating backgrounds for Panoramas

24 Weeks of Windows Phone Metro Design | #18 Creating backgrounds for Panoramas

 24 Weeks of Windows Phone Design Index


We’ve covered this topic in a previous post but I thought I’d add some tips here to design backgrounds for Panoramas.

Use background images that help enhance the parallax effect

One of the most delightful features of a Panorama control is its parallax effect. This effect provides depth to the Panorama and makes it more immersive. It consists of displacing the background image of the panorama at a different (slower) rate than the floating objects on top of it. So the user interface elements move faster horizontally (scroll) compared to the background. This is an animation principle. Walt Disney Studios, Warner Bros. they all used this effect from the beginning. Do you remember Bugs Bunny walking down a nice forest path with a beautiful background with mountains? And the background moved slower than the foreground? That’s the parallax effect and it helps sell depth in a scene. It’s a visual trick.

Here are some cool websites that use this effect… study them and see why they look so… freakin’… gorgeous! - :) try leveraging similar tools for Windows Phone Panoramas.

http://silverbackapp.com/ - Rumor has it, this was the site that made this effect popular on the web (although the animation principle has been around for decades…) - Resize the browser and look at the leaves on the top.

http://www.nikebetterworld.com/about Why does Nike always rock on the web? Because they care J

So, using images that help sell this effect will make your Panorama work better. Note it is not mandatory that you use a background image, only if it makes sense to your brand and experience. Like Facebook, they don’t use a background image. Now, the good thing is you might only need a very subtle background to increase the effect, and it doesn’t necessarily have to be a super complex, full sized background image. Here are some examples:

Four ways of using background images in Panoramas

You can use Panorama background images in different ways. Here are four different techniques I’ve found being used:

1 - Full size image or photo background

This is a very popular option because photos look great as Panorama backgrounds. The only thing to be aware of is that light photos might make it hard for light foreground UI objects to be visible and same potential problem for dark objects (in the case of darker photos). So as long as you can curate photos properly it is possible to obtain good results here. You can pre-edit photos in something like Photoshop and make then a bit darker (say 20%) or a bit lighter. Or plan B (as in better :)) is to have a semi transparent rectangle on top of the Panorama background. Make it 10-20% opaque in black or white and have it rest on top of the photograph image.

2 - Blurry, lightened or darkened background. Tinted backgrounds in any color.

This approach addresses the complexities of using full screen photography as Panorama backgrounds. By lightening or darkening a photo based background you make it easier for UI objects to be visible while floating on top of the background. It also makes the background less dominant in the overall design composition. You can implement this approach by pre-editing the background(s) with Photoshop.

3 -  Footer background

You don’t need to use full screen imagery for backgrounds all the time. In many cases a more gently footer only background could work and add depth to the Panorama. It is also less invasive to the overall Panorama and the UI controls floating on top.

4 - No Background 

This one is my favorite! No background - nice and clean.

Background images in Panoramas

One Response to “24 Weeks of Windows Phone Metro Design | #18 Creating backgrounds for Panoramas”

  1. 24 Weeks of Windows Phone Metro Design | Creating backgrounds for Panoramas | azkafaiz.com Says:

    […] source: ux.artu.tv […]

Leave a Reply