Tip 7–Watch out for colours & gradients in the Application Bar!

 

In my haste to refresh an existing ‘broken icon’ (see Tip 2) I made a ‘bad colour decision’ on the application bar that didn’t show up until it was too late.

Here are the offending icons with the default dark theme:

image

and here are the same icons in the light theme:

image

My take is that the real culprit here is in the use of gradients (‘simple colours’, such as those used for the ‘SOS’ icon, being less of an issue).

You can also provide a separate set of icons for each of the light/dark themes and change them programmatically (which I believe to be the recommended approach).

Here is the relevant portion of text from the official “UI Design and Interaction Guide for Windows Phone 7”, which is available here

“Use the user-defined system theme colour unless there is a compelling reason to override it. Using a custom colour can affect the display quality of the button icons, create unusual  visual effects in menu animations, and negatively influence power consumption on some display types.”

Advertisements

2 thoughts on “Tip 7–Watch out for colours & gradients in the Application Bar!

  1. Pingback: Getting your App published on Windows Phone Marketplace « In geeks we trust …

  2. Nice tip! I thought I had read some place, MS suggests only using the white on transparent images for app bar icons? Can’t remember where I read that though, it was back in May. I’ve been avoiding this (appbar itons) for miFlashlight. But sooner or later I’ll have to venture into that territory.

    PS I saw you were posted last night! Kudos!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s