Presentation is loading. Please wait.

Presentation is loading. Please wait.

Adecco Group Web Platform (GWP) Visual Identity alignment Aligning VI – Adecco GWP v01.00 05 March 2010.

Similar presentations


Presentation on theme: "Adecco Group Web Platform (GWP) Visual Identity alignment Aligning VI – Adecco GWP v01.00 05 March 2010."— Presentation transcript:

1 Adecco Group Web Platform (GWP) Visual Identity alignment Aligning VI – Adecco GWP v March 2010

2 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

3 GWP Visual Identity Slide 3 Primary color swatches Adecco Red R234, G32, B3 #EA2003 Adecco Grey R148, G135, B122 #94877A White R255, G255, B255 #FFFFFF Black R0, G0, B0 # 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 page background R196, G189, B182 #C4BDB6 55% Special shade for line separator and main panel draw Special tint for panels and menu background colors

4 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% Use for href links

5 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

6 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

7 Page Overview Slide 7 GWP Visual Identity Page Container 960px

8 Page Container and inside content organization Slide 8 GWP Visual Identity 1. Page Header 2. Page Body 3. Page Footer

9 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 / BU 3.Site Header: optional text header to identify the site 4.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 Search 4 Action navigation 3 Site Header 6 Primary Navigation Min 10px above logo Min 10px below logo

10 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 links Min 10px above logo Min 10px below logo

11 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 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.

12 Page Body Grid default structure: 5 columns Slide 12 GWP Visual Identity Col 2 275px Col 3 275px 10px Col 1 180px Col 2 180px Col 3 180px Col 5 180px Col 4 180px 10px Col 1 180px Col 4 180px 10px Example with 4 columns structure Example with 3 columns structure Col 2 560px 10px Col 1 180px Col 3 180px 10px

13 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.

14 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

15 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

16 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.

17 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

18 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 colour100% tinted panel with white font colour Outlined rounded corners panel uses Adecco Grey 55% (#C4BDB6) colour

19 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 rolloverSmall button on rollover Example of small button

20 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, alert, details, , 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

21 Typography Body 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

22 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 ( 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 >) 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


Download ppt "Adecco Group Web Platform (GWP) Visual Identity alignment Aligning VI – Adecco GWP v01.00 05 March 2010."

Similar presentations


Ads by Google