CHARTE GRAPHIQUE - DAAF de La...

CHARTE GRAPHIQUEversion 2017

Juin 2017

2 Charte graphique 2017 du ministère de l’Agriculture et de l’Alimentation

La refonte d’une charte graphique est un acte fort. Elle matérialisel’image du ministère sur ses supports de communication et contribueà donner du sens et de la lisibilité à ses missions et à ses actions.

Cette «version 2017» propose une série d’outils articulés autour dequatre fondamentaux : l’identifiant gouvernemental personnalisé auministère de l’Agriculture et de l’Alimentation ; une grille de compo-sition de visuels ; une typographie et un nuancier de couleurs.L’association de ces éléments doit à la fois créer les codes d’un universgraphique singulier tout en autorisant souplesse et modularité.Les multiples combinaisons formelles permettent de créer des visuelsdifférenciés mais participant d’un même ensemble, à l’image des thématiques multiples portées par le ministère.

La charte 2017 a vocation à s’appliquer sur tous les supports :

– imprimés (brochures, dépliants…) ;

– digitaux (vignettes et bannières pour le web & réseaux sociaux, présentations diaporama…) ;

– vidéo (génériques, signatures…)

– physiques (kakémonos, stands institutionnels…).

SOMMAIRE

L’identifiant gouvernemental .......................................................................... 3

Grille de composition de visuels .................................................................... 4

Police de caractères ........................................................................................ 12

Quelques règles typographiques ................................................................. 14

Nuancier de couleurs ..................................................................................... 16

Éléments graphiques : textures .................................................................... 18

Éléments graphiques : pictogrammes .........................................................19

Lexique des formats d’image ........................................................................20

3Charte graphique 2017 du ministère de l’Agriculture et de l’Alimentation

L’identifiant gouvernementalÉlaborée par le Service d’information duGouvernement, la charte graphique del’identifiant de la communication gouverne-mentale s’applique à l’ensemble des admi-nistrations.

La charte gouvernementale préconisel’emploi d’un bloc marque contenantl’identifiant (Marianne) dans sa partie haute,et le nom de l’administration dans sa partiebasse.

Utilisation obligatoire

À NOTERDimensions du bloc

marque sur les

documents courants :

Pour un format A4 :

largeur 25 mm.

Pour un format A5 :

largeur 20 mm.

Taille minimale :

largeur 15 mm.

Placer le logo de

préférence sur un des

bords de la grille de

composition (voir. p. 4).

MINISTÈRE ouPRÉFECTURE

XXXXXXXXXXXXXXXXXXXXXXXXX

42

30 66

5

18

554

26

À échelle :1 (42x54 mm) :– filets : épaisseur 1 pt– le nom de l’administration est enTIMES NEW ROMAN, toutes capitales, corps 11, interlignage 0, interlettrage 10.

Couleurs :– BLEU C 100 M 80 / Pantone Reflex Blue / #000099– ROUGE M 100 J 100 / Pantone Red 032 / #FF0000

Version monochrome :N 50 / N 80 / N 100

La partie basse du bloc marque est divisée en deuxou plusieurs parties suivant le nombre d’adminis-trations. Les proportions du bloc marque doiventêtre respectées. La taille de la police est plus oumoins réduite en fonction du nombre de caractèresqui composent le nom des administrations et de laplace disponible.

MINISTÈRE XXXXXXXXXXXXXXXXXXXXXX

MINISTÈRE XX XX XXXXXXX XX XX XXXXXXXX

MINISTÈREXX XX XXXXXXXX

MINISTÈRE XX XXXXXXXXXXXXX

XX XX XX XXXXX


18

26

42

54

18

26

42

54

MINISTÈRE XXXXXXXXXXXXXXXXXXXXXX

MINISTÈRE XX XXXXXXXXXXXXX

XX XX XX XXXXX


L’identifiant de la communication gouvernemen-tale est utilisé sans bloc marque, centré en bas depage avec les noms des administrations en des-sous, le tout obligatoirement sur fond blanc.

OU

Le cas de plusieurs administrations

Caractéristiques principales du bloc marque

Marges blanches non conformes

Présence de deuxmarianne

Servicedéconcentré

Déformation(presser la touche majuscule en

redimensionnant le bloc marque)

Les erreurs à ne pas reproduire


Grille de composition de visuelsLa création de visuels s’appuie sur une grillecomposée de colonnes et de rangées qui divisent la surface du support. Elle sert debase pour l’agencement de blocs de couleur,blocs icono ou blocs de texte. Les multiplescombinaisons possibles permettent de per-sonnaliser un document tout en créant lescodes d’un univers stylistique.

La grille idéale est composée de carrés ;toutefois, la plupart des formats de documents n’étant pas carrés, la grillesera paramétrée de telle sorte que les blocsqui la composent s’approchent le pluspossible du carré.

Le nombre minimal de colonnes et de rangées est de 3.

Pour les formats A4 et A5, la grille est diviséeen 15 blocs (3 colonnes, 5 rangées).Elle est à adapter pour les formats nonstandard.


5

Grille de composition 3 colonnes / 5 rangées = bloc 66x57 mmRéserve blanche 6 mm Marges 15 mm

Format A4 › 210 x 297 mm

Pages intérieures :5 colonnes 32 mm / Gouttières 5 mm / Marges 15 mm

66 x 57mm

Charte graphique 2017 du ministère de l’Agriculture et de l’Alimentation

DOSSIERDE RENTRÉE2017

BLOC MARQUETaille du bloc marque :

largeur 25 mm

À placer de préférence

sur un des bords de la

grille de composition.

MODÈLEDE DOCUMENTmodele_A4.qpt

EXEMPLES


Grille de composition 3 colonnes / 5 rangées = bloc 45,5x39,6 mmRéserve blanche 6 mm Marges 15 mm

Format A5 › 148,5 x 210 mm

45,5 x 39,6 mm

Pages intérieures :6 colonnes 15,583 mm / Gouttières 5 mm / Marges 15 mm

LA SURVEILLANCEDE LA SANTÉDES FORÊTS


largeur 20 mm




MODÈLEDE DOCUMENTmodele_A5.qpt

EXEMPLES


Grille de composition3 colonnes / 6 rangées = bloc 29x33 mmRéserve blanche 6 mm Marges 10 mm

Pages intérieures :2 colonnes 37 mm / Gouttières 5 mm / Marges 10 mm

Format 1/3 A4 › 99 x 210 mm

29 x 33 mm CHIFFRESCLÉS


largeur 20 mm




MODÈLEDE DOCUMENTmodele_tiersA4.qpt

EXEMPLES


Pour un format 850x2000 mm3 colonnes / 7 rangées = bloc 260x260 mmRéserve blanche 35 mm

Kakémonos

260 x 260 mm

Agriculteursengagéspour ma planète


largeur 165 mm


au centre du kakémono

et en bas.

MODÈLEDE DOCUMENTmodele_kake.qpt

EXEMPLE


Publications digitales

Facebook1 Photo couverture828x315 px

2 Image partagée1200x630 px (affichée en largeur 450)

Twitter3 Photo couverture1500x500 px

4 Image partagée1024x512 px (affichée en 440x220)

Linkedin5 Photo couverture (page entreprise)974x330 px

6 Photo bannière646x220 px

1

2

3

4

5

6

10x5

12x4

8x4

8x3

6x2

8x3

AGRICULTURE.GOUV.FR

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.Jacques Mézard, MINISTRE DE L’AGRICULTURE ET DE L’ALIMENTATIONle 17 mai 2017


OpenOffice / PowerPointFormat par défaut 270x180 mm4 colonnes / 3 rangées = bloc 67,5x60 mm

Diaporamas de présentation

67,5 x 60 mm


largeur 30 mm




MODÈLEDE DOCUMENTmodele_diapo.odp

EXEMPLES

De nombreux modèles sont disponibles sur l’intranet du ministère :

http://intranet.national.agri/Outils-de-communication,3627


ÉcophytoRÉDUIRE L’UTILISATIONDES PESTICIDES

384 x 270 px

Pour un format 1920 x 1080 px5 colonnes / 4 rangées = bloc 384 x 270 px

Vidéo


largeur 300 px


au centre.

MODÈLEDE DOCUMENTmodele_video.ai

EXEMPLEGénérique animé

de début.

Écran de fin avec

signature du ministère

sur un fond de couleur

uni (cf. nuancier de

couleurs).


Police de caractèresLa police de caractères Open Sans est la typographie de référence à utiliser sur tousles supports de communication. L’usage pré-dominant de cette typographie participe à l’unité visuelle de la communication du ministère et à l’affirmation de son image institutionnelle.

Open Sans est une police sans sérif créée en 2010par Steve Matteson sur une commande de Google.Elle a été conçue pour obtenir un rendu optimalaussi bien sur le web qu'en impression ou sur desinterfaces mobiles. Open Sans est en licence libre.

À NOTERChaque graisse a son

équivalent en italique.

L’utilisation d’autres

typographies est

possible, à étudier

au cas par cas en

concertation avec

la direction artistique.

Pour les glyphes,

utiliser la police

WebHostingHub-Glyphs

Pour les puces

numérotées,

utiliser la police

Fyra Numeric Circle

0123

4567

89qw

https://fonts.google.com/specimen/Open+Sans

Open Sans Light 12pt

A B C D E F G H I J K L M N O P Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0

Open Sans


Open Sans Semibold


Open Sans Bold


Open Sans Extrabold


https://fonts.google.com/specimen/Open+Sans+Condensed

Open Sans Condensed Light


Open Sans Condensed Bold




Usages les plus courants

Pour le corps de texte : Open Sans 9 pt / inter 14pt.Configuration de la grille de page : corps 9, espacement 5.

Pour les titres :Tout majuscules : Open Sans Condensed Bold ou Lightcorps Xpt / inter. Xpt x 0,9

Bas de casse : Open Sans (toutes graisses)corps Xpt / inter Xpt

LOREM IPSUMDOLOR SIT AMETExemple : corps 28pt / inter. 25,2pt

Lorem ipsumdolor sit ametExemple : corps 28pt / inter. 28pt

velit, sed quia non numquam eius modi tem-pora incidunt ut labore et dolore magnam ali-quam quaerat voluptatem. Ut enim ad minimaveniam, quis nostrum exercitationem ullam cor-poris suscipit laboriosam, nisi ut aliquid ex eacommodi consequatur? Quis autem vel eumiure reprehenderit explicabo qui in ea voluptatevelit esse quam nihil molestiae consequatur, velillum qui dolorem eum fugiat quo voluptasnulla pariatur?

Sed ut perspiciatis unde omnis iste natus errorsit voluptatem accusantium doloremque lau-dantium, totam rem aperiam, eaque ipsa quaeab illo inventore veritatis et quasi architectobeatae vitae dicta sunt explicabo. Nemo enimipsam voluptatem quia voluptas sit aspernaturaut odit aut fugit, sed quia consequuntur magnidolores eos qui ratione voluptatem sequi nes-ciunt. Neque porro quisquam est, qui doloremipsum quia dolor sit amet, consectetur, adipisci


Quelques règles typographiquesMemento des principales regles typogra-phiques françaises, formulées par l’Imprimerienationale (Lexique des règles typographiquesen usage à l'Imprimerie nationale – 26 août2002).

Un texte correctement conçu respecte nonseulement la langue française, il rend aussiles contenus plus lisibles et esthétiques.

MAJUSCULES

Uniquement la première lettre de chaque phrase, la pre-mière lettre des noms propres, et dans les sigles.

Organisme d’État multiple : traité comme un nom commun(minuscule) : les conseils régionaux, votre direction régio-nale de l’Agriculture.S’il est accompagné d’un terme qui l’individualise, majus-cule : le ministère de l’Agriculture, le Conseil régional deBretagne.

Organisme d’État unique, organisme international : traitéscomme des noms propres = majuscule au nom ; si un adjec-tif précède le nom, majuscule également : Archives natio-nales, Conseil des ministres, Haute Cour de justice, Unioneuropéenne.

Qualité de personnes : majuscule quand le terme exprimantla qualité d’une personne est employé seul et désigne uneou plusieurs personnes précises, minuscule quand il est uti-lisé avec le nom d’une personne : Le Ministre de l’Agricul-ture sera présent mais M. X, ministre de l’Agriculture, seraprésent.

On écrit le Premier ministre, le Président de la République.

Les capitales doivent être accentuées : É, È, À, Ï…Lettres en majuscules : Ç, Œ…

SIGLES

Un sigle que l’on épelle : en majuscules, sans points.Un sigle qui se prononce : si plus de trois lettres, premièrelettre en majuscule.SNCF, CNC, ONU, Unicef, Inra, Irstea.

ABRÉVIATIONS

Madame / Mademoiselle / MonsieurMme / Mlle / M.

Milliard md / Million M / Kilo k / Gramme g

CHIFFRES

À l’intérieur d’un texte, il est conseillé d’écrire le plus possibleles chiffres en toutes lettres (jusqu’à deux mots). Les chiffresarabes et les chiffres romains ont des usages bien spéci-fiques : dates, degrés, distances, durées, heures, prix, vitesseetc. s’écrivent en chiffres arabes tandis que les chiffres ro-mains sont utilisés pour les tomes et volumes, les arrondis-sements d’une ville, les dynasties et régimes, etc.20 hectares, XXe siècle

Premier / Première / Deuxième / Second / Seconde1er, 1re, 2e, 2nd, 2de

Les décimales sont séparées d’une virgule et non d’un point6,5

GUILLEMETS

En français, les guillemets sont les doubles chevrons « … »et non les guillemets anglais ”…” ni ‘…’

TIRETS

On distingue trois signes différents :- pour le trait d’union et la césure des mots ;– pour les éléments de listes ou le signe moins ;— pour le tiret marquant les incises.Ne pas confondre trait d'union (-) tiret (–) et incise (—).


ÉNUMÉRATION

Chaque paragraphe d'une énumération est introduite par undeux-points :– se termine par un point-virgule ;– sauf le dernier qui se termine par un point.On ne les commence pas par une majuscule.

ITALIQUE

Citations, termes en langue étrangère, titres d’ouvrages etde périodiques, ou pour mettre en évidence un terme, uneexpression.

CITATIONS

En italiques et entre guillemets chevrons. Une citation dansune citation est entre guillemets anglais. Quand un texte doitêtre mis en italiques à l’intérieur d’une citation, il repasse encaractères romains.Je cite : « le�journal�Le Monde affirme�que�“l’agriculture�estessentielle”,�dans�son�édition�de�jeudi».

La Direction régionale de l’Agriculture de Bretagne a accueilli le Ministre de l’Agriculture accompagné deM. Bernard, président des chambres de commerce etd’industrie. À cette occasion, le journal Le Mondea publié un article de deux pages énumérant les dispositions :– agrandissement des terres cultivables de 100 hectares ;– augmentation du budget porté à 6,5 mds d’euros.

Selon la direction générale de l’alimentation, « c’est unfait sans précédent ».

La Direction Régionale de l’Agriculture de Bretagne a accueilli le Ministre de l’Agriculture accompagné deM. BERNARD, Président des Chambres de commerceet d’industrie. A cette occasion, le journal «Le Monde»a publié un article de 2 pages énumérant les disposi-tions :– Agrandissement des terres cultivables de 100 hectares,– Augmentation du budget porté à 6.5 Mds d’euros.

Selon la Direction Générale de l’Alimentation, “c’est unfait sans précédent”.

EXEMPLEÀ gauche, un texte non

conforme et sa version

corrigée à droite.

DIVERS

etc. n'est jamais suivi de …

Pas de mots orphelins laissés seuls, en début de ligne, à la fin d’un paragraphe.


Nuancier de couleursLes couleurs employées dans les compositionsgraphiques doivent être choisies parmi les21 teintes du nuancier suivant.

À NOTERLe tramage des

couleurs (% de teinte)

n’est pas autorisé, sauf

cas très particuliers :

– usage de tons directs

(Pantone).

– fonds de cellules de

tableaux, graphiques

de données…

LE NOIRPour les publications imprimées, on utilise le noir :

K.100 Pour les publications digitales, on utilise le noir :

C.60 M.55 Y.52 K.66 # 39 34 35R.57 G.53 B.52

FICHIERSIllustrator (CMJN)MAAFnuancier2017.ai

InDesign (CMJN)MAAFnuancier2017.indd

QuakXPress (CMJN)MAAFnuancier2017.qxp

OpenOffice (RVB)MAAFnuancier2017.soc

Profilscolorimétriques pour les conversionsCMJNISOcoated_v2_300_eci.icc

RVBsRGB IEC61966-2.1

quadrichromie > édition, kakémonos…hexadécimales (#) > webRVB > écran, OpenOffice/PowerPoint…


C.20 M.10 Y.30# D6 D8 BDR.214 G.217 B.189

C.20 M.16 Y.16# D3 D0 D1R.212 G.209 B.209

C.20 M.6 Y.15# D5 E1 DBR.213 G.225 B.220

C.30 M.40 Y.50 K.40# 85 6E 5BR.133 G.111 B.91

C.70 M.55 Y.33# 61 6F 8CR.98 G.111 B.141

C.85 Y.37 K.33# 00 7F 82R.0 G.127 B.130

M.17 K.54# 90 83 8AR.145 G.132 B.139

Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet







P01

P02

P03

S01

S02

S03

S04

Le nuancier se compose de trois groupesde nuances : les teintes pastel (P), à utiliserprincipalement pour les fonds quandune couleur claire est nécessaire ; les teintes sombres (S), lorsque lescouleurs pastel ou vives sont inadaptées ; les teintes vives (V), pour tous usages.

Les degradés entre

plusieurs teintes sont

autorisés.

Le symbole signale les couleurs

des rubriques du site

institutionnel

agriculture.gouv.fr


M.30 Y.100# FB B9 00R.251 G.185 B.0

C.20 M.20 Y.100# D8 BD 00R.216 G.190 B.0

C.21 M.46 Y.100# CF 8F 07R.207 G.144 B.8

M.60 Y.100# EF 7B 00R.239 G.124 B.0

M.75 Y.80# F3 5B 36R.243 G.91 B.54

M.82 Y.46# F5 4B 66R.245 G.75 B.102

C.31 M.100# B5 04 7ER.181 G.5 B.127

M.50 Y.30# F3 9A 9AR.243 G.155 B.154

C.77 M.88# 15 B7 52R.21 G.183 B.82

C.50 M.10 Y.100# 94 B4 1DR.149 G.180 B.29

C.70 M.50# 3C B3 97R.60 G.180 B.151

C.79 M.27# 00 AE BFR.0 G.174 B.191

C.100 M.30# 00 7F C8R.0 G.128 B.200

C.88 M.67# 18 5D C4R.24 G.93 B.196















V01

V02

V03

V04

V05

V06

V07

V08

V09

V10

V11

V12

V13

V14


Éléments graphiques : texturesLes blocs qui composent la grille peuventcontenir des textures préconçues mises àdisposition.

Il est possible de les colorer, mais elles doivent rester monochromes.D’autres motifs peuvent être proposés selon le même principe.

Textures pour grille A4 › 66 x 57 mm

Textures pour grille A5 › 45,5 x 39,6 mm

Textures pour grille 1/3 A4 › 58 x 33 mm (conçues pour deux blocs de la grille)

Utilisation facultative

FICHIERSQuakXPressmotifs.qxp


Éléments graphiques : pictogrammesUne présélection de pictogrammes couvrantun large spectre de thématiques est acces-sible à l’adresse :

Utilisation facultative

http://www.thinkstockphotos.fr/lightboxes/shared/117783307

À NOTER1056 pictogrammes

composent cette

sélection. Sous licence

et au format vectoriel,

ils sont destinés

aux maquettistes

du ministère, et sous

conditions, en externe.

EXEMPLES


FORMAT .JPG

Le .JPG pour JPEG est un format utilisant une compressiondestructrice : le poids de l’image est réduit en supprimantdes données.Correctement réglée, cette compression est presque invisi-ble, en particulier sur des images complexes, c’est pour cetteraison qu’elle est idéale pour des photos. Par contre, de fu-turs réglages dévoileront ces défauts donc la compressionJPEG doit être l’étape finale de la création d’une image.Le format JPEG est déconseillé pour les images comportantbeaucoup de texte. Le JPEG ne permet pas la transparence.

FORMAT .PNG

Les fichiers PNG emploient la compression sans perte dedonnées, et comme les fichiers GIF, peuvent être créés avecun fond transparent. À privilégier pour les images avec desgraphiques ou aplats de couleur, davantage que pour lesphotos.

FORMAT .GIF

Le .GIF est indiqué pour créer des images ou des bannièresanimées pour Internet, mais sa palette de seulement 256couleurs limite sa qualité. Il est en revanche à l’aise avec lesaplats de couleurs, gère la transparence et ses limitations encouleurs en font un format très léger. Il est inadapté pourles photos.

FORMAT .PSD

Le .PSD est le format utilisé par Photoshop. Il contient tousles calques de travail ainsi que les données brutes desimages, ce qui en fait un format lourd. Le .PSD permet latransparence et tous les modes de couleurs.

FORMAT .TIFF OU .TIF

Le .TIFF, est utilisé par les imprimeurs car il gère le modeCMJN tout en offrant une compression sans perte. Il ne per-met pas de transparence.

LES FICHIERS VECTORIELS

Le vectoriel n’a pas de pixels. Il est composé de courbes ma-thématiques, les courbes de Bézier, sur lesquelles ont peutzoomer à l’infini. N’étant pas limité par une densité depoints, le vectoriel est toujours net lors d’une impression.Les polices de caractères sont en vectoriel. En dehors dutexte, le vectoriel est à privilégier pour toutes les formes 2Ddestinées à l’impression comme un logo ou un schéma.Les formats les plus communs sont le .AI d’Illustrator et le.EPS.

FORMAT PDF

Le PDF est un format de fichier universel qui conserve lespolices, les images, la mise en page et les graphiques du do-cument source, quelle que soit l’application utilisée pour lecréer. Les fichiers PDF peuvent être partagés, visualisés etimprimés par le plus grand nombre. Un fichier PDF correc-tement configuré peut être utilisé pour l’imprimerie.

Lexique des formats graphiques Format d’image adapté pour :

publications web et digitales

imports dans les publicationsdestinées à l’imprimerie

imports dans les publicationsbureautiques (traitements de texte…)

fichier de travail graphique(calques, masques…)

CHARTE GRAPHIQUE - DAAF de La...

Documents

Transcript of CHARTE GRAPHIQUE - DAAF de La...