Qu’est-ce qu’une charte graphique ?

C’est un document  de référence appelé charte graphique, il contient  les règles fondamentales d’utilisation
des signes graphiques constituant l’identité visuelle d’une entreprise, d’une marque, d’une  organisation ou
d’un projet.

Une charte graphique regroupe et traduit graphiquement tout l’univers et toutes les valeurs de l’entreprise
(dynamisme, innovation, élégance, …)  , c’est le support fondamental de toute sa communication (interne et
externe).

L’élément central d’une charte graphique est le logo, on le retrouve sur tous les supports de communication
de l’entreprise, c’est à partir du logotype que l’on bâti une identité visuelle.

Le logotype doit refléter l’image de l’entreprise et ses activités, il doit également renforcer son image et
rassurer ses clients. Le logo doit pouvoir s’adapter et se décliner (différentes couleurs, avec ou sans baseline,
carré ou rectangulaire,…) sur l’ensemble des supports de communication de l’entreprise. On le retrouvera
par exemple sur le papier à en-tête, les devis et factures, les affiches, les plaquettes commerciales, les flyers,
le site internet et  les véhicules de l’entreprise.

Le logotype à lui seul ne constitue pas pour autant une charte graphique. La charte définit également les
polices de caractères et les attributs typographiques  à utiliser, en règle générale une police de titre et une
police de contenu. La typographie est une des composantes essentielles de l’univers graphique d’une
entreprise, certaines entreprises comme Renault vont jusqu’à  créer une police de caractères spécifique pour
se démarquer

La charte fige aussi les choix de couleurs au travers de jeux de couleurs adaptés aux exigences des
différents supports de communication et des différents fonds disponibles (fond de couleur ou fond blanc).
Le nombre de jeux de couleurs doit rester limité pour simplifier la mémorisation de l’identité visuelle et sa
différenciation par rapport à la concurrence (4 ou 5 couleurs étant un compromis idéal entre mémorisation
et différenciation). On doit retrouver dans la charte les valeurs Pantone, CMJN, RVB et hexadécimales de
chaque couleur utilisée.

Une charte graphique complète regroupe et codifie également :

 Les règles d’insertion de chaque élément (logo, titre, baseline,…) et pour chaque support : les
marges et le positionnement dans le document.
 Les règles éditoriales (ton et style) aidant tout rédacteur à rendre ses documents homogènes.
 Les règles d’adaptation et de déclinaison pour les différents supports… en proposant par exemple
une version simplifiée du logo (noir et blanc).
Certaines chartes graphiques sont conçues pour s’adapter et évoluer en fonction des changements de
l’entreprise

Les objectifs et les intérêts d’une charte graphique

 L’un des objectifs d’une charte graphique est de conserver une cohérence graphique dans toutes
les réalisations graphiques d’une entreprise. Sa mise en place garantie une identité visuelle
homogène que pourront s’approprier les clients ainsi que tous les partenaires (fournisseurs,
graphistes, presse,…) d’une entreprise. La charte graphique permet donc de communiquer « d’une
seule voix » avec comme conséquence positive une maîtrise de l’image de l’entreprise. Les
anglophones parlent de corporate design (littéralement : dessin de l’entreprise).

 L’autre objectif de la charte graphique est de permettre au récepteur d’identifier facilement

l’émetteur par la cohérence associée à la récurrence des différentes réalisations graphiques. Autre
intérêt non négligeable, une charte graphique complète permet d’accélérer et de faciliter la
production de nouveaux supports de communication, les fondamentaux étant déjà existants.

Pour conclure, disposer d’une charte graphique est indispensable pour communiquer efficacement,
certaines entreprises comme la BBC éditent même un site web pour aider leurs partenaires
pour l’utilisation de leur charte graphique.

Une charte graphique est également un outil indispensable au service de la stratégie de communication
de l’entreprise, avec pour objectif d’asseoir son identité et son image.
 Le logo

Le logo est incontournable pour la notoriété, l'image et la stratégie commerciale d'une entreprise. Il doit
refléter les valeurs de l'entreprise et coller aux tendances du moment en terme de design. Selon les
époques, le logo vit toutes sortes de déclinaisons et reste le témoin marquant des époques successives
symbolisant souvent un renouveau pour l'entreprise !

Selon les époques, le logo est symbolique, rond, complexe, épuré, en relief… L’objectif est d’amener le
public à mémoriser de manière efficace et rapide cette image graphique symbolisant l’entreprise.

Le logo permet à l’entreprise :

 D’être visible et facilement identifiable,

 De se démarquer de la concurrence,

 D’apporter de la crédibilité,

 Primordial pour l’identité d’une entreprise, il est représentatif de son activité et de son image.

 Quelques marques connues et reconnues dans le web rien que par leurs logos : Apple, Google,
eBay, Facebook, Twitter…

L’évolution et les tendances des logos

Les marques sont de plus en plus dans une optique de lifting régulier de leurs logos, ils deviennent de plus
en plus épurés, simples tout en restant évocateurs. Apple par exemple, utilise une typographie douce et
contemporaine, sans se départir de la puissance du concept initial. Un petit retour dans l’histoire
concernant ce logo: le nom Apple, vient de la pomme tombée sur la tête de Newton (logo d’Apple avant
1976). Lors de la commercialisation d’Apple, puis le logo devint multicolore et maintenant plus simpliste,
suivant une tendance actuelle. Dans un des ses articles consacrés aux logos, le Journal du Net a noté lors
d’une analyse des tendances émergentes de ces dernières années en matière de typographies et de logos,
que les marques reviennent à des messages plus simples mais plus efficaces, via la sobriété.

Réussir une identité de marque c’est bien plus que faire un beau logo, il faut aussi traduire un signe,
donner une image forte et tendance à la marque tout en se distinguant ! Le logo doit se décliner grâce à
un signe “qui devient un levier d’application de la marque démocratisée” selon Béatrice
Mariotti. Examiner l’évolution d’un logo au fil des années est le meilleur moyen d’évaluer son efficacité.
 Qu’est-ce l’ergonomie ?
L’ergonomie s’intéresse à l’amélioration des conditions de réalisation de l’activité humaine : travail en
premier lieu mais aussi domestique, vie quotidienne, loisirs, sport, etc.

Et l’ergonomie applicative a pour objectif :

 de concevoir et réaliser des produits ou services utiles et utilisables

 d’offrir les interfaces les plus adaptées avec les caractéristiques physiologiques, perceptives
et cognitives des utilisateurs.

L’ergonomie est une démarche de conception centrée sur l’utilisateur

Les 4 principes directeurs :

UTILITE

Détermine si le système permet à l’utilisateur de réaliser sa tâche.

L’utilité couvre la capacité fonctionnelle, les performances du système et les qualités d’assistance

UTILISABILITE

Degré selon lequel un produit peut être utilisé avec efficacité, efficience, et satisfaction

EFFICACITE

S’assurer qu’une application permet à l’utilisateur de réaliser les tâches qui lui sont demandées.

Il ne s’agit pas de vérifier si la fonctionnalité promise est bien présente, mais de vérifier que son
implémentation correspond effectivement à une réalité pour l’utilisateur.

SATISFACTION UTILISATEUR

Parent pauvre de l’utilisabilité…

Cette notion est la plus difficile à mesurer et à juger

Mais certaines règles de présentation et de design permettent d’éviter de faire fausse route pour, dans la
mesure du possible, joindre l’utile à l’agréable.

Les 12 principaux critères ergonomiques

 Incitation : Accompagner, orienter l’utilisateur

 Lisibilité : Lui présenter un contenu clair et compréhensible

 Groupement : Organiser le contenu en accord avec sa compréhension

 Feedback direct : Lui monter que ses actions sont prises en compte

 Contrôle utilisateur : Lui laisser le contrôle explicite

 Concision : Limiter sa charge de travail

 Gestion des erreurs : Le protéger des erreurs

 Adaptabilité : S’adapter à ses caractéristiques

 Cohérence : Lui fournir un cadre stable

 Signifiance : Lui parler son langage

 Compatibilité : S’adapter à ses modes opératoires

 Satisfaction : Ne pas lui faire vivre une expérience désagréable

 L’utilisateur au centre de la démarche ergonomique

Navigation
intuitive
St
ru
in ct
e so co ura
ub nt tio
ed en n
ur us de
apt s
Optimisation C Confort
de la productivité d’utilisation

n a
l
iga de
des
Con eracti

nav ption
tio
int
cep ons

nce
tion

Co
Agencement des
pages
Terminologie Homogénéité
efficace entre toutes
les pages

Objectifs et process d’un projet ergonomie

• Phase 1 : Capture du besoin

• Phase 2 : Architecture de l’information

• Phase 3 : Mise en place de la navigation

• Phase 4 : Conception des interfaces

• Phase 5 : Design graphique

• Phase 6 : Évaluation ergonomique

PHASE 1 : Capture du besoin

Objectifs Activités

• Comprendre les objectifs métier • Analyse de l’existant

• Comprendre les besoins utilisateurs • Analyse des retours utilisateurs
• Définir les profils utilisateurs • Audit du métier
• Analyser leurs tâches • Analyse du workflow
• Appréhender le contexte d’utilisation • Analyse des profils utilisateurs
(Workflow) • Observations terrains
• Aligner les besoins utilisateurs et les • Interviews
objectifs métiers • Questionnaires
• Mise en situation sur prototype
 Livrables

• Synthèse sur la capture du besoin

• Présentation client de l’analyse de l’existant et des pistes
d’amélioration
• User Persona
• Diagrammes de tâches
• Diagramme d’alignement

User persona

Pierre

‘Je veux valider l’activité de mon équipe sans perdre de temps’

Objectifs clés

• Ne pas perdre de temps à naviguer • Synthétiser l’information

• Valider simplement l’activité de mon • Permettre une validation immédiate
équipe • Clairement afficher les problèmes
• Visualiser rapidement les problèmes • Proposer une utilisation simple et
intuitive

Type d’utilisateur

• Utilise beaucoup d’applications et est • Ne pas afficher trop d’informations

rapidement frustré secondaires
• Souhaite un produit nécessitant peu • Simplifier le système de validation
d’apprentissage

PHASE 2 : Architecture de l’info

Objectifs Activités

• Référencer les contenus • Inventaires

• Grouper les contenus • Card Sorting : définir les points d’entrée
• Hiérarchiser les contenus • Définir la terminologie
• Prioriser les contenus
• Déchiffrer l’information/ terminologie
• Présenter l’information

Livrables
• Inventaire du site et/ou définition du 1er et 2nd niveau de navigation
• Metadata
• Glossaire
•
Recommandations

• Être compatible avec ce que l’utilisateur connaît : Observer les autres

• Faire un tri de carte

• Définir le vocabulaire à mettre à l’épreuve

PHASE 3 : Navigation
Objectifs Activités

• Navigation globale ou structurelle (primaire et • Établir le plan du site

secondaire) • Établir la navigation global du site
• Navigation contextuelle ou associative (connexion
entre les pages associées: étapes d’un process, barre
d’outils…)
• Navigation de courtoisie ou utilitaire
(raccourcis ou accès directe à certaines fonctions:
espace privé..)

Livrables

• Plan de site détaillé

• Scénario de navigation
Outil : Arborescence et scénario

Recommandations

Les applications sont souvent perçues comme complexes, pourquoi ?

 La navigation reflète l’implémentation technique

 La navigation reflète une structure organisationnelle

 Les utilisateurs ne trouvent pas le contenu désiré

 Les utilisateurs ne comprennent pas les termes utilisés

 Les utilisateurs perdent du temps

Les utilisateurs n’explorent pas l’application

 PHASE 4 : Conception des IHM
Objectifs Activités

• Structurer les interfaces • Maquettes (premier

• Représenter l’information squelette)
• Concevoir les interactions • Prototypage
• Concevoir les scenarii et
enchainements de pages
• Concevoir les gabarits types

Livrables
• Maquette (premier squelette)
• Prototype
• Charte ergonomique

Recommandations

Afin de faciliter le dialogue « homme – machine », quelques règles de mise en page et de design sont à
observer, en sachant que l’utilisateur ne lit pas les pages mais il les survole.

Quelques règles élémentaires :

 Un découpage de l’écran en zones claires et distinctes

 L’utilisateur doit pouvoir explorer facilement l’application et accéder rapidement aux

fonctionnalités qui lui permettront de réaliser différentes actions.

 Une hiérarchie des informations facilement identifiable

 Les données et les fonctions doivent être organisées selon la logique métier, adaptées à l’activité
de l’utilisateur. Elles doivent être présentées au moment où l’utilisateur en a besoin et dans un
ordre pertinent qui peut correspondre à un ordre d’utilisation (du plus fréquent au moins fréquent
par exemple).

 Une visibilité des éléments cliquables

 Une clarté des informations affichées et un vocabulaire compréhensible pour l’utilisateur.

PHASE 5 : Design graphique

Objectifs Activités

• Concevoir l’aspect visuel des pages • Établir la charte graphique

• Concevoir l’iconographie • (Typographie/
Concevoir les différentes illustrations si besoin Couleur/Texture..)

Livrables
 Maquette graphique (image photoshop)
 Charte graphique

PHASE 6 : Évaluation
Objectifs Activités

• Une fois toutes les maquettes validées par le client et • Audit expert
 la technique, on a réalisé un prototype afin de : • Tests utilisateurs
• tester l’appropriation de l’application par des
utilisateurs « en situation »,
• tester la faisabilité de « points d’incertitudes »
techniques
• Garantir la cohérence
• Détecter les problèmes majeurs d’utilisation
• Valider les hypothèses
• Améliorer le produit

Livrables
• Synthèse de l’audit
• Rapports d’évaluation
• Maquette / prototype amélioré

Le responsive design

Le responsive design ou responsive webdesign (au même titre qu’un site mobile) est une manière de
concevoir un site web pour que son contenu s’adapte automatiquement à la résolution écran du terminal
qui est utilisé pour le visionner. On peut également parler de site adaptatif.

La notion de web adaptatif repense la manière de concevoir l’ergonomie d’un site internet, puisqu’il ne
s’agit plus de concevoir autant de sites que de terminaux, mais de concevoir une interface unique auto-
adaptable. Ainsi, les informations et les structures techniques ne sont pas dupliqués ce qui permet de
générer des économies d’échelles dans la conception et la maintenance de sites internet bénéficiant de ce
mode de conception.

Un site internet conçu en responsive design est donc optimisé sur l’ensemble des périphériques disponibles
sur le marché : ordinateurs, tablettes, smartphones.

Pourquoi il est recommandé de créer un site en responsive design ?

– La création et la maintenance seront plus rapides et plus faciles (un seul fichier qui gère l’ensemble des
affichages)
– Un référencement naturel optimal puisqu’il n’existe qu’un seul site internet qui regroupe toutes les
versions
– Une seule adresse web (URL) est utilisée (pas de sous domaines ou redirection vers un répertoire
« mobile »)

https://www.w3schools.com/html/html_responsive.asp