Adecco Group Web Platform (GWP) Visual Identity alignment

Aligning VI – Adecco GWP v01.00 05 March 2010

Introduction

The following document is proposed to provide VI for the GWP. Following topics will be described:

•Colour palette: primary and secondary colours

•Page Background

•Page main organization

•Header

•Footer

•Page content grid

•Navigation: top navigation level, left navigation level (secondary) , breadcrumb (third level)

•Images

•Colour panels

•Forms

•Buttons

•Icons

•Typography: default text, titles, links, list items, table headers, etc…

GWP Visual Identity

Slide 2

GWP Visual Identity

Slide 3

Primary color swatches

Adecco RedR234, G32, B3#EA2003

Adecco GreyR148, G135, B122#94877A

WhiteR255, G255, B255#FFFFFF

BlackR0, G0, B0#000000

R223, G219, B215#DFDBD7

30%

R245, G243, B242#F5F3F2

10%

R250, G249, B248#FAF9F8

5%

R117, G108, B99#756C63

120%

Special shade for text smaller than H2

Special tint for pagebackground

R196, G189, B182#C4BDB6

55%

Special shade for line separator and main panel draw

Special tint for panels and menu backgroundcolors

GWP Visual Identity

Slide 4

Secondary colour swatches

R114, G76, B104#724C68

R76, G113, B137#4C7189

R73, G154, B180# 499ab4

R62, G139, B148# 3e8b94

R126, G140, B99# 7e8c63

R170, G162, B62# aaa23e

R171, G158, B121# ab9e79

R230, G224, B230# e6e0e6

R226, G230, B234# e2e6ea

R229, G237, B243# e5edf3

R226, G233, B235# e2e9eb

R233, G235, B228# e9ebe4

R241, G240, B226# f1f0e2

R241, G238, B232# f1eee8

10% 10% 10% 10% 10% 10% 10%

Use for href links

Page Background

The default given background is 5% Adecco grey: #FAF9F8.

It may be appropriate to allow the backgrounds to signify each brand and even the difference between the Adecco brand and the

Adecco Group brand.

The background is set by CSS so is easily changeable.

The background should surround the centralised page.

GWP Visual Identity

Slide 5

Page main organization

The page contains a central container 960px wide with at least 40px spacing above and 25px below the page container. The page

container holds the page header, page body and page footer. All contents in the page container are 10px away from the container

border in each direction

Just above the page container lay:

- On the left hand side the different languages choices in case of Multilanguage site. List of languages is display the same way than

header and footer link (see details in “links” part). Beginning of the list is 10px right from the left border of the main container, to be

aligned with logo and content, and 10px above the border. There is a 20px border between the top of the links and the window.

- On the right hand is a reminder in which website the user is, with the link to Adecco World (and its icon), 10px above the main

container and 10px left from the right border of the container to be align with the content.

-The container is rounded cornered (5px radius) with 3px shade. The grey used here is the Adecco Grey 55% (#C4BDB6)

GWP Visual Identity

Slide 6

Page Overview

Slide 7

GWP Visual Identity

Page Container 960px

Page Container and inside content organization

Slide 8

GWP Visual Identity

1. Page Header

2. Page Body

3. Page Footer

Page Header

The header has to fulfil many different requirements dependent upon the brand and site

1.Language / Country navigation: Current country identifier/selector (to the right), language selector (to the left). Both above the main container (10px above), and 10px away from the side border (as content within main container).2.Primary Logo: logo of the site brand / BU3.Site Header: optional text header to identify the site4.Activity navigation: Home, contact us, help, locate branch, candidate login, client login…5.Search box: just content or site wide context search (jobs, content, branches)6.Primary navigation: the top level menu navigation of the site.

For co-Branding purpose, a secondary logo can be placed instead of 4 and 5, is they are not used. Otherwise, the extra logo will be placed within the site header

To support this flexibility, the header does not have a prescribed height.

GWP Visual Identity

Slide 9

2 Logo

1 Language selection and Country navigation

5 Search4 Action navigation 3 Site Header

6 Primary Navigation

Min 10px above logo

Min 10px below logo

Page Footer

The footer provides by default links several “official” pages, as well as default copyrights information and sitemap. When a new site is created, these links are already created as well as their corresponding (blank) pages.

Additionally to default links, Content Manager can add many more links to advert more sites. Links can be text but also pictures, such as company logos.

Footer is inside main container: there is a 10px border on each side.

To support this flexibility in case of long list of links, the footer does not have a prescribed height to allow links to be displayed in more than one line.

GWP Visual Identity

Slide 10

Footer linksMin 10px above logo

Min 10px below logo

Page Body Grid

The main central component of the page is the page body.

This has a flexible 5 columns grid that can be used in numerous ways.

Each column is 180px with 10px spacing.

Between the top level navigation and the 5 columns grid itself lays the breadcrumb on the left hand side and the share button on the

right hand side (both vertically aligned). These components are displayed by default in all pages layouts except the homepage layouts,

and can be hidden by editing the page. Share Button can also be manually inserted anywhere in the page, including in header or

footer link if necessary. This button comes from the AddThis company, and only this button layout will be used.

GWP Visual Identity

Slide 11

A typical page will use 1-3-1 formation of columns:

•the leftmost column for secondary navigation or search filtering

•the central 3 columns for content (560px = 180x3 + 10x2)

•the rightmost column for related content.

This central content may also be treated as 2 columns of 275px each (10px spacing)

Pages such as the homepage (where secondary navigation is not needed) may use other column formations (2-3, 3-2, 2-2-1, etc)

The grid is designed for page text to span 3 columns for readability – it should not span 4 although some pages may use 4 columns to

display tables, reports, forms etc.

All columns combinations are provided in the “Available Pages Layouts” documentation.

Page Body Grid default structure: 5 columns

Slide 12

GWP Visual Identity

Col 2275px

Col 3275px

10px 10px

Col 1180px

Col 2180px

Col 3180px

Col 5180px

Col 4180px

10px

Col 1180px

Col 4180px

10px 10px 10px10px 10px

10px 10px10px

Example with 4 columns structure

Example with 3 columns structure

Col 2560px

10pxCol 1180px

Col 3180px

10px 10px10px

Navigation - Primary Navigation

Slide 13

GWP Visual Identity

Top level navigation bar

In addition to the activity navigation (contact us, help ....) there is the primary navigation in the page header and secondary

navigation in the leftmost column of the page content area.

•Bottom line of primary navigation go through the entire main content (no 10px borders). Bottom line colour is Adecco Grey 55%

(#C4BDB6)

•First tab starts at 10px from the left hand side

•The primary navigation should be at 16px (by default, although should be resizable) Adecco Grey 120%

•The display font should be VAG Rounded Light so sIFR , static images or css replacement can be used.

•The font should degrade to Arial if CSS / JavaScript / Flash not supported, or if the alphabet is not within VAG

•All menu items are in a tab. Unselected tabs have a background colour of Adecco Grey 10% (#F5F3F2) and a right line border

#e8e5e2

•The selected menu item should be highlighted with a tab having no background colour and no horizontal line.

•Selected Menu title is bold- but care must be taken to avoid horizontal movement of the other menu items.

•The rollover state should be Adecco Red, no underline.

Navigation - Secondary Navigation

Left hand side menu

•The secondary navigation should be Arial font at 11px (although resizable) Adecco Grey 120% (#756C63)

•Navigation title is 12px bold at 10px from the secondary navigation left border, followed by a 2px line

separator Adecco Grey 55% (#C4BDB6) 10px below.

•The selected menu item should be highlighted with a 10% Adecco grey

•If selected menu item is in a sub site (“Work with us” in this mock-up), the sub site title is bold and the red

chevron is pointing to the bottom.

•The rollover state should be Adecco Red, no underline.

•Navigation hierarchy should be shown with incremental indents and the Adecco link arrow (NB: graphic

applied with CSS and not an inline ‘>’ or > )

•Menu items separated with a 1px Adecco Grey 55% (#C4BDB6) horizontal line

Slide 14

GWP Visual Identity

Navigation – Third Navigation level

Breadcrumb

•Breadcrumb is located above the secondary navigation, at 10px from the left border.

•Font is Arial 10px.

•Each item in the breadcrumb is a link with the red chevron, which plays as item separator.

•Last item is default text in Adecco Grey 120% (#756C63) with grey version of chevron (not a “>”) as

separator in front of it

Slide 15

GWP Visual Identity

Images management

Image must have 72dpi resolution and be saved with

RGB colours .They should have 5px radius curved

corners on all corners.

Corners can be managed using CSS or edited at

source.

GWP Visual Identity

Slide 16

At small sizes square corners

are more appropriate when not

in a rounded corner panel.

(e.g. Image library thumbnails

<180px wide or <90px high).

When a small picture is in a

rounded panel corner and close

to one corner, most of the time

the picture must have rounded

corners as well.

You must pay attention to the size of each picture you add to the website. Even the

smallest can be optimized for the web without altering the quality of the picture.

Remember that the medium is web and the picture is displayed in a screen, there is no

need to have high resolution pictures for a simple banner.

If edited at source they should not be subsequently resized as this would change the 5px radius.

Coloured panels

•Panels should be coloured based on the tints of the secondary colour palette with either 100% or 10% tint.

•Only one plain colour is used, no top border with different colour. A 1px Adecco grey key-line panel may also be used.

•Font colour is white for 100% tint and default (Adecco Grey 120% #756C63) for 10% tint.

•Colour should be used consistently and ideally tie in with any images used - one or two colours used per page maximum.

•Panels can have title, either h2, h3 or h4 are authorized.

•Content in panel start at 10px from any border.

CSS code to handle rounded panel corner will be provided in the CSS documentation.

You shall use only this code to manage all rounded panel colours

As per the corners on images:

•Large panels (e.g. Content panels 180px+) should have 5px radius curves on all corners.. It should correspond to almost all panels

which will be created.

•Small panels (e.g. Highlights panels, just hosting a title or a sentence) have squared corners. See typography description below.

GWP Visual Identity

Slide 17

Coloured panels – available panels and their font color

GWP Visual Identity

Slide 18

Here are all available panel colours with their corresponding font color:

10% tinted panel with Adecco Grey 120% (#756c63) font colour 100% tinted panel with white font colour

Outlined rounded corners panel uses Adecco Grey 55% (#C4BDB6) colour

Forms and forms buttons

Forms are in a panel. They should be easily identified and use either no background colour or Adecco Grey 10% (#F5F3F2) for

differentiation.

Font colour stays as defined in panels for light background colours, i.e. Adecco Grey 120% (#756C63).

Buttons are defined in 3 sizes (160px, 120px and 75x without shadow), to match all needs. They consists of a background picture of

the button itself, and on top of it the button text in Arial white 14px bold. Rollover states includes reducing shadow and moving button,

and adding an inner shadow. All files will be provided by default in all websites.

Here are few examples of 180px wide panels which can host a form:

GWP Visual Identity

Slide 19

Example of large button

large button on rollover

Example of medium button

Medium button on rollover Small button on rollover

Example of small button

Other buttons and icons (incl Favicon)Additionally to the buttons in forms, there are several others buttons or icons that can be used out of the box:

Direction buttons, which can be used for animation:

Several icons to be use all other websites: print , email alert , details , email , information , look in interactive map

The Country navigation should use the “Adecco worldwide globe”:

Search boxes should use the ‘magnifying glass’ icon:

RSS feeds should use a standard RSS icon:

General share button linking to social networks: , and icons to social networks if necessary: , , , , , …

Button share is aimed to be present in each page, on the opposite side of the Breadcrumb (as mentioned before). It is displayed by

default and can be hidden by editing the page.

The recommended Adecco “favicon” is “A” logo to have better visibility in squared icons. Bigger icons (starting at 32x32px) must be

normal icons for web display. Exceptions can occur, for example in iPhone application where squared logo is much more visible.

GWP Visual Identity

Slide 20

TypographyBody copy & Headings

Body copy should be Arial 11px. If there is a first paragraph having the role of header within the page, the size might be 12px fort this first paragraph.

120% Adecco Grey (#756C63)

H1 should be VAG Rounded Light / Arial 25px

Adecco Grey (#94877A)

use sIFR where possible - default to Arial

H2 should be VAG Rounded Light 18px / Arial 18px

Adecco Grey (#94877A)

use sIFR where possible - default to Arial

H3 should be Arial 14px bold

120% Adecco Grey (#756C63)

H4 should be Arial 14px

120% Adecco Grey (#756C63)

Highlight panel should be Arial 14px white,

Adecco Grey 55% (#C4BDB6) background.

Text begins 10px after left border

GWP Visual Identity

Slide 21

Typography Links & Breadcrumbs

Links within body copy should be underlined in Adecco Link Blue

(R76 G113 B137 - #4C7189) with rollover Adecco red (R234 G32

B3 - #EA2003) underlined. This is the default style applied to links

(<a> html tag).

Links outside of body copy (e.g. Lists in panels) only need

underline in rollover state, but must be preceded with the Adecco

Red link arrow. (NB: as graphic applied with CSS and not inline

‘>’ or &gt;)

If links need to be used on dark backgrounds (tints of over 30%)

should be all in white, i.e. Text in white, white link arrow with

rollover white underline

Breadcrumbs should be Arial 10px (although should be resizable)

Adecco Link Blue (#4C7189) with red chevron as separator. Last

item has a grey chevron (not “>”) as separator and is not a link,

just text using Adecco Grey 120% (#756C63).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id eros nisl, ac placerat sem. Nulla fermentum ante eu eros aliquet varius. Morbi elementum lectus eget quam suscipit eu sagittis nibh vulputate. Fusce placerat turpis nec sapien elementum placerat. Aliquam at pharetra mauris.

GWP Visual Identity

Slide 22