Here are some of the most common oversights when designing a Windows Phone app. Eliminate these isues in your apps and not only will it look more aesthetically pleasing and professional, it’ll might even get you a few more stars in the Windows Phone Store reviews.
Because the OS’s design language is based on typography, the right font size and font weights aren’t the only things to keep in mind when designing a WP app. A very common mistake in many apps that I see in the store is that they have inconsistent capitalization convention with the OS as well as within the same app. Here are some capitalization guidelines to keep in mind.
- Page titles are all upper-cased. With the rare exception of specific branding or names, this should always be all upper-cased. Use “MY APPLICATION” instead of “My Application.”
- Page headers are all lower-cased unless it’s a proper name or a special case where capitalization is preferred. Use “favorites” instead of “Favorites” but you may use “NFC” instead of “nfc.”
- In hubs/panoramas, section headers are all lower-cased in WP8 and all upper-cased in WP8.1. The large title above that follows the same capitalization rule as page headers mentioned previously. They should be all lower-cased unless a proper name or branding requires it to have capital letters. It should not be all upper-cased.
- Buttons (included in the CommandBar), menu items, and other various actionable elements usually have all lower-case letters. Small buttons or actionable elements can have all upper-case letters like in WP8.1’s Action Center.
- Text snippets that do not form a whole sentence do not need its first letter to be capitalized. Examples of this are “showing contacts with phone numbers” or “about 2 hours ago.”
- Some lower-cased text and labels can be interchanged with all upper-cased text if your application design allows it and it looks nice in the mix so be creative.
One of the most common mistakes I see is that apps use no margins or very inconsistent margin. Even in the new WP8.1 templates, margins are incorrectly used. Here are some margin guidelines to keep in mind.
- Do use margins or paddings to separate elements on the screen. Empty or negative space between UI elements create segmentation without the need of borders, lines, or chrome. It also makes the app easier on the eyes.
- Apps should have a margin on the left and right side so that content doesn’t start and end at the edge of the screen.
- In Silverlight apps, the content should start 24px from the left edge of the screen and 24px from the right unless content is intended on overflowing off the screen.
- In WP8.1 XAML apps, the content should start 19px from the left edge of the screen and 19px from the right unless content is intended on overflowing off the screen.
- The most common margin spacing used for 12px for Silverlight apps and 9.5px for WP8.1 XAML apps. This spacing is generally used to space out items in a list. So if you want two elements not touching, consider using multiples of 12px and 9.5px to space them out for Silverlight and WP8.1 XAML respectively.
Some apps use too much color while others are stuck in land of black and white. The easiest way make your app more engaging is by the use of colors. Start off simple to avoid making it too overloaded with color.
- Use user’s accent color to highlight elements of interest or communicate it’s an actionable element (chromeless buttons or hyperlink text.)
- Use common colors like green and red for good and bad.
- Use different shades of grade to show hierarchical relationship between different text elements like in the mail or messaging app.
- If your app have a brand color, consider not leaving the system tray at the top black and change it to match your app color.