Sunday, April 22, 2012

5 Tips for Customizing Your Mobile App’s Background Image

It may seem trivial, but a customized background image can make a world of difference for the mobile app experience.  The background image within an app can enhance the visual palette, fortify your brand recognition, and provide graphical context for the mobile experience.

Your InstantEncore app defaults to a solid black wallpaper. While this is certainly not the most exciting choice, it is a useful default color due to its neutrality.

When customizing your own background image, remember that you want it to be interesting but not obtrusive. It should be a tasteful, thoughtful representation of you or your organization.

Here are five tips to help you create a great background image for your mobile app:

Tip #1 – Prepare and upload an image according to the specified dimensions.
UPDATE: The recommended image size is 640px wide by 960px tall. Must be JPG or PNG format. Smaller images (e.g. 320 x 480) will load more quickly, but may not look as sharp on higher resolution devices. Larger images (e.g. 1240 x 1920) will look sharper on tablet devices, but will take longer to load initially.

It is usually best to avoid landscape-oriented photos, but you can easily modify one to fit the proper background size. Try cropping the image or adding onto it in creative ways. Sometimes it’s not the best choice to merely crop a portion of your photo to 640x960, since the result could be a larger distraction to the eye. When that is the case, you can try this suggestion:

A quick suggestion to turn your favorite landscape-oriented photo into a useable background image. Click here to enlarge the photo.
Tip #2 – Subdue and avoid bright hues.
The primary text throughout your app is white, so we recommend keeping your background image dark – the darker the better. A light background will cause your content to be washed out, and any abrupt textures will create too much of a disturbance for the user.

Background Sample A
Avoid light backgrounds and textures like this.
If you really insist on your background being a pile of sticks, because for some reason it’s the best representation of you, add a black overlay and bring the opacity down to about 85% to lessen the attack - though using such a hectic image is still not advised.
Textures are usually great for a unique look, just remember to keep it simple. Avoid sharp repeated patterns. At such a small screen-size, an overly busy texture is very off-putting. If you like a particular image, but you’re worried about how it will look behind the text in your app, you can add a black (or other dark solid color) overlay with the transparency set anywhere from 50%-90%, depending on just how busy or bright the image is you’re using. Then simply preview, adjust as necessary, and use your best judgment.

The best digital wallpapers, small or large, are those that are subtle enough to not take away from the foreground, yet maintain a fair amount of elegance.

Tip #3 – Avoid text.
Text will get in the way of the actual content in your app. When positioned appropriately, a little subtle text or logo is manageable, but too much text – no matter how faded it is – will be distracting.

Tip #4 – Match your splash screen and remember your color scheme.
An easy and effective background idea could already be right in front of you. Your splash screen image is already the right size, so why not apply it to the rest of the pages in your app? You may have to adjust the intensity of the colors, or remove (if not fade) any logos or images, but using elements from your splash screen for the background is a great way to create a beautifully unified look throughout your app. Choosing a complementary color scheme for your header and accent features will give your app the sophistication your fans are looking for.

Tip #5 – Preview your app.
The background image appears on every page, including any custom pages you create, so spend some time previewing your app to make sure the pages are readable and looking the way you want. Remember, you can update your background or change it out as much as you like, whenever you want to freshen up the overall look of your app.

Here are some background examples from various InstantEncore Partners to help inspire you.

To view the most detail, expand the slide deck to full screen.

Customizing a background image for your app is a small step in enhancing your mobile appearance, but it makes your content more approachable and contributes a unique visual environment. Users will undoubtedly notice and appreciate your attention to detail. 
Be creative, and have fun with your style!  If you would like feedback or suggestions on your background image, send us an email.  We're happy to help.

1 comment:

scooby said...

Nice guidelines, simple and very effective