Iconography

Tip: The Nokia Asha Icon Toolkit contains icon templates and guidelines. In addition, ready CategoryBar icons are included.

Nokia Asha activity screen icon and launcher icon basics

The activity icons – icons that appear in a square shape on the activity screen of the phone – are also used as launcher icons. The device software creates the launcher icons automatically by cropping the edges and applying a smooth surround shape to the icon background. Launcher icons represent the main applications within the device. These include pre-installed applications, such as Calendar, Camera, and Contacts, as well as third party applications, for example those downloaded from the Nokia Store.

PNG format

Nokia Asha devices require PNG (Portable Network Graphics) icon files. PNG is a bitmap image format that employs lossless data compression and can include transparencies.

PNG images can be created in bitmap-based software, such as Adobe Photoshop and Adobe Fireworks, or in vector-based programs with an optimised PNG saving option, such as Adobe Illustrator CS5. These guidelines also explain how to use Inkscape to create a launcher icon.

Anti-aliasing

The transition from vector to pixel format can involve unwanted transition effects. Vector lines and vector shape edges which travel across the pixels (instead of following the grid between pixels) will be anti-aliased and may turn out blurry.

Nokia Asha devices have a high quality standard for their graphics and icons. Every icon needs to be as sharp and optimised as possible. In order to produce a crisp icon, please prevent unnecessary anti-aliasing on even edges. Preserve the anti-aliasing effect on roundings and curves.

In Adobe Illustrator you can switch on/off a pixel preview (Illustrator > “View” > “Pixel Preview”) to check for these and to amend your icon shape if necessary. The Inkscape template shows a pixel grid and you can snap objects or nodes/dots to the grid so that the final exported PNG will be optimised.

Below is an example of an optimized and an unoptimized shape.

Global understanding

To ensure success, icons need to be easy to understand for a global audience. They should enable users to quickly recognise your product, and help them to decide if they want to learn more about it.

Simplicity

Simplicity is the key, because icons need to communicate the essence of your app within a small space. Focus on the most distinguishable feature of your product. Key icon imagery and metaphors should also be easy to distinguish. Ensure that there is sufficient contrast between the subject and the background colour.

Use of colour

Unless you want to use your own custom graphic, the colour of the icon background can also be customised to match your brand colours, or it can follow the Nokia colour spectrum:

Activity screen icon colour backgrounds:

Launcher icon colour backgrounds:

Icon elements

To meet the Asha standards, each activity screen icon should contain the following elements and composition:

  • A mandatory coloured background.
  • A glyph within the focal zone.

These elements are centrally aligned within a boundary box of 50 x 50 pixels. The boundary box must be included with the final icon as a transparent outline.

Note: Tall or elongated elements may exceed the recommended focal zone by a few pixels, in particular when using a custom graphic.

The device software crops the square shape of the activity screen icon to the surround shape of a launcher icon and applies the highlight rim. Size and appearance of the glyph stay exactly the same, so it is necessary to check that the created glyph fits nicely into both shapes, the square shape for activity screen and the surround launcher icon shape. The activity screen templates offer an additional layer to preview the appearance of the final launcher icon. This is especially useful when implementing a custom graphic.

Activity screen icon templates for Nokia Asha UI

The Nokia Asha Icon Toolkit offers templates to help you create your activity screen application icon in Adobe Illustrator, Inkscape, or Adobe Photoshop.

You can simply place your graphic on top of a preset background, apply the gradient, highlight and shadow, and you have an activity screen icon ready for saving.

Device software will create a launcher icon automatically based on the activity screen icon. The following example shows how a piece of graphic is turned into an icon with the Nokia_Asha_Activity_Screen_Illustrator_Template.ait:

Open one of the Nokia_Asha_Activity_Screen templates:

  • Illustrator activity screen icon template, or
  • Inkscape activity screen icon template, or
  • Photoshop activity screen icon template.

Choose a detailed work description according to your style and preferred program:

  • Creating an activity screen icon for Nokia Asha UI with Adobe Illustrator template.
  • Creating an activity screen icon for Nokia Asha UI with Inkscape template.
  • Creating an activity screen icon for Nokia Asha UI with Adobe Photoshop template.

© Nokia 2013.