Creating TV store icons, thumbnails and screenshots

By Chris Mills

Introduction

First impressions are very important for a successful product. It is therefore vital to take your time on graphics that represent your app, and polish them before you publish your work. This short guide provides some tips on making your application’s icon and other graphics the best they can be.

There are three types of graphic that represent applications in the TV Store: Icons, thumbnails, and screenshots. Let’s look at each of these in turn.

Icons

Icons are the simplest and smallest graphical representation of an app.

Size and format

In the TV Store we require submission of a 512px x 512px, 24bit PNG file, but in the current UI we display only a 96px x 96px scaled version. Bear in mind that you are designing an icon for a size roughly around 3cm x 3cm in the real world. The large size requirement is for further scaling capabilities, if needed in the future.

Style

We don’t expect compliance with any specific style guidelines in your app icons, but we do expect you to think carefully about your icon’s content. It is recommended that you keep your icons consistent with the style of your apps. For example, a photorealistic, serious design will not be a good representation of a cartoony kids app.

A set of clock icons with a check and cross showing that a flat, clear clock icon is a better look than a tilted, stylised icon

Well designed icons in general are simple, recognisable and intuitive. Also remember that they should be legible on small TVs as well as larger ones. Think about the content of your icon. You only really have space to focus on one concept in an icon, and it will generally be one of three things:

  1. A pictogram: A picture of something from real life, such as a video camera, tree, dog or flag.

  2. An ideogram: An idea of something, such as trust, information, learning, or speed.

  3. An arbitrary invention: These don’t commonly exist in real life, but sometimes you’ll want a more abstract invention to represent your app. For example, your app might be represented by some kind of abstract shape or strange invention.

Three icons: A die representing a pictogram, a heart with waves going through it representing an ideogram - pulse or heartbeat, and an abstract design with letters inside it representing an abstract icon

Next, use established, recognised conventions where possible. Think of well-known icons for ‘information’, ‘play’ and ‘shopping cart’, for example. Using such conventions will immediately make your icon more intuitive and recognisable. The Noun project (http://thenounproject.com/) is a great place for researching icon styles and conventions.

Another general tip is to just make your TV app icons fun! Most apps on TV are pure entertainment, so formal, system icons may look out of place.

Less is more

An icon needs to be simple so it will work at small sizes — don’t employ too many complex shapes in your icon, and stay away from using too much text. Anything more than a simple, short word will reduce clarity below an acceptable level.

Two copies of a thermometer icon. The one on the right is cluttered with text, and clearly less effective than the simple uncluttered version on the left

Effects

Moving on from ‘Less is more’, think carefully about graphics effects you use in your icons. Drop shadows, heavy bevels, glows and halos will not replace drawing skills, metaphors, and great ideas, and may reduce clarity.

Four similar music-related icons. The first one is simple and flat, and more effective than the other three, which have drop shadows, glow effects and distortion

If you decide to use shadows, highlights and reflections in your icons, be consistent with the direction of light, otherwise the icon will look terrible. Unnecessary perspective for a two dimensional icon can also spoil the effect.

Background

Make sure there is a good degree of contrast between your icon and the background it appears on. All icons in store are presented on top of dark placeholders — if you use PNG icons with alpha channels, or dark icons, your icon could become almost invisible. If you are planning on designing a dark icon, you should consider mounting it on top of your own custom background color.

Four icons. Two are light coloured so look good on the TV store default dark background, and two are dark, so don't look good on the dark background

Thumbnails

Your thumbnails are where you can give your creativity free rein, creating beautiful app cover art. By default, an app’s thumbnail is used as the graphic representation of an icon in the app store, and the launch shortcut in the ‘My Apps’ section.

Technical details

The required size and format for thumbnail graphics is 480px x 270px, in JPG format.

Style

As with your icons, we don’t expect any particular style to be used for your thumbnails, however it should be pleasant to the eye, and consistent with the style of your app and the TV store.

You have a lot more space to play with when designing a thumbnail, but again make them fun, make sure they are a good representation of your apps that will draw users in, and be careful not to make them too cluttered.

Background

Thumbnails are displayed on pre-designed placeholders, so there’s no need to shape your thumbnails in any way. Any additional effects applied to thumbnails — such as bevels or shadows — are not allowed.

Two thumbnail icons, one simple flat icon, and one with a drop shadow and bevel. The simple icon looks better

Less is more

By reducing the amount of extraneous content, you can emphasise more important elements of your composition. Less is more in many cases.

A die, with dice written in the background and a loud gradient. just the die would be more effective

Crop

When deciding what to show in a thumbnail, you should consider focusing just on the most important details or features. If your thumbnail is a screenshot of your app’s main UI, consider cropping it down to just show the most important bit, rather than the whole lot.

Two representations of the same interface. One is zoomed out, and one is cropped to show just the most important feature of the interface

Text

If you decide to include text on your thumbnail, limit it to a title, or a single sentence. Including too much text will look messy and lose clarity.

Two icons for a backgammon game: One has just the game title, while the other contains far more text and looks cluttered

Colour

There is no better way to give your artwork life than a tasty colour palette. Look around you and get inspiration from a wide variety of sources, online and in nature. There are also a lot of tools around that can help you choose a stunning colour set, for example colorlovers.com.

A colour palette

Contrast

Contrast between foreground and background colours is important in your thumbnails, however in a larger graphic contrast can also be controlled by size, position, form, light and shadow.

Two side by side images showing an example of good and bad colour contrast between background and foreground

White space

It is also important to consider the space in between your graphic elements. Not having enough whitespace can make everything seem messy and cluttered, and reduce the impact your thumbnails have.

A pixel grid with the word 'blocks' spelled out by some of the pictures, plus a pair of 3D glasses

Screenshots

It is important to include screenshots in your app’s app store page to show users what functionality the app has, and entice them to install it. When you include more than one the app store creates a nice fading gallery in the app description page.

Size

Screenshots of your application are required to be 1280px x 720px, in JPG format. These need to be exactly this size, as rescaling and cropping is not applied.

Further resources

You should also consider getting inspiration for your app graphics from other sources. Have a look at other apps, other app stores, and web sites such as the following:

Inspiration

  • http://thenounproject.com/

  • http://www.dribbble.com/

  • http://www.iconfinder.net/

  • http://www.behance.net/

Tutorials

  • http://http://psd.tutsplus.com/

  • http://vector.tutsplus.com/

  • http://www.smashingmagazine.com/

Chris Mills is a web technologist, open standards evangelist and education agitator, currently working at Opera Software in the developer relations team. He spends most of his time writing articles about web standards for dev.opera.com and other publications (such as .net mag and A List Apart), giving talks at universities and industry conferences, and lobbying universities to improve their web education courses. He believes that education is the answer to everything, but in particular he is passionate about using education to improve the overall content quality, accessibility, usability and future-viability of the Web.

He is the creator of the Opera Web standards curriculum, contributor to the WaSP InterACT project, and coauthor of InterACT with web standards: A Holistic Approach to Web Design. In August 2011, he also accepted the position of co-chair of the newly-formed Web Education Community Group.

Outside work he is a heavy metal drummer, proud father of three and lover of good beer.


This article is licensed under a Creative Commons Attribution 3.0 Unported license.

Comments

No new comments accepted.