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