LE LOGO NORMALISATION DIGITAL MEDIA GUIDELINES

Transcription

1 1 LE LOGO NORMALISATION DIGITAL MEDIA GUIDELINES JANUARY 2015

2 Before taking any kind of action, please check to make sure that what you plan to do is in line with Total s strategy. Refer any questions to a digital media contact at the following address: holding.com-digital@total.com

3 CONTENTS BASICS 05 TYPEFACES 07 COLORS 09 BACKGROUNDS 11 BRAND-BLOCK 15 BRAND-BLOCK BAND ARCHITECTURE 19 FLAT DESIGN 21 RESPONSIVE DESIGN 23 HEADER 33 FOOTER 39 CONTACT FORM INTERFACE ELEMENTS 45 INDICATORS 48 ACTION BUTTONS 50 TEXT LINKS

4 4 BASICS

5 5 BASICS TYPEFACES

6 6 TYPEFACES Two main typefaces are used for digital media: Helvetica Neue and Arial. Helvetica Neue is used for headings, for highlighting key information and for all browsing tools (main menu bar, buttons, links, etc.) Arial is used for body text and secondary information. Helvetica Neue is not available for all alphabets. Below is a list of the fonts that can be used on digital media for various alphabets: Countries using a Latin or Arabic alphabet: - Helvetica Neue 37 Thin Condensed - Helvetica Neue 47 Light Condensed - Helvetica Neue 67 Medium Condensed - Helvetica Neue 77 Bold Condensed - Arial Countries using Chinese characters: - M Hei PRC Light - M Hei PRC Medium - M Hei PRC Bold - M Hei PRC Xbold - Arial Countries using the Korean (Hangul) alphabet: - YD Gothic Light - YD Gothic Medium - YD Gothic Bold - Arial Countries using a Cyrillic alphabet: - Neue Helvetica Cyrillic 35 Thin - Neue Helvetica Cyrillic 45 Light Helvetica Neue and its variations for other alphabets can look different depending on the navigator used.

7 7 BASICS COLORS

8 8 COLORS The color specifications are compliant with W3C s Web Content Accessibility Guidelines (WCAG). This means that they ensure content is readable on any type of screen. Color specifications are designed to provide sufficient contrast and appropriate readability. The W3C-WCAG accessibility guidelines recommend two contrast ratios: 3:1 = for text or solid color swatches that are large enough to provide easy readability. 4.5:1 = for smaller text or solid color swatches that are more difficult to read. All of the colors presented opposite have a contrast ratio of 4.5:1, except #DB7E04 orange which has a ratio of 3:1. In order to ensure optimal readability, #DB7E04 orange must not be used for texts or solid color swatches. The color palette is organized into three levels Level 1 Level 1 is made up of three colors: Total red, a warm grey and a crimson red. Total red is the brand s identifying color, which we must capitalize on. It should be preferred to other colors and be present even in small swatches. The warm grey and the crimson red complement this level to allow for as great a use as possible. Level 2 Accompanying colors designed to enhance the digital expression of the brand. All Level 2 colors are derived from the logo. Level 3 Minor colors used for smaller items, such as graphics or data visualization.

9 9 BASICS BACKGROUNDS

10 10 BACKGROUNDS Three background colors can be used on digital media: 1 1 White background This background must only be used as the text box. In this case, the typefaces must be in Total red or dark grey. The color blocks that can be used against this white background are Total red, crimson red and light grey. 2 3 Light gray background This background must only be used with Total red, crimson red, and white color blocks. Shaded background This background must only be used with Total red, crimson red and white color blocks. 2 Dark grey Color #f8f8f8 No other background is allowed. 3 Shaded background Creation of a pattern then application of the pattern Color #e8e8e8 Background color #f8f8f8

11 11 BASICS BRAND-BLOCK PRESENTATION CLEAR SPACE AND MINIMUM SIZE INCORRECT USAGE

12 12 BRAND-BLOCK PRESENTATION The reference brand-block is made up of three components: - The symbol depicting energy currents. - The Total name in the trademark typeface. - The Committed to Better Energy, baseline written in Helvetica Neue 77 Bold Condensed. The reference brand-block is its horizontal configuration. The vertical logo may only be used on social networks and for unusual banner formats. Red R V 0 - B 50 Dark blue R0 - V65 - B150 Light blue R75 - V150 - B205 Yellow R245 - V150 - B0 Grey R113 - V113 - B113

13 13 BRAND-BLOCK CLEAR SPACE AND MINIMUM SIZE Clear space A clear space is left around the brand-block to protect readability. This clear space area is standardized in line with the size of the brand-block. It must be free of graphic components such as objects and text. x x x x x Minimum size: 209 pixels This is the minimum width of the brand-block. To protect readability, the brand-block should never be reduced below this size. 209 pixels

14 14 BRAND-BLOCK INCORRECT USAGE The brand-block guidelines are mandatory. No modifications in the color or shape of the logo symbol are allowed. Commited to better energy Commited to better energy Suspendisse lectus tortor, adipis nec dignit sit amet, ultricies sed, dolor. Lorem ipsum dolor sit Suspendisse lectus tortor, adipis nec dignit sit amet, ultricies sed, dolor. Lorem ipsum dolor sit brand-block brand-block The energy sphere must be accompanied by the Committed to Better Energy baseline. No movement is allowed for the brand-block or any of its components. Do not present the brand-block against Do not a colored, present the black brand-block or complex against background. a colored, black or complex background.

15 15 BASICS BRAND-BLOCK BAND CONSTRUCTION INCORRECT USAGE

16 16 BRAND-BLOCK BAND CONSTRUCTION The gradient band around the brand-block is an integral part of Total s graphic style. It is constructed in a specific way to create a consistent look for the Group s publications. The diagram below shows how the band is created using Adobe Illustrator. The brand-block may be used without its band for tablet and smartphone applications. The brand-block band contains nothing but the brand-block. Technical specifications The gradient is linear. The height of the band depends on the digital media used. Its width can vary. The position of the first two handles is flexible, so that the logo remains readable and the baseline continues to appear on a white background.

17 17 BRAND-BLOCK BAND INCORRECT USAGE The brand-block band guidelines are mandatory. No modifications in the color or shape of the logo symbol or typeface are allowed. Lorem ipsum nec dolores serum amet (see examples on page 12)

18 18 ARCHITECTURE

19 19 ARCHITECTURE FLAT DESIGN

20 20 FLAT DESIGN Total s websites are developed in flat design. Flat design uses short texts, extremely simple forms, eye-catching pictures, solid colors, strong contrasts for readability, capitalized typefaces and grid-based content display.

21 21 ARCHITECTURE RESPONSIVE DESIGN

22 22 RESPONSIVE DESIGN Responsive design is a web design approach that enables websites to automatically adapt to the user s screen size. 1 Total s websites must be built using a responsive design approach that enables them to adapt to four different screen sizes. Their construction is based on resolutions rather than devices. The responsive design approach is used with breakpoints. Each breakpoint requires a suitable format. 1 Tablet (landscape) and desktop computer Width: 960 pixels. Height: 82 pixels Tablet (portrait) Width: 720 pixels. Height: 82 pixels. 3 Smartphone (landscape) Width: 480 pixels. Heigth: 60 pixels. 4 Smartphone (portrait) Width: 320 pixels. Height: 60 pixels. 4 N.B.: All pages must be centered by width. The page width is 1,420 pixels centered with useable area of 960 pixels. There is therefore a bleed of up to 1,420 pixels. Beyond 1,420 pixels, the background remains white.

23 23 ARCHITECTURE HEADER DESKTOP VERSION TABLET VERSION SMARTPHONE VERSION

24 24 HEADER DESKTOP AND TABLET (LANDSCAPE) VERSION The Total header is made up of: Secondary navigation links The brand-block and its gradient band The main navigation bar Four icons (Share, Print, A+, A-) 2 5 The gradient grey border Construction

25 25 HEADER DESKTOP AND TABLET (LANDSCAPE) VERSION The secondary navigation links These links are located in the upper right-hand corner. Up to five such links are allowed in addition to the search bar. These links are made up of the following components: 1 External links 1 Internal links External redirect links located on the left are separated from redirect links to internal pages on the website located on the right by a pipe separator. On mouseover, these links become underlined in red or grey depending on the links initial color. The language switch is always located to the left of the search bar. When the site is available in more than two languages a drop-down menu appears, otherwise it is not used. The language text labels must be fully written out, e.g., ENGLISH and not ENGL External links Internal links 3 The search bar, which is located on the far right. The search bar works as follows: - The user can enter the keywords in the entry field. - The user can click on the magnifying glass icon to be redirected to the advanced search page. Links Color #ec1f40 (red) Color # (grey) Arial Bold 13 pt CAP 1 Pipe separator Color #6f7072 Height 29 px Thickness 1 px Drop-down menu cursor Color # (grey) Height of triangle 22 px Search bar Color # Icon # Size 130 x 24 px Arial Regular 13 pt The TOTAL.COM link must be in red and capitalized. Secondary navigation links are not allowed above the brand-block.

26 26 HEADER DESKTOP AND TABLET (LANDSCAPE) VERSION The main navigation bar The main navigation bar s tabs are on the third line of the header. The main navigation bar is always horizontal. The first tab must be vertically aligned with the T bar of Total. The titles of the tabs are always justified left. The tab s width fits the width of its wording, which cannot exceed two lines. If the wording only takes one line, it is justified lower left. Although it is recommended to not have more than five tabs, up to six are allowed. Tab widths must not exceed 80 pixels. Spacing 40 pixel Links Color # Helvetica Neue 77 Bold condensed 18 pt CAP Using the navigation bar The name of the page that the internet user is viewing remains in grey. Names in grey can be clicked on and in doing so the user is redirected to the page concerned. The red curser is located under the active tab but if the user moves the mouse to the other tabs, the cursor follows the mouse. Active state Color #e12131 Helvetica Neue 77 Bold condensed 18 pt CAP Red curser #e12131 Width adapted to width of name Thickness 8 px

27 27 HEADER DESKTOP AND TABLET (LANDSCAPE) VERSION The tools On the same line as the tabs, at the right end of the header, are the following four icons: Share, Print, A+, A-. They should be horizontally aligned with the search bar located on the first line. If there are less than four icons, the icons are justified right. 20 px 7 px 28 px Icons Background color #e6e6e6 Icon color # Size 28 x 20 pixel The gradient grey border The grey border is positioned between this third line and the beginning of the page s visual. It is graded in accordance with the same guidelines as those for the brand-block band. 8 px Note: The header is the same for all of the website s pages.

28 28 HEADER TABLET (PORTRAIT) VERSION The header is created in the same manner as that of the desktop version. Tablet 720 px (portrait) format Two major modifications impact the creation of the header: The Print icon does not appear (this function is not available for tablets). The search bar is positioned between the three icons and the grey border. For the tablet version, the secondary navigation links may be positioned above the brand-block. This, however, is an exception. The Total.com and Contact links are mandatory. Secondary navigation links Color #ec1f40 (red) Color # (grey) Arial Bold 13 pt CAP Main navigation tabs Color # Helvetica Neue 77 Bold condensed 16 pt CAP Construction

29 29 HEADER SMARTPHONE (LANDSCAPE) VERSION Smartphone 480 px (landscape) format The number of links in the secondary navigation bar is reduced to three for smartphone formats. The Total.com and Contact links as well as the language switch must remain in this bar. The simplified navigation bar differs from the desktop version. It is illustrated by a burger menu, represented by three red horizontal lines together with the word BROWSE in red capital letters. A drop-down menu appears when the burger menu is clicked. The navigation bar comes into play when the burger menu is touched, pushing the page s content towards the bottom of the screen in order to leave space for the navigation block. To close the menu, click on the red cross labeled CLOSE. Once the menu has appeared, the user can access the site s various sections and the secondary navigation links. There is no Print icon (this function is not available for smartphones). The search field is positioned alongside the icons. Browse button Color #ec1f40 Helvetica Neue 77 Bold condensed 16 pt CAP Construction of the gradient grey border Main navigation tabs Color # Helvetica Neue 77 Bold condensed 16 pt CAP Tab selected Color #ec1f40 Secondary links Color #8d8d8f Helvetica Neue 77 Bold condensed 16 pt CAP

30 30 HEADER SMARTPHONE (LANDSCAPE) VERSION Smartphone 480 px (landscape) format Construction Pipe separator Handle 1 Color # Opacity 100% Position 0% Handle 2 Color # Opacity 100% Position 40% Handle 3 Color #FFFFFF Opacity 100% Position 60%

31 31 HEADER SMARTPHONE (PORTRAIT) VERSION Smartphone 320 px (portrait) format The number of links in the secondary navigation bar is reduced to two for smartphone formats. The Total.com link and the language switch must remain in this bar. If there is no language switch, the Contact link is mandatory. The simplified navigation bar differs from the desktop version. It is illustrated by a burger menu, represented by three red horizontal lines together with the word BROWSE in red capital letters. A drop-down menu appears when the burger menu is clicked. The navigation bar comes into play when the burger menu is touched; pushing the page s content towards the bottom of the screen in order to leave space for the navigation block. To close the menu, click on the red cross labeled CLOSE. Once the menu has appeared, the user can access the site s various sections and the secondary navigation links. There is no Print icon (this function is not available for smartphones). The search field is positioned alongside the icons. Browse button Color #ec1f40 Helvetica Neue 77 Bold condensed 16 pt CAP Construction of the graded gray border Main navigation tabs Color # Helvetica Neue 77 Bold condensed 16 pt CAP Tab selected Color #ec1f40 Secondary links Color #8d8d8f Helvetica Neue 77 Bold condensed 16 pt CAP

32 32 HEADER SMARTPHONE (PORTRAIT) VERSION Smartphone 480 px (portrait) format Construction Pipe separator Handle 1 Color # Opacity 100% Position 0% Handle 2 Color # Opacity 100% Position 40% Handle 3 Color #FFFFFF Opacity 100% Position 60%

33 33 ARCHITECTURE FOOTER DESKTOP VERSION TABLET VERSION SMARTPHONE VERSION

34 34 FOOTER DESKTOP AND TABLET (LANDSCAPE) VERSION The footer is divided into two sections: 1 SEO footer Column headings are not clickable. Only level 2 titles are clickable. 1 2 Redirect links 3 Translation of the baseline The translation of the baseline COMMITTED TO BETTER ENERGY is mandatory if the website is not in English. 2 3 Construction Minimum margin Minimum margin Minimum margin

35 35 FOOTER DESKTOP AND TABLET (LANDSCAPE) VERSION The SEO footer The SEO footer shows the website s main sections. It only shows the first two levels of the website s tree structure Level 1 headings These are shown in red capital letters and form the headings of each of the columns. Here, level 1 is made up of four columns. Level 2 headings Presented one below the other, they begin with a red triangle and are written in grey with the first letter of the first word capitalized. Level 1 heading Color #e20031 Arial Bold 14 pt CAP Level 2 heading Color #6f7072 Arial Regular 14 pt Line spacing 22 pt Active link # Triangle Color #e20031 Size 8 x 9 px Background color #f8f8f8 The redirect links The following redirect links are mandatory: Contact, Legal information, Cookies and confidentiality, Site map and 2015 Total. These links may vary but they must be written in Arial font, in grey with the first letter of the first word capitalized. They are spaced 26 px apart and separated by a grey pipe. These links must be centered on the width of the page. Maximum of 6 links allowed Translation of the baseline Translation of the baseline is mandatory if the website is not in English; it is always capitalized, in Total red and centered. Links Couleur #6f7072 Arial Regular 13 pt Pipe separator Color #6f7072 Height 14 px Thickness 1 px 26 px spacing Translation of baseline In capitals Color #e20031 Arial Regular 13 pt

36 36 FOOTER TABLET (PORTRAIT) VERSION Tablet 720 px (portrait) format The footer is laid out differently from the desktop version. Levels 1 and 2 are shown in two columns. Level 1 heading Color #e20031 Arial Bold 14 pt CAP Level 2 heading Color #6f7072 Arial Regular 15 pt Line spacing 22 pt Active link # Redirect links Color #6f7072 Arial Regular 13 pt Translation of baseline In capitals Color #e20031 Arial Regular 13 pt Construction

37 37 FOOTER SMARTPHONE (LANDSCAPE) VERSION Smartphone 480 px (landscape) format The footer is laid out differently than the desktop version s footer. Levels 1 and 2 are shown in one column. Construction Level 1 heading Color #e20031 Arial Bold 18 pt CAP Level 2 heading Color #6f7072 Arial Regular 18 pt Line spacing 28 pt Active link # Redirect links Color #6f7072 Arial Regular 14 pt Translation of baseline In capitals Color #e20031 Arial Regular 13 pt

38 38 FOOTER SMARTPHONE (PORTRAIT) VERSION Smartphone 320 px (portrait) format The footer is laid out differently than for the desktop version. Levels 1 and 2 are shown in one column. Unlike the desktop version, the redirect links are not on a single line. No more than two lines per line are allowed. Construction Level 1 heading Color #e20031 Arial Bold 18 pt CAP Level 2 heading Color # Arial Regular 18 pt Line spacing 28 pt Active link # Redirect links Color #6f7072 Arial Regular 14 pt Translation of baseline In capitals Color #e20031 Arial Regular 13 pt

39 39 ARCHITECTURE CONTACT FORM DESKTOP AND TABLET (LANDSCAPE) VERSION

40 40 CONTACT FORM DESKTOP AND TABLET (LANDSCAPE) VERSION Desktop and tablet 960 px (landscape) format A contact form may contain different types of fields: 1 radio button fields Heading Color #e20031 Helvetica Neue Light Condensed 60 pt CAP 2 3 text fields fields with drop-down lists 1 2 Other parts of the contact form: Send button *mandatory fields personal data 4 5 6

41 41 CONTACT FORM DESKTOP AND TABLET (LANDSCAPE) VERSION Radio button field: Mrs., Mr., etc. Clicking on one of the radio buttons fills the button in red Radio button Outline 1 px Color #66666 Red circle #e20031 Size 12 x12 px Text Color #6f7072 Helvetica Neue Medium Condensed 17 pt Text field: Last name, first name, address, etc. By clicking on the text field a cursor appears. The text is shown in dark grey. It is possible to integrate single and multi-line text fields. The multi-line text field has a set height as from four lines of text and a scrollbar appears on the right side of the field. Text Color #6f7072 Helvetica Neue Light Condensed 21 pt 856 Text in the field Color #6f7072 Helvetica Neue Medium Condensed 17 pt Field with drop-down list: You are,... By clicking on the triangle the list drops down. The default text proposed within this field is Select. The user can then select an item from the list. Text Field with drop-down list Color #6f7072 Helvetica Neue Medium Condensed 17 pt 16 Red triangle Color #e20031 Size 8 x 7 px 38

42 42 CONTACT FORM DESKTOP AND TABLET (LANDSCAPE) VERSION Required fields: Required fields have an asterisk after their name. If this field has not been filled in when the contact form is sent, an error message appears and the field is highlighted in red. Required fields in the Drupal websites function as shown opposite. Send button : The Send button is aligned with the right side of the entry fields Send Button Color bouton #e20031 Helvetica Neue Medium 17 pt White Text Color #6f7072 Arial Regular 13 pt

43 43 CONTACT FORM DESKTOP AND TABLET (LANDSCAPE) VERSION Clicking on the Send button sends the contact form. A page is then displayed confirming that the form has been sent. Confirmation text Color # Helvetica Neue Medium 28 pt Line spacing 22 pt Title Color # Helvetica Neue Medium 40 pt Line spacing 22 pt

44 44 INTERFACE COMPONENTS

45 45 INTERFACE COMPONENTS INDICATORS TRIANGLE BULLETS ANGLE BRACKETS

46 46 INDICATORS THE TRIANGLE Note: For information concerning colors, please refer to the Basics section of the digital media guidelines (page 8). 8 9 Triangle Color depends on the use Size 8 x 9 px Triangles are used for several purposes: 1 To read the rest of an article: To invite the user to read the rest of an article, three dots are inserted followed by a space and a triangle. 1 2 To insert a bulleted list. 2 3 To indicate an action button: These action buttons are clickable. A triangle is inserted at the beginning of the button followed by the name of the button with the first letter capitalized and the remaining letters in lower case. 4 To indicate a clickable link: A red triangle is inserted at the start of the link followed by the name of the link, with the first letter capitalized and the remaining letters in lower case. 3 4 The space between the triangle and the text is 13 px.

47 47 INDICATORS BULLETS The round bullet is the second type of indicator. The bullet is spaced 18 px away from the first letter of the text and leaves room for the title of the article or the point to be developed. This title is capitalized, in grey and in bold Bullet Color depends on use Size 12 x 12 px Note: For information concerning colors please refer to the Basics section of the digital media guidelines (page 8).

48 48 INTERFACE COMPONENTS ACTION BUTTONS

49 49 ACTION BUTTONS There are three types of action buttons: 1 2 Those shown with a capital letter followed by lower case letters, in white in a red box, and preceded by a white triangle. The dimensions of the button are: 210 x 39 px in 960 format 202 x 39 px in 720 format 235 x 39 px in 480 and 320 format Those shown with a capital letter followed by lower case letters, in red in a white box and preceded by a red triangle. The dimensions of the button are: 184 x 40 px in 960 format 179 x 34 px in 720 format 205 x 40 in 480 and 320 format Button 1 Color #e20031 Size 210 x 39 px Desktop 960 format: Helvetica Neue Medium 17 pt - #e20031 Tablet 720 format: Helvetica Neue Mediuim 16 pt #e20031 Smartphone 480 (landscape) format: Helvetica Neue Mediuim 19 pt #e20031 Smartphone 320 (portrait) format: Helvetica Neue Mediuim 18 pt #e20031 Button 2 Color #b0042a There are two variants of the red button: The Total red and the crimson red. The Total red button becomes crimson red at rollover. 3 Those shown with a capital letter followed by lower case letters, in dark grey in a light grey box and preceded by a dark grey triangle. 2 Button 1 White Color Size 183 x 40 px Helvetica Neue Medium (font size depends on above format) Color #e20031 Button 2 Helvetica Neue Medium (font size depends on above format) Color #b00429 The dimensions of the button are: 184 x 40 px in 960 format 179 x 34 px in 720 format 205 x 40 in 480 and 320 format The light grey button becomes dark grey at rollover. It is not allowed to have two action buttons within the same block. 3 Button 1 Color #f8f8f8 Size 210 x 39 px Helvetica Neue Medium (font size depends on above format) Color #6f7072 Button 2 Color # No other button form is allowed.

50 50 INTERFACE COMPONENTS TEXT LINKS

51 51 TEXT LINKS Text links are clickable links such as the one shown opposite for information purposes: Discover other data These are links written in red or grey on a white background and always justified right. On mouseover, these links are underlined in red or grey depending on the link s initial color. 13 Link 1 Desktop 960 format: Helvetica Neue Medium 17 pt Color #e20031 Tablet 720 format: Helvetica Neue Medium 16 pt Color #e20031 Smartphone format (480 and 320): Helvetica Neue Medium 19 pt Color #e No other link form is allowed. Link 2 Color #b00429 Desktop 960 format: Helvetica Neue Medium 17 pt Color #b00429 Link 3 Color # Desktop 960 format: Helvetica Neue Medium 17 pt Color #6f7072 Appearance on mouseover: Underlined