Page 1

Style Guide

Project:

Nokia N-Gage Online

Date:

6 April 2007

Nokia Contact: David King, david-james.king@nokia.com RG/A Contact: Colin Mutchler, colin.mutchler@rga.com

NOKIA

650 Townsend Street

San Francisco

CA 94103

www.n-gage.com

415 581 7600

350 West 39th Street

New York

NY 10018

www.rga.com

212 946 4000


Contents Chapter 1

Grid & Page Structure

Chapter 2

Typography

Chapter 3

Color Palette

Chapter 4

Masthead & Footer

Chapter 5

Modules & Tout Boxes

Chapter 6

Game Graphics & Site Imagery

Chapter 7

Page Spec Reference

Chapter 8

Flash Specifications


Styleguide

1

Grid & Page Structure

Content Grid

Page centers on background if browser window is open larger than 980




Styleguide

1

Grid & Page Structure

Page Background Elements

A background graphic sits behind the overlaying page module. It is a gradated background, containing an orange “n” and the n-gage logo positioned 90% counterclockwise, disappearing on a z-axis behind the overlapping page module. The background color extends to the right if the user maximizes his browser, but the “n” and logo elements should remain fixed.

Background n arc Orange #eb992b with Inner Shadow Layer effect color # cd4100 -13 angle; Distance: 5 / Choke: 10 / Size: 21

Background Color: gradient light grey to light blue: #ececec (grey) to #d2dee5 (blue) Expands when user maximizes browser.

n.gage logo flipped 90% on a z-axis disappears behind the overlapping page. 48% #ffffff Fixed position.




Styleguide

1

Grid & Page Structure

Page Structure

The page module overlaps the graphic background.

Navigation sits on top of orange “n�. 16 pts from top of nav buttons to top ofscreen. 16 pts from top of page module to top of screen background.

Page Module:

980 px wide x varying height. Top is straight, bottom has rounded edges. Linear gradient from left to right: white #ffffff to blue #9bbacd

Footer

10 pt Nokia Standard. 22 px from base of page module to base of type.

n.gage logo

lies behind page module in fixed position. may disappear entirely as length of page module extends on top.




Styleguide

1

Grid & Page Structure

Arcs

On almost every page, a different angle or orientation of the “n� arc should appear ghosted on the blue gradient background. These are meant as page accents, not as a primary feature. Changing the positioning of the arcs lends graphic interest to the pages and helps differentiate sections. Arcs are primarily a semi-transparent shade of white that should be adjusted on a case to case basis so that they read on the gradient background.

White arcs 22% opacity #ffffff

Example: Game Page

Example: Showroom Page

arcs can be used to anchor and accent a device

Double white arcs top arc 50% opacity #ffffff bottom arc 50% opacity #ffffff Both arcs overlayed with 28% blue #a1b2bb multiply layer.

(Use these multiply layer blues when the white arcs are not showing on the white side of the background gradient.)




Styleguide

1

Grid & Page Structure

Arcs

On pages that are primarily text and without much graphic noise, two shades of arcs can be used. The orange “n” of the background appears as if it were showing through the page module. This semi-transparent orange “n” should always be in a fixed position that lines up with the fully opaque background “n” behind it.

The “n” is the same color as the background “n”, but is 30% opaque with a gradient layer mask to adjust transparency. Example: Game Page

Page Background “n”

Double white arcs top arc 10% opacity #ffffff bottom arc 20% opacity #ffffff




Styleguide

1

Grid & Page Structure

Dropdowns & Buttons Dropdowns these are used in cases where the pulldown needs to be a primary action on the page

these are used when dropdown appears within modules:

specs of the exposed dropdown (for both cases): 100% white box with straight top and rounded edges, with Layer Effects: Linear Gradient top orange #eaa035 to bottom white #ffffff , angle 90% Dropshadow: 19% opacity, 120 degree angle. Distance: 5 / Spread: 0 / Size: 2 Type is 10/13 pt Nokia Standard black

CTA Buttons background: 70% d6d8d5 with 70% abafab 2px stroke arrow: #d76818 with 32% drop shadow




Styleguide

2 Typography font: Nokia Standard Roman

headers

20pt #d48424

subheaders

15pt #d48424

2nd level subheaders

12pt, 14pt leading #000000

tout headers

13pt #d48424

body copy

11pt, 13pt leading #000000

link text

11pt #434444

link text rollover

11pt #434444, underlined

examples:

header body copy

2nd level subheader

tout header subheader

link text

link text - rollover state




Styleguide

3

Color Palette

10


Styleguide

4 Masthead & Footer

Navigation

font

Initial State: Nokia Standard Roman 11pt color #44494c Clicked & rollover: Nokia Standard Roman 11pt color #000000 Subnav: Nokia Standard Roman 10pt (same color specs apply)

width between buttons 3px

nav bar height 22px

width 64px

width 74px

width 111px

width 111px

width 60px

Background color Initial State: 70% d6d8d5 with 70% abafab 2px stroke Clicked: aab7be with 939ea3 stroke

subnav bar height 16px

- width is dependent on amount of subnav items - subnav always appears under the center of the button except: 1. when it runs under the logo, in which case, it gets pushed flush left with the top nav 2. when it runs under the search bar, in which case it gets pushed flush right with top nav

11


Styleguide

4 Masthead & Footer

Search Bar/ Log in

width between search and go 1px width between go and Log in 10px

search bar height 22px go button height 19px

search bar go button width 116px width 25px

When user clicks into Search bar, the text “search� disappears and cursor appears to type search criteria.

Background colors: Search bar: 75% ffffff with 10% drop shadow, 75% a05d19 inner shadow, 1px dd771f stroke at 100% Go Button: 70% d6d8d5 with 70% abafab 2px stroke Log in/out button: 70% d6d8d5 with 70% abafab 2px stroke Log in/out arrow: d76818 with 30% drop shadow Log in/out font color #ffffff when it appears on orange and #00000 when it appears on grey background

width between nav buttons and search 5px

12


Styleguide

4

Masthead & Footer

Register

register bar height 40px

register bar width 183px

Background colors: 80% ffffff with 5% drop shadow Arrows: d76818 with 30% drop shadow Register font: Nokia Standard Roman Bold 13pt #44494c Find others font: Nokia Standard Roman 11pt #44494c

footer

unclicked link color #434444

clicked link color #8c8d8f

Nokia logo 53 px width

font: Nokia Standard Roman 10pt

13


Styleguide

5

Modules & Tout Boxes

Content Modules

Background Color: white with Layer Effects: Dropshadow: 19% black; Distance: 5; Spread: 0; Size: 2 Gradient overlay: bottom: #e9dcc0 gradates to #ffffff (white)

Content Modules can be two to four columns wide, depending on the information contained.

Outlined boxes

Use to contain large blocks of copy, tables, and to differentiate content in pages containing many solid content module boxes. This will help break up the space. 6 px base to top of outline 1 pixel curved outline box 50% of orange #d48424

16 px high

Subheader strip 50% of #9bbacd gradiates to #ffffff

14


Styleguide

5

Modules and Tout Boxes

Expanding Box favorite games heart icon: gradiates from # af3b0c (bottom) to #d9a627 (top)

Background Color: white with Layer Effects: Dropshadow: 19% black; Distance: 5; Spread: 0; Size: 2 Gradient overlay: bottom: #c1d4e0 gradates to #ffffff (white)

Drop down bar:

19 px high by varying width Gradient: #c1d4e0 gradates to #ffffff (white)

Stroked boxes Tipping arrows

14px x 14px white box with 2 pt stroke in #dfa049 untipped arrow: orange #d76818 expanded: black #000000

Overlay Subhead

13 pt u/lc #d48424

Box bg color: same as above Gradient: #c1d4e0 gradates to #ffffff (white)

Text 11pt/13 Nokia Standard black

15


Styleguide

5

Modules and Tout Boxes

Tout specs

16pt left edge to text gradient blue #c1d4e0 to white #ffffff 20% drop shadow 180px width 16pt space between touts 25pt base of tout header to top headers 13pt #d48424 link text 11pt #434444

25pt base to top

Get N-Gage touts

Promo touts

82px height 61px width

136 height max character count: 42 header character count: 10 Landing page horizontal touts

112px height

179 width

301px width New/Coming Soon (on Showroom landing page)

gradient grey #7d858c to #ffffff with 29% drop shadow at a 66 degree angle

Close Box 16px height 16px width gradient overlay: bottom orange #ea9135 to #fce8c6 with 1px #e8772b stroke X color: 565451

font: Nokia Standard Roman Bold (caps), color #d66417

16


Styleguide

6

Game Graphics & Site Imagery

Logged in Home Page Primary Imagery Sizing: On the home page, images are always shown 980 width (full screen length) x 319 high Game art can be images taken from games or game title screens.

game title: 20pt #ffffff, game description: 12pt #fffff, text will be in xml overlay: 80px height, 50% #000000 gradiates to transparent

Game Page Primary Imagery Sizing: Game page images are always shown 980 width (full screen length) x 319 high If the user opts to collapse the Friends menu, any touts in the 5th column move up and overlap the primary image.

Game Graphics on screens:

72px width 97px height

17


Styleguide

6

Game Graphics & Site Imagery

Can use same asset, resized proportionally for the following: (refer to rounded_corners_square.psd)

58px width 57px height appears on Showroom page

37px width 36px height appears on Get N-Gage device page, in the overlay

Videos & Screens Overlay

sized down proportionally from large screenshot 242px width 180px height

appears on Game title page, overlay

Landing Page Game touts (refer to rounded_corners_landingtouts.psd)

144px width 80px height

18


Styleguide

6

Game Graphics

Can use same asset, resized proportionally for the following: (refer to rounded_corners_template.psd)vv

appears within Showroom

160px width 120px height

appears within Arena Community 160px width 120px height

appears within Game Support

128px width 96px height

320px width 239px height

appears within Game Support

160px width 120px height

appears within Arena Community

160px width 120px height

appears on Landing 160px width 120px height appears on Game title page

19


Styleguide

6

Game Graphics

Site Imagery Sizing for all imagery (not limited to game graphics): Horizontal photos should be sized down proportionately from a 612 x 723 px format. Edges are always rounded - 15px radius at largest size (game support page, for example). Vertical photos should be sized downproportionately from an 640 x 480 px format. edges are always rounded. 82w x 61h px Use for sized down community modules

180w x 128h px Use for expanded community module

62w x 47 h px Use for news imagery

Badges & Icons Player Honor Badges Player Honors and Content Creation badges indicate the type of honor and provide additional information about a player. If the player has one honor, the badge is silver. If the player has more than one of these honors, the badge will be gold.

Social Equity Icons Icons are used to represent social equity and ‘bling’ to users’ profiles who participate in the community. Each icon represents a different kind of content or involvement, and the color indicates the level of involvement. 1-10 - bronze (gradiates from 957016 to c8b97c) 11-20 – silver (gradiates from 969696 to c9c9c9) 21+ - gold (gradiates from dbc540 to b29124)

As participation grows, these rules should be expanded to account for community power users.

Friends Reviews Tips Strategy guides

20


Styleguide

7

Page Spec Reference

Get N-Gage - Download + Install, step 1

base to top 37pt

header to left edge 33pt

base to base 35pt

Click to reveal overlay

Click to reveal overlay

22px left edge to text 22px base to top

background color #9bbacd, using screen layer style devices should fit within a 90px width by 105px height space

page template

21


Styleguide

7

Page Spec Reference

Get N-Gage - Download + Install, step 2

top 56pt header 20 pt #d4841a subhead 15 pt #d4841a

40pt inset

base to top 36pt base to base 35pt

25pt base to top Support header: 13pt #d36d00

all link text 11pt #44494c

all body copy 11pt #000000, 13pt leading

When user is logged in and friends module appears, all right hand touts drop below (and page expands if necessary.)

page template

22


Styleguide

7

Page Spec Reference

Get N-Gage - Device, landscape view

39pt height 470pt width

18pt base to base 16pt space between touts

25pt base to top

440px width by 480px height safe area for devices

horizontal devices should not exceed 440px width thumbnail devices should not exceed 110px width by 85px height

vertical devices should not exceed 480px height

Vertical view

122px from device left edge

70px from device to top

page template 110px width by 85px height safe area for device thumbs

23


Styleguide

7

Page Spec Reference

Get N-Gage - Device, overlay

rule color #f2ab66, 1px 32px base to top

icon image size 37x37px

408px overlay height 49px between rules

445px overlay width overlaycolor: gradient white #ffffff to blue #c1d4e0, 20% drop shadow

24


Styleguide

7

Page Spec Reference

Get N-Gage - View All Devices

devices that are not featured should not exceed 225px height

215px width by 225px height safe area for devices

380px width by 325px height safe area for featured devices

Vertical featured devices should not exceed 325px height

Horizontal featured devices should not exceed 380px width

25


Styleguide

7

Page Spec Reference

Arena Community - Logged in

these are dynamically resized from largest size

378px width

37px base to top 212px height

player icon image size: 44px wide x 34px high 61px height, 82px width 347px height icon image size: 62px wide x 47px high

icon image size: 62px wide x 47px high

icon image size: 45px wide x 34px high

378px width

page template

26


Styleguide

7

Page Spec Reference

Discover - Chapter pages all transparent devices are made up of 2 layers 1. bottom: 27% opacity, ‘hard light’ layer style 2. top: 47% opacity, ‘lighten’ layer style

141px base to top

58px base to bottom of player 71px width

play button color: gradient lt. orange #f7e7cb to orange #e28846 with # f7e7cb stroke 25px height 131px width

background color: # c3d7e2 at 60% opacity with 35% drop shadow

color: #754f36 color: #e28643

page template

27


Styleguide

7

Page Spec Reference

Game Title Page

108px base to top

12px distance

319px height

432px height

28px base to top 32px left edge to text

icon image size: 45px width 34px height

page template

28


Styleguide

7

Page Spec Reference

Game Title page - overlay 10px

22px distance 254px height

756px width

47px base to top

gradient: top - blue #c1d4e0 gradates to #ffffff (white), 94% opacity

page template

29


Styleguide

7

Page Spec Reference

Arena Community - Search 42px distance from rule to top of image

20px distance player icons: 43px width 32px height

page template

30


Styleguide

7

Page Spec Reference

Arena Community - Sort 28px base to top

58px distance between rules

39px base to bottom

page template

31


Styleguide

7

Page Spec Reference

Showroom -landing 762px width 38px distance 10px distance 84px base to top

Game image: 160px width 120px height

398px width Game icon: 58px width 57px height

16px space

Showroom -rollover 21px from text to left edge 23px base to top

page template

32


Styleguide

8

Flash Specifications

Any flash files developed for N-Gage.com will be required to contain actionscript hitbox tracking tags. Business requirements for metric collection goals need to be established as part of the brief and SOW to determine what actions in the flash file need to be tracked. Details for the technical implementation of hitbox tags in action script are in a document lives on the Nokia wiki at: http://nwiki.nokia.com/twiki/pub/PlayNewOnlineExperience/MetricsPlanning/HBX _FlashTrack_Free.doc

33

Nokia: N-Gage: (Site Styleguide: Interaction / Visual Design)  

April 2007: N-Gage Site Styleguide: Interaction / Visual Design Specifications