Application icons

Diagram showing an application icon, the transparent tile, and the application name label.

Designing an icon for your BlackBerry smartphone application lets you showcase your app to BlackBerry device users. In the BlackBerry World storefront, an icon is the first introduction that users have to your app. The icon also appears on the home screen as a way for users to open your app.

Your icon is placed on a transparent tile automatically, and the application name label appears below the icon.

Best practices

For devices with a screen resolution of 720 x 720 pixels, or 768 x 1280 pixels create an icon that is 114 x 114 pixels.

For devices with a screen resolution of 720 x 1280 pixels create an icon that is 94 x 94 pixels.

Focus on a single iconic metaphor that clearly represents the application. Think of your icon as a road sign that people understand quickly.

Use a silhouette to differentiate your icon from other icons.

Try to maintain consistency with other BlackBerry application icons in scale and volume.

Basic shapes

App icons are based on basic shapes. Most of the squares, circles, and rectangles used in the UI have exactly the same size and proportions as the shapes you see below.

Diagram showing basic icon shapes: square, circle, rectangle.

Perspective and lighting

The icons are designed to look as if they are hanging on a wall at eye level.

The lighting in the BlackBerry 10 UI is designed at a 90 degree, top-down angle.

Drop shadow

Distance: 2 pixels

Size: 2 pixels

Angle: 90 degrees

Icon showing examples of perspective and lighting design principles.

Inner boundaries

Icon padding

If you want to allow room for a drop shadow or outer glow, create an icon that is 106 x 106 pixels.

Inner symbols

If you use a symbol in your icon, make it the same size as the symbols in other BlackBerry application icons.

Diagram showing examples of application icons with symbols of the same size.

Color palette

Limit the number of colors that you use in your icon. The colors shown here are used in BlackBerry application icons.

Diagram showing the colors used in BlackBerry application icons.

Stroke

Diagram showing examples of app icon stroke weight.

Use a 5-pixel stroke where appropriate, so that icons are easily visible on the home screen.

Using visual elements like strokes consistently helps your icon fit in with the BlackBerry application icons.

Materials

Most of the app icons are created using the four materials you see below. Limiting the number of materials and using them consistently will help unify your application icon with the core BlackBerry application icons.

Use materials appropriately. For example, if your icon is made of paper, don't give it a glossy finish.

Diagram showing examples of soft plastic, paper, metal, and gloss material effects for app icons.
comments powered by Disqus