Nokia: Interaction Design (Styleguide / Specs) by David King

Nokia Desktop Identity 2.0 2006-06-27

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

CONTENTS

Contents INTRODUCTION

Animations in UI

DESIGN THEME 2: CLASSIC LIGHT

Iconography

Nokia Twin-type application

Localisation

Nokia RCC-type application

About these guidelines

NOKIA PC APPLICATIONS 4

Application range

DEFINITIONS OF GRAPHIC ELEMENTS

DESIGN THEME 3: TRANSPARENT

User experience targets

Application frame

Nokia Twin-type application

OS support

Content frame

Nokia RCC-type application

Basic buttons

COMMUNICATING THE NOKIA BRAND

Floating menus

DESIGN THEME 4: SKINNED

Button states

Nokia Twin-type application

Nokia brand fundamentals

Active & inactive window

Splash screen

BASIC DESIGN GUIDELINES

Progress bars

Nokia Sport Manager-type application

UI design principles

Radio buttons and check boxes

Application layers

Dimensions and depth

DESIGN THEME 1: CLASSIC DARK

Compositions and use of space

Nokia Twin-type application

Scaling & grouping principles

Nokia RCC-type application

Drag & drop

Splash screen

Using contrasts

OTI@Home

Visual flexibility

Installer

Use of colours

Dialog window

Use of colours - creating colour themes

Typography

Presentation of functions

Accessibility

Keyboard controls

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

INTRODUCTION / About these guidelines

About these guidelines This document is intended as a tool for designers. It focuses on the visual style and brand communication in Nokia Windows applications. The key question is “how to visualise applications that meet set User Experience targets” (see User experience targets-section). The current version consists of a basic styleguide with chosen design-theme examples and graphic definitions. To streamline the design work, all samples are also available in Photoshop CS2 format (PSD).

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

NOKIA PC APPLICATIONS / Application range

Application range The desktop application is an inseparable part of the Nokia mobile phone experience and as such, its design should take on the same approach. Usability should be taken into consideration first. The Nokia brand functions as the foundation with differentiating elements for different phone categories. Common use cases found in Nokia applications include: sync, creating backups, media transfer and data management. In general, most Nokia PC applications are used to connect and sync phone data with a PC. This document contains sample visualisations of • A simple application designed for one task only, such as Nokia OTI@Home • Complex applications with multiple uses, such as Nokia Twin or Nokia Sport Manager

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

NOKIA PC APPLICATIONS / User experience targets

User experience targets Nokia is committed to providing the industry's leading designs and user interface

TIP WHAT IS A USER EXPERIENCE

solutions across all product categories, whether they are mobile phone devices,

User Experience is a sum of a person´s perceptions, feelings, and memories that are related to using a company´s product.

network elements, or any other Nokia products. The following user experience targets should be used as a starting point when concepting and designing any Nokia PC application:

• Ease of use and robustness • Simple and fast to use, intuitive, using UI standards when appropriate • Safe and secure • Human and soft but not naive • High visual quality and appeal. Modern and harmonic. Inclusive - not snobby • Differentiating Nokia look • Part of the wider holistic Nokia User Experience • Aesthetics, usability and Nokia brand fundamentals come first; even at the expense of using Nokia visual identifiers (logo, typeface, Nokia Blue)

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

NOKIA PC APPLICATIONS / OS support

OS support These guidelines and the example visualisations presented in them are optimized for the Windows Vista environment and follow conventions, which will be widely accepted after its release. All of the following examples are validated and should also be used in earlier Windows versions.

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

COMMUNICATING NOKIA BRAND / Nokia brand fundamentals

Nokia brand fundamentals The Nokia Brand Core Proposition states: Nokia connects people with very human technology to help them feel close. Brand vision is driven by the Nokia Vision “'life goes mobile” and its Mission of “Nokia Connecting People”. Nokia is committed to providing the industry leading designs and user interface solutions across all product categories. Nokia brand tonalities are

Human, Trusted, Inspired, Dynamic Nokia brand tonalities should be communicated by • Simplifying functionality and ease of use • Following a uniformed and distinctive Nokia look • Using understandable and common vocabulary • Ensuring relevance to the user - no unnecessary details • Utilising user-centric design process and methods Nokia brand fundamentals should always be taken into consideration when designing Nokia applications. » Read more about the Nokia Brand in Nokia Brand guidelines

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

BASIC DESIGN GUIDELINES / UI design principles

UI design principles When designing a Nokia application, its simplicity should be always taken into consideration first. A good Nokia application is easy to use, focused on the user and trusted. This way the agreed UE targets are met. One of the main design ideas is to separate the user content from the application

FIXED ELEMENTS • In this document fixed elements are marked with a FIXED -symbol. • When fixed elements are pointed out in layout samples 1 2 3 etc. symbols are used.

functions. This is done by defining a clearly different user content area. See design samples in this document. In this document, the flexibility of the elements is defined, principled and may

1 2

vary from one element to another. For example, some elements’ shape and colour can be changed, while other are restricted to colour only. Any specified element should be used according to each applications’ specific requirements. To simplify this document, only the fixed elements are marked in the design samples (see example). Other elements are flexible.

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

BASIC DESIGN GUIDELINES / Application layers

Application layers In these guidelines, the PC application composition is divided into four basic layers. The layers are defined according to clearness, consistency and ease of prioritisation. This layer order is fixed for all Nokia PC applications (see image). A minimum number of frames should be used, to avoid complexity and to ensure economic use of space. The frame order, component hierarchy and function should be immediately recognised. 1

The following layer order is fixed for all Nokia PC applications: 2 LAYER ORDER 1 Application frame layer 2 Content background layer 3 Content layer 4 Functions layer

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

BASIC DESIGN GUIDELINES / Dimensions and depth

Dimensions and depth Depth is used to separate content, background elements and functional elements

SAMPLE: THREE DIMENSIONAL ELEMENTS

from each other. Single elements, such as buttons, can be emphasized by three

ON FLAT BACKGROUND

dimensional visualisation. Three dimensional elements should be clearly different from flat elements. Their use should be justified and consistent. When designing an impression of depth, the entire composition should be considered. The following basic definitions of layer dimensions (see image) are not fixed but should be considered a starting point for designing dimensions.

LAYER DIMENSIONS 1 Application frame layer: flat 2 Content background layer: flat 3 Content layer: flat or three dimensional

1 2

depending on content

4 Functions layer: three dimensional 4

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

BASIC DESIGN GUIDELINES / Compositions and use of space

Compositions and use of space Overall, the appearance of a Nokia PC application should be simple and harmonic,

READING DIRECTION

creating an experience of a well-thought-through application, with elements in the right order. The user content should be emphasized and separated clearly from the application visuals (see example). Grouping of elements should be done according to the function of the elements. The appropriate reading direction (which can also vary in applications targeted to different markets) should be also ensured. When designing compositions, the following issues should be always considered: • Amount of elements and their order

DIFFERENTIATED USER CONTENT AREA

• Amount of free space in relation to content and functionalities • Element prioritisation • Clear identification of user content and application functionalities • Economic use of space • Aesthetics

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

BASIC DESIGN GUIDELINES / Scaling and grouping principles

Scaling and grouping principles Scalability should be always considered by application type. With small size

SCALING DIRECTIONS

applications (e.g. install wizards), the need for scaling the window size down is not as obvious as in applications that use lots of screen space (e.g. Nokia Twin). In scalable applications, the scaling logic must be consistent. The user content area scales both horizontally and vertically, the left-side functions background area scales only vertically and the top background area only horizontally. The position of single elements in relation to the application window does not change â&#x20AC;&#x201C; element alignment is consistent. Frame elements, such as scroll bars and sorters, keep their original thickness when the application window is scaled. Single functional elements and typography do not change their size. GROUPING PRINCIPLES 1. User content and the application frame are clearly separated in composition 2. Standard elements of the application such as the application menu, application title and hide/maximize/close -buttons are grouped among these guidelines (see Definitions of graphic elements -section) 3. Active elements should be grouped by their function 4. Content elements should be grouped by content type, taking into consideration relevance to the user

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

EXAMPLES OF GROUPING

Company confidential

BASIC DESIGN GUIDELINES / Drag and drop

Drag and drop A drag-and-drop operation should provide immediate feedback at the significant

SAMPLE: DRAGGED ITEM

points: when the data is selected, during the drag, when an appropriate destination is reached, and when the data is dropped. Drag and drop functionality should be designed keeping in mind common windows conventions.

BASIC RULES FOR DRAG AND DROP • Dragged item is presented with a duplicate, which is the item´s down state with opacity of 50% • Original item stays in the same location. If the item is moved (not copied), the original item disappears when it is dropped to another place • If the drag and drop is done when elements are presented in list mode, only the elements name and icon is presented in dragged duplicate • The folders that accept dragged data are presented with downstate while rolled over • Elements which do not have a defined downstate mode (areas etc.) are presented with an outline if they accept dragged item • Outline width 2 px • Colour: within current colour theme • Effects: outer glow, see PSD files

Nokia Desktop Identity 2.0 / 2006-06-27

SAMPLE: ROLLING OVER AND DROPPING ITEM TO ACCEPTED ELEMENT

Company confidential

BASIC DESIGN GUIDELINES / Using contrasts

Using contrasts When designing a Nokia application the compositions´ elements must be checked for adequate contrast.

Lumiosity contrast

COLOURS • Colour contrasts should be strong enough to communicate the individual functions of the colours. However, avoid too strong colour contrasts to ensure a harmonic and visually pleasing presentation • Avoid placing counter colours in parallel • Always consider the whole application when making choices of colours for individual elements

FORMS • Nokia forms should be considered in relation to basic forms. They should be used to create the Nokia look. Use Nokia forms carefully though, to avoid the application from appearing as more complex or naive to the user DEPTH • Three dimensional elements should be clearly different from flat elements

LUMINOSITY • To ensure legibility, confirm sufficient contrast in luminosity. This is especially important in small texts • Luminosity contrasts should not be too strong between related continual elements (such as rows) to avoid the flickering effect

EXAMPLES OF USING CONTRASTS

Nokia Desktop Identity 2.0 / 2006-06-27

Forms contrast

Colour contrast

Depth contrast

Company confidential

BASIC DESIGN GUIDELINES / Visual flexibility

Visual flexibility Certain elements are defined as flexible to allow controlled visual variation for different phone categories´needs and to support various use cases. This document contains three basic visualisations as a starting point. The fourth concept has examples of applications skinned to a specific device - category´s guidelines. Skinning should focus on the application frame background. Content area background, buttons or content elements should not be skinned with overly complex graphical style — the colour range of these elements can be adjusted to be in harmony with the skin. BASIC RULES FOR SKINNING BY LAYERS - Application frame layer: Skinning focused on this layer. Use of images and textures allowed - Content background layer: Colouring by theme allowed. Use of images and textures NOT allowed - Content layer: Colouring by theme allowed. Use of images and textures NOT allowed - Functions layer: Colouring by theme allowed. Use of images and textures not recommended HOW TO CREATE A SKINNED THEME - Use the digital identity of current phone model - Using abstract visual style is recommended - Always look at the whole composition - Consider contrasts - Ensure Nokia look and feel

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DARK

LIGHT

TRANSPARENT

SKINNED

BASIC DESIGN GUIDELINES / Use of colours

Use of colours – basic rules Colour use in Nokia PC applications is flexible. The digital identity of specific

TIP AVOID BLUE WITH BLACK

phone models should be always considered. To ensure the Nokia look, harmony,

Avoid blue with black, because of the rare "blue” cones in the retina of the human eye, blue objects blur on a black background and vice versa.

aesthetics and functional presentation, the following basic rules for colour use have been defined: APPLICATION FRAME • Harmonic scale with a relatively large amount of tones captured from a narrow area of the full colour range • Consistently toned, for example, clearly dark or light • Saturation should be relatively low

FLEXIBILITY • Flexible tone scale • Skinning allowed

CONTENT AREA • Simplicity in the content´s background, minimum amount of colours • Adequate luminosity contrast between content elements and background, still harmonic colour range • Ensure harmonic but separated presentation in relation to application frame colours

FLEXIBILITY • Flexible tone scale • Skinning with texture not recommended

FUNCTIONS AND HIGHLIGHTS • The most startling and saturated colours are presented in active functions and selected highlight features such as the memory bar • Buttons and sorters are presented with clear luminosity contrast but follow the selected colour theme

FLEXIBILITY • Flexible tone scale • Skinning with texture NOT allowed

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

The problem can be avoided by adding white to the blue e.g.(0,0,255)=>(100,100,255)

BASIC DESIGN GUIDELINES / Use of colours

Use of colours – creating colour themes Variable methods can be used to create colour themes for Nokia PC applications. The following example can be used as a starting point for colour theme design.

APPLICATION FRAME • Harmonic scale of tones captured from a narrow area of the full colour range

CONTENT AREA • Same temperature colours captured from the opposite side of the luminosity range

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

ACTIVE FUNCTIONS AND HIGHLIGHTS • High saturation and constant luminosity colours captured from the different sides of the hue range

EXAMPLE DESIGN

BASIC DESIGN GUIDELINES / Typography

Typography When designing typography for Nokia PC applications clearness and legibility

NOKIA STANDARD REGULAR

should be considered first. Nokia core fonts – Nokia Standard Light, Regular and

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXY

Bold are used preliminary. All core fonts should be used anti-aliased. Arial can be used on smaller type sizes (not larger than 12 px). Arial is also allowed to be used as aliased to ensure legibility. Sufficient contrast to the background must be ensured. Shadow effects can be used if needed. The size contrast between body text, list contents etc. and headlines should be immediately recognisable.

NOKIA STANDARD LIGHT

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXY

Basic spacing rules are: • Line spacing should not be under 100%

NOKIA STANDARD BOLD

• Standard letter and word spacing should be used

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXY

FIXED TYPOGRAPHICAL BASIS

FIXED TYPOGRAPHY IN MAIN ELEMENTS

• Headline font is allways Nokia Standard Regular, Light or Bold • Nokia Standard Regular, Light or Bold is used with all functional elements

• Application title: Every word starts with capital letter, Nokia Standard 15px • Application menu: Nokia Standard 11px • Back/Home/Fwd -button: Nokia Standard 11px • Content navigation: Nokia standard 11px • View selection menu: Nokia Standard 10xp • Floating action menu: Nokia Standard 10px • Sorter bar: Nokia Standard 10px • Search bar: Nokia Standard italic 11px

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

» Read more about Nokia Typography in Nokia Brand guidelines

BASIC DESIGN GUIDELINES / Presentation of functions

Presentation of functions Presentation of functionalities should be consistent and intuitive considering user actions and needs. The presentation should follow general software conventions, including roll-over highlights, active elements identification and process animations. The following basic functional elements are defined in this document: (see Definitions of graphic elements -section) • Application menu • Basic button styles • Scroll bars • File menu • Floating actions menu • Sorters • Progress bars • Search bar CURSOR STATES Cursor states are not defined in this document. Follow Windows conventions and change cursor state when appropriate.

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

FUNCTIONS EXAMPLES

BASIC DESIGN GUIDELINES / Accessibility

Accessibility Accessibility is about giving equal access to everyone. While it is often used to describe facilities or amenities to assist people with disabilities the term extends to audio signals at pedestrian crossings, walkway contours and software design. Various countries have legislation requiring accessibility. When designing a Nokia PC application the following accessibility issues should be considered:

• Adequate element sizes, contrasts and clarity for low vision users • Possibility to use software with keyboard controls for users with motor disabilities • Communicating meaning with only colour, seriously hinders colour blind users • There are also numerous other types of disabilities that require specific accessibility measures to enable efficient use of the applications • The amount of people with disabilities is surprisingly high. In addition to catering to these people, most accessibility measures also aid non-disabled users

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

BASIC DESIGN GUIDELINES / Keyboard controls

Keyboard controls Keyboard controls can be used to offer a faster user experience to experienced users and a way for disabled users to use the application. Common software conventions should be taken into account when keyboard control logic is

State of main window after pressing Alt -> Arrow down (x4) -> Arrow right -> Arrow down.

designed. The application´s function prioritisation should be followed, when defining the selection loop for keyboard access. Selection loop should start with the first functional element under the menu bar. The general rule is that shifting between elements is done with the Tabulator key, which follows the selection loop starting from the first element. ShiftTabulator combination moves the focus backward in the selection loop. Current selected element is presented with an elements´ rollover state (see Button states section). Pressing Enter or Return corresponds to a mouse click. The main menu should be accessible with the Alt key, following the MS Windows convention. Alt selects the first item in the menu, after which the menu hierarchy can be navigated with arrow keys. The main menu should also be included in the selection loop as the last element for easy access with Shift-Tabulator.

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

Selected function presented in rollover state

BASIC DESIGN GUIDELINES / Animations in UI

Animations in UI Use of animations in a Nokia PC application must be considered by need to

BASIC RULES FOR ANIMATIONS BY LAYERS

present or clarify a certain function, process or demonstration. The general rule

- Application frame layer: NOT allowed

is that if the planned use of an animation does not clearly communicate anything or enhance the user experience it should be rethought.

- Content background layer: Animation supporting content presentation allowed - Content layer: Allowed - Functions layer: Allowed

The general animation style should be smooth, understandable and consistent, following a specific phone model´s digital identity. The following characteristics

ANIMATION EXAMPLE

are defined:

- Example of phone connect animation can be found in the example files folder

• Informative: An animation should give information of the current item or process. The animation needs to fit in the context • Interactive: Animations should illustrate performed tasks • Smooth: The animation should run smoothly without hopping and pausing • Understandable: User should not need to watch the animation over and over again to understand what the animation presents. It should be clear the first time • Positive: The nature of the animations should be friendly, human, and positive • Entertaining: The animations should delight the user

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

BASIC DESIGN GUIDELINES / Iconography

Iconography Iconography should be consistent in Nokia PC applications. The visual style is optimised for PC application use with complex compositions and small icon sizes. The following rules are defined for iconography: • Simplicity and legability as key principles • Presented from a front view angle • Two-dimensional style emphasized with shadow and light -effects • Strong Nokia DNA form language • Down-state style based on specific phone model´s digital identity

BASIC ICON CONSTRUCTION 1. PRIMARY FRAME • Defines icon´s overall form • Presents icon´s function • Grey colour scale with gradient • On top - drop shadow in background

3. BACKGROUND • Under Primary frame and Secondary methaphora element • Upstate color based on digital identity • On downstate clearly toned according to the current phone model´s digital identity

2. SECONDARY METHAPHOR ELEMENT • Optional to use • Emphasizes icon´s function and/or presents icon´s secondary methaphora • Grey colour scale with three-dimensional look • On top • On downstate, allowed to tone among the specific phone model´s digital identity

Nokia Desktop Identity 2.0 / 2006-06-27

1 2 3

Company confidential

ICON SAMPLES WITH DOWNSTATE VERSIONS

BASIC DESIGN GUIDELINES / Iconography

Iconography Icons are divided in four separate categories according to their use.

SIZES

APPLICATION ICONS • Emphasis on brand qualities and recognizability, much like in logo design • Used also in splash screen illustration and application identifier in the title bar

ILLUSTRATIVE ICONS • Non-interactive icons used in dialog windows, alerts and content area to emphasize and illustrate important content

FUNCTIONAL ICONS • Icons for the main application modes or for the most important functions

DESKTOP UI ICONS • Icons for changing content views or manipulating content • Used mainly in floating toolbars

• MS Windows: 256x256px (Vista) down to 16x16px in list views • Splash screen: 24x24px • Application identifier: 16x16px

• Dialog windows and content area: 32x32px

• Main navigation: from 16x16px (example) to 256x256px

• Floating toolbars: 16x16px

EXAMPLES

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

BASIC DESIGN GUIDELINES / Iconography

Iconography Different icon categories have different design goals, but still need to be harmonized through the general desktop identity guidelines. Examples are in their most commonly used pixel sizes. APPLICATION ICONS • Square shape with the application icon coming out of the frame • Simple shapes help scalability

ILLUSTRATIVE ICONS • Spherical frame with white outline • Green frame for bullets • Blue frame for illustrative icons • Yellow frame for alerts and critical dialog windows

Example OTI@Home and Twin application icons in 128x128px, 64x64px and 32x32px formats.

Example bullet point, illustrative and alert icons in 32x32px format

FUNCTIONAL ICONS • Square frame suggesting function or related media • B/W with downstate colour from digital identity

DESKTOP UI ICONS • No frame • Emphasis on function • B/W with downstate colour from digital identity

EXAMPLES

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

Example up state / down state versions in 32x32px and 16x16px format

Example up state / down state versions in 16x16px format

BASIC DESIGN GUIDELINES / Localisation

Localisation Localisation refers to the adaptation of the UI to meet the language, cultural and other requirements of a specific target market. These guidelines are mainly made

TIP ENGLISH x 1.5 For language versions using latin characters

from European/North-American perspective (reading from left-to right).

the maximum space needed for the text can

As minimum, the following issues should be taken into consideration when

be assumed to be approximately 1.5 times

adapting the application for specific target market:

larger than the space needed for an English version.

•

Use of symbols, icons and pictures

•

Tone of voice

•

Use of colours

•

Reading direction if applicable (Right-to-left, bottom-to-top)

•

Text length

•

Letter sizes

BASIC RULES FOR REDUCING TEXT 1. Never use two text rows on a single button or menu item 2. Reconsider the translation – is there a shorter way to communicate the same meaning? 3. Reconsider text background space – is there a possibility to increase the space for text? 4. Tighten the letter and word spacing. Do NOT use letter spacing smaller than -20% of standard. 5. Reduce font size. Do NOT use text smaller than 9px Localisation can entail substantial customisation. Usability testing can be used in order to find the right level needed. For more information see http://www.w3.org/International/

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DEFINITIONS OF GRAPHIC ELEMENTS / Basic elements of application frame

Basic elements of application frame 1 BACKGROUND FRAME

6 SEARCH BAR

• Corners rounded 2px • 1px light border • Shadow effect on desktop • Skinning allowed

• Corners rounded 1px • Inner shadow: see PSD files • Font: Nokia Standard 11px italic

7 MINIMISE/MAXIMISE/CLOSE -BUTTONS

2 APPLICATION ICON • Size 16 x 16px 3 APPLICATION TITLE • Font: Nokia Standard 15px • Drop shadow: see PSD files • Every word starts with capital letter 4 APPLICATION MENU

• Size: 19 x 19px • Rounded corners: See PSD files • Colours: Minimise/maximise - by theme, close - red • Iconography: Standard OS symbol language • See detailed definitions on PSD files 8 SCALE WINDOW ELEMENT

• Font: Nokia Standard 11px • Drop shadow: see PSD files

• Colour by theme • 3 point-symbols • See PSD files for further definition

5 APPLICATION DROP-DOWN MENU • Backround frame colour: white • 1px grey line between selection groups • Drop shadow: see PSD files • Font: Nokia Standard 11px

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DEFINITIONS OF GRAPHIC ELEMENTS / Basic elements of content frame

Basic elements of content frame 1 CONTENT BACKGROUND FRAME • Corners NOT rounded • Drop Shadow effect on application frame • Scalability: Horizontal and vertical columns scale horizontally relatively • Skinning: toning allowed, textures or images not allowed 2 CONTENT TYPOGRAPHY • In bodytext and lists font used: Arial, dark grey • Headlines Font: Nokia Standard, dark grey

5 CONTENT SORTERS • • • •

Always on top of the content frame Height: 18px Colour: light grey Effects: • Gradient overlay, see PSD files • Drop shadow: see PSD files • Font: Nokia Sans 10px • Arrow symbol: dark grey

6 IMAGES & THUMBNAIL IMAGES • White 1px outline • Drop shadow, see PSD files

3 LISTS´ BACKGROUND • Alternate row tinted darker 4 SCROLL BARS • Elevator • Colour: white • Rounded corners 1px • Drop shadow - see PSD file • Handler: three 1px stripes centred • Background • According to colour theme • 1px darker outline according to current colour theme • Arrows • white background • dark grey arrow

7 CONTENT DIVIDER • Height 4px • Drop shadow, see PSD files • Handler: three 1px points, colour according to specific colour theme

Nokia Desktop Identity 2.0 / 2006-06-27

7 6

Company confidential

DEFINITIONS OF GRAPHIC ELEMENTS / Basic button styles

Basic button styles FIXED 18px - BUTTONS • Height 18px • Corners rounded: see PSD files • Effects:Gradient overlay: see PSD files Drop shadow: see PSD files • Font: Nokia Standard 11px dark grey, centred • Arrows: dark grey • Dividers: 1px grey line FIXED 22px -BUTTONS • Height 22px • Corners rounded: see PSD files • Effects: Gradient overlay: see PSD files Drop shadow: see PSD files • Icons: 16 x 16px

FIXED CONTENT MENU BUTTONS • Height 22px • Corners rounded on top and bottom: see PSD files • Effects: Gradient overlay: see PSD files Drop shadow: see PSD files • Icons: 16 x 16px • Font: Nokia standard 11px dark grey

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DEFINITIONS OF GRAPHIC ELEMENTS / Floating menus

Floating menus and pulldown menus FIXED FLOATING MENUS • Top bar • Height 7px • Colour: grey • Effects: gradient overlay, see PSD files • Handler: three 1px stripes centred, colour according to current colour theme • Background frame • Colour: white • Lines: 1 px grey line • Drop shadow: see PSD files • Icons: 16 x 16px • dividers 1 x 7px grey line • Arrow button: 3 x 5px

FIXED PULLDOWN MENUS NORMAL STATE • Height 18 or 22px • Corners rounded: see PSD files • Effects:Gradient overlay: see PSD files Drop shadow: see PSD files • Font: Nokia Standard 11 or 12 px dark grey, centred • Arrow: dark grey 5 x 3px

SELECTIONS • Backround frame colour: white • Selected item: grey background • Drop shadow: see PSD files • Font: Nokia Standard 11 or 12px

ROLL OVER STATE • Darker grey, see PSD files DOWN STATE • Button, text and arrow colour among current colour theme, see PSD files

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DEFINITIONS OF GRAPHIC ELEMENTS / Button states

Button states Basic buttons

Scroll bars & floating menus

Normal state

Roll over

Selected state & Down state

Disabled

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

Minimise/maximise/close

DEFINITIONS OF GRAPHIC ELEMENTS / Active and inactive window

Active and inactive window Application window is presented in inactive state when another window is on

ACTIVE WINDOW

top and active. Inactive application window is presented by dimming the following elements in the application top bar: • Application name • File menu • Search bar • Minimise/maximise/close -buttons Dimmed elements are created by decreasing the opacity level to 60%

INACTIVE WINDOW

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DEFINITIONS OF GRAPHIC ELEMENTS / Progress bars

Progress bars FIXED VERTICAL PROGRESS BARS • Width 6px • 1px outline • 1px rounded corners • Colour according to specific colour theme • Indication stripe • Width 4px • Colour according to current highlight theme • Effects: outer glow, gradient overlay, see PSD files

FIXED HORIZONTAL PROGRESS BARS • Height 11px • Colour within specific colour theme • 4px rounded corners • Indication stripe • Height 11px • Colour within specific highlight theme • Effect: outer glow, gradient overlay, see PSD files • Busy bar • Striped with looping animation • Height 11px • Colour within specific highlight theme • Effect: outer glow, gradient overlay, see PSD files

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DEFINITIONS OF GRAPHIC ELEMENTS / Radio buttons & check boxes

Radio buttons and check boxes Down states

FIXED RADIO BUTTONS NORMAL STATE: • Size: 12 x 12px • Colour: light grey • 1px grey outline • Inner shadow (see PSD files)

NORMAL > DOWN STATE • Size: 12 x 12px • Colour: grey • 1px grey outline • Inner shadow (see PSD files)

SELECTED STATE: • Colour: according to specific colour theme • 1px grey outline • Inner shadow (see PSD files) • Outer glow -effect (see PSD files)

SELECTED > DOWN STATE • Colour: according to specific colour theme, Darker than Selected state • 1px grey outline • Inner shadow (see PSD files) • Outer glow -effect (see PSD files)

DISABLED • Normal state style with 50% opacity Down states FIXED CHECK BOXES NORMAL STATE: • Size: 12 x 12px • 1px rounded square • Colour: light grey • 1px grey outline • Inner shadow (see PSD files)

NORMAL > DOWN STATE • Size: 12 x 12px • 1px rounded square • Colour: light grey • 1px grey outline • Inner shadow (see PSD files)

SELECTED STATE: • Colour: according to specific colour theme • 1px grey outline • Inner shadow (see PSD files) • Outer glow -effect (see PSD files)

SELECTED > DOWN STATE: • Colour: according to specific colour theme • 1px grey outline • Inner shadow (see PSD files) • Outer glow -effect (see PSD files)

DISABLED • Normal state style with 50% opacity

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 1: CLASSIC DARK / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 1: CLASSIC DARK / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 1: CLASSIC DARK / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 1: CLASSIC DARK / Nokia RCC-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 1: CLASSIC DARK / Splash screen

NOTICE: On splash screens larger rounded corners are allowed to be used

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 1: CLASSIC DARK / OTI@Home

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 1: CLASSIC DARK / Installer

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 1: CLASSIC DARK / Dialog window

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 2: CLASSIC LIGHT / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 2: CLASSIC LIGHT / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 2: CLASSIC LIGHT / Nokia RCC-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 3: TRANSPARENT / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 3: TRANSPARENT / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 3: TRANSPARENT / Nokia RCC-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 4: SKINNED / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 4: SKINNED / Nokia Twin-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 4: SKINNED / Splash screen

NOTICE: On splash screens larger rounded corners are allowed to be used

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential

DESIGN THEME 4: SKINNED / Nokia Sport Manager-type application

ÂŠ2006 Nokia

Nokia Desktop Identity 2.0 / 2006-06-27

Company confidential