Charte

graphique des
Shifters
Version 1.0

8 juillet 2021
Avant-Propos
Shifteuse, Shifter,

Si tu lis ce document, c’est que tu t’apprêtes à mettre en forme une communication au nom des
Shifters. Cette charte a pour objectif de t’accompagner dans cette tâche. L’univers graphique
d’une organisation est une partie essentielle de son identité. La charte graphique des Shifters a
pour but :
– de refléter l’identité et des valeurs de l’association (sobriété, accessibilité, inclusion)
– de rendre reconnaissables les productions de l’association
– d’assurer une cohérence d’ensemble des productions (harmonisation)
– de faciliter le travail des Shifters (avec des outils de mise en page préconçus permettant de
se concentrer sur le contenu).

Ce document présente le travail de design réalisé par l’équipe IVE de mars à juillet 2021. Y
sont détaillés les concepts généraux, les règles principales, les bonnes pratiques et les outils
mis à ta disposition (gabarits).

Ce document va évoluer au fur et à mesure du temps et des nouveaux sujets qui apparaîtront
dans l’actualité. Aussi, si tu notes un manque ou une imprécision, n’hésite pas à le faire savoir
pour que la prochaine version le prenne en compte.

L’équipe du projet IVE

The Shifters – Charte graphique 2

Logotype
Composition et utilisation
 Logotype

Le logotype des Shifters est décliné à

partir de celui du Shift Project. Son motif
en demi-cercle symbolise l’idée de
transition liée à la décarbonation de la
société. Le motif est traité dans une
couleur différente (turquoise ou vert),
associé au suffixe –ers également en
couleur.

La filiation avec le logotype du Shift

(typographie, motif en demi-cercle,
couleur marine) est délibérée, pour
permettre au grand public de percevoir
le lien entre les deux organisations.

En revanche, le reste des éléments

identitaires (palette chromatique,
traitement des visuels) sont
volontairement distincts.

The Shifters – Charte graphique 4

Déclinaisons

Le logotype se décline en plusieurs versions, suivant le contexte

d’utilisation.

Les deux versions bicolores sont les versions à choisir par défaut. Le
vert varie en fonction de l’arrière-plan pour des raisons d’accessibilité. Sur
fond clair, le logo est en marine et vert clair. Sur fond sombre, il est en
blanc et turquoise.

Les versions monochromes (noir, bleu ou blanc) doivent être réservées à

des contextes particuliers :
– pour apaiser un environnement déjà surchargé en couleurs
– dans des documents destinés à l’impression en noir et blanc
– dans certaines communications officielles.

The Shifters – Charte graphique 5

Couleurs
Palette chromatique
Palette chromatique Couleurs identitaires

La palette comprend dix couleurs.

Les quatre couleurs identitaires,

marqueurs de l’association, sont
présentes dans les versions du logo et
dans l’ensemble des productions.
Couleurs de contraste

Les quatre couleurs de contraste

complètent la gamme en offrant une
grande diversité d’usage (pour les
graphiques, par exemple).

Elles sont complétées par deux couleurs

neutres (noir et blanc). Couleurs neutres

The Shifters – Charte graphique 7

Test d’accessibilité

La palette complète, dérivée de trois

couleurs très contrastées (bleu,
turquoise et rose) a fait l’objet de tests
d’accessibilité pour s’assurer de leur
bonne perception.

Couleurs de base Protanopie Deutéranopie Tritanopie

The Shifters – Charte graphique 8

Les Shifters ont une large gamme de
publications qui s’adressent à des publics
différents.
C’est pourquoi l’identité visuelle des Shifters
repose sur l’existence de deux thèmes
graphiques, ce qui permet de créer des
univers adaptés au public visé.
L’utilisation de chaque thème obéit à des règles
particulières.

The Shifters – Charte graphique 9

 Thème Association

Il s’agit du thème à utiliser par défaut. Il

convient dès lors que les Shifters
s’expriment en tant qu’association, que
ce soit en interne ou auprès du grand
public. Il repose sur l’usage large des
couleurs identitaires, l’un des deux bleus
étant systématiquement utilisé en fond.

Le vert, qui contraste et attire l’attention,

est utilisé comme couleur de l’interaction
(liens, boutons…). Cela signifie qu’on ne
l’utilise pas en aplat.

Ce thème est le plus adapté à la lecture

sur écran, car il ne fatigue pas l’œil, il
est à privilégier pour les usages
numériques.

The Shifters – Charte graphique 10

 Thème Expert

Ce thème est adapté aux productions

(rapports techniques, documents de
travail…) qui s’adressent à des experts
ou lorsqu’on cherche à employer un
mode plus neutre. Le fond clair (blanc ou
gris clair chaud) est particulièrement
adapté aux documents destinés à
l’impression.

Le bleu vif est toujours présent, mais de

façon limitée, et c’est un turquoise,
moins vif, qui est utilisé comme couleur
de l’interaction (liens, boutons). Cette
couleur a été retenue pour des raisons
d’accessibilité.

The Shifters – Charte graphique 11

Interprétation d’une même page web dans les deux thèmes

The Shifters – Charte graphique 12

Typographie
Polices
La croissance des systèmes numériques est
insoutenable, c’est pourquoi les Shifters sont
exemplaires dans leur activité de publication.
La sobriété s’impose non seulement dans
toutes leurs productions, mais aussi dans la
manière de les produire.
Pour éviter tout téléchargement inutile, le choix
de la fonte typographique s’est portée sur une
police système, présente sur tous les
ordinateurs de façon native. Cela épargne
également le chargement d’une web font sur
les dispositifs en ligne.

The Shifters – Charte graphique 14

 Police

La police à utiliser pour toutes les

Arial Bold publications des Shifters (Word,
PowerPoint, Excel, web, etc.) est l’Arial.

Arial Bold Italique Elle a été retenue pour sa simplicité et

sa facilité de lecture.

Arial Regular Accessible sur tous les systèmes

d’exploitation, elle dispose aussi d’un
caractère versatile (italique et gras) et

Arial Italique de nombreux caractères spéciaux, ce

qui est adapté aux contenus
scientifiques.

The Shifters – Charte graphique 15

 Traitements
typographiques

La typographie est à utiliser dans sa

Ombrage
version native. Seules les graisses
Arial Black Arial Narrow
usuelles (gras, italique et gras italique)
SHIFTERS SHIFTERS SHIFTERS sont conseillées.

Tous les autres effets (comme ceux qui

sont représentés ci-contre) sont à
proscrire, soit parce qu’ils nuisent à la
lisibilité, donc l’accessibilité, soit parce
qu’ils dévient du principe de sobriété de
la charte.

The Shifters – Charte graphique 16

Visuels
Traitements et optimisation
La sobriété s’impose aussi dans le souci
apporté aux visuels.
Choisis tes illustrations (dessins, photos) avec
soin en ne publiant que ce qui est absolument
indispensable, c’est-à-dire ce qui aide à la
compréhension ou ce qui favorise la lecture
(attire l’œil, apporte du rythme ou relance
l’attention).
Tous les visuels doivent systématiquement être
compressés et optimisés.

The Shifters – Charte graphique 18

 Compression des
clichés
photographiques

Pour les photos qui apportent des

éléments de compréhension
Cliché original (4800 x 3200 px) supplémentaires au propos,
1,97 Mo compresse-les autant que possible en
gardant une bonne qualité visuelle.

L’exemple ci-contre montre comment

on peut alléger significativement un
cliché photographique.

Cliché après compression jpeg

moyenne (800 x 500 px)
63 Ko

The Shifters – Charte graphique 19

 Autres traitements
des visuels
photographiques
Cliché après compression png-
8 Pour les visuels qui viennent animer le
8 couleurs (800 x 500 px) document sans nécessiter une fidélité
Courbe de transfert de dégradé à l’original, d’autres traitements sont
3 couleurs possibles pour obtenir le poids le plus
40 Ko faible, comme ceux qui sont présentés
ci-contre à partir du même cliché
original.

Cliché après compression png-8

4 couleurs (800 x 500 px)
Courbe de transfert de dégradé
2 couleurs
30 Ko

The Shifters – Charte graphique 20

The Shifters – Charte graphique 21
 Schémas

Les modèles des schémas appliquant la

gamme chromatique et la charte sont
présentés dans le gabarit Word mis à
disposition.

6 Entrées

A B C D E F

The Shifters – Charte graphique 22

 Banque d’illustrations

Il existe des banques d’illustrations en

open source (licence Creative
Commons) qui peuvent être utilisées
sans ajouter de poids excessif à la page.

La bibliothèque Open Peeps (

https://www.openpeeps.com/) est une
bonne ressource qui peut être facilement
utilisée.

The Shifters – Charte graphique 23

Application aux
documents
Publications des Shifters
Des gabarits de documents ont été réalisés
pour servir de base à l’ensemble des
publications des Shifters. Ces fichiers (.doc
et .ppt) comportent toutes les indications de
traitement graphique pour les tableaux et les
schémas (courbes, histogrammes,
camemberts, etc.), ainsi que des
recommandations d’usage.
Ils sont disponibles en ligne sur le site des
Shifters. Utilise-les en complément des chartes
éditoriale et graphique.

The Shifters – Charte graphique 25

Merci !

Equipe Identité Visuelle et

Éditoriale (IVE)

Ryzlane Arsac-Gothière
Virginie Barnay Duhamel
Sylvie Daumal
Franck Depierre
Nicolas Hervé
Edouard Lafore
Marine Loyen
Catherine Marchand
Martin Michalland
François de Rochette
Marc Termine
Cyrielle Vandenbroucke