L’identité visuelle

L’identité visuelle
L’identité visuelle est la représentation graphique de
l’identité d’une entité (individu, entreprise, projet, objet,
etc.)
Au travers de son identité visuelle, exprime ses valeurs, son
activité, ses ambitions.
01

La couleur
01
Anatomie d’une couleur

Ecran : Impression :
Bleu foncé
RVB : 0 32 96 CMJN :
01
Le cercle Quelques notions importantes :
chromatique - Couleurs primaires, secondaires et
tertiaires
- Couleurs chaudes et couleurs froides
Spatialité d’une couleur :
01
Comment faire un nuancier ?
Un nuancier est généralement composé de 5 couleurs
différentes :

Quelques ressources pour trouver de

jolis nuanciers :

- Adobe Color CC - [Link]

- Color hunt - Brand Color
01
Symbolique des couleurs :

Blanc Noir Rouge Orange Rose

Pureté, innocence, Mort, nuit, mystère, Passion, amour, force, Énergie, enthousiasme, Tendresse, amour,
richesse, chasteté, silence, tristesse, danger, puissance, imagination, richesse, pureté, timidité, fidelité
silence élégance, luxe courage, action honneur
02

La typographie
02
Anatomie d’une typographie

Graisse : Light, Regular, Bold

Empattements :
Sans-serif
Moderne, claire, universel
Interlignage
Ab
Interlettrage
letter-spacing
line-spacing

c
Serif
Autorité, respect, luxe

Proportions :
Étroit, Normal
IDENTITE VISUELLE
02
Pour une bonne hiérarchisation Préférer une font avec des accents
utiliser la taille, la couleur et les (é, è, à, ...) et plusieurs graisses
différentes graisses de la font
Sinon a va donner un aspect
Le wombat nigmatique votre texte
Cet animal au ratio mignon/ popularité bien
trop bas.
s’il manque des lettres
Pourquoi le wombat ?
Les wombats forment une famille de mammifères
marsupiaux. Ils vivent dans les forêts montagneuses
d’Australie, où ils creusent de vastes terriers. Les wombats
pèsent entre 15 et 40 kg. Si vous ne voyez pas à quoi ça
ressemble, imaginez juste un énooorme cochon d’inde.
Militons pour introduire les wombats en France.
02
Anatomie d’un bloc de texte :
Alignement :
Idessit lam eicaescid que nemporit
Justification:
rehende nissita ditate pe vel et dessit lam eicaescid que nemporit
quibu et explabo repella posa rehende nissita ditate pe vel et
nditate mporist ut quam fugitio quibu et explabo repella posa
rionsed quos voloriost, simi, nditate mporist ut quam fugitio
consequis et imusaepe acerepr rionsed quos voloriost, simi,
atibus usam ratis ped molor mo consequis et imusaepe acerepr
atibus usam ratis ped molor mo
Idessit lam eicaescid que nemporit
rehende nissita ditate pe vel et Idessit lam eicaescid que nemporit
quibu et explabo repella posa rehende nissita ditate pe vel et
nditate mporist ut quam fugitio quibu et explabo repella posa
rionsed quos voloriost, simi, nditate mporist ut quam fugitio
consequis et imusaepe acerepr rionsed quos voloriost, simi,
atibus usam ratis ped molor mo consequis et imusaepe acerepr
atibus usam ratis ped molor mo
 02
L’ortho-typographie
Les césures La ponctuation Autre
Les signes simples ( , . ...) : pas
Ne jamais diviser :
d’espace avant, une espace après Il est fortement recommandé de mettre d
- un nom propre accents sur les majuscules :
L'ÉLÉPHANT A MANGÉ DES
- avant ou après une apostrophe Les signes doubles ( : ; ? ! ) : une ÉCROUS
espace avant et une espace après L’ELEPHANT A MANGE DES
- d’une colone à une autre en français, comme les signes ECROUS
simples en anglais
-les nombres (chiffres et lettres)
Pour les autres () {} [] ‘‘
(Une espace à l’extérieur, pas
>Règle d’euphonie d’espace à l’intérieur)
>Règle de construction
>Règle d’épellation
02
Quelques ressources :

Où trouver des fonts sympas, légales et gratuites ?

- Fontsquirrel
- [Link]
- Google Font
- Dafont
03

Le logotype
03
Pour réaliser un joli logo il faut toujours
commencer par noter quel message je
veux passer :
- une activité pro
- des valeurs
- une atmosphère
- etc.
Un logo doit être simple et Ces deux logos sont trop complexes :
reconnaissable. trop de texte, trop de couleurs
03
Le logotype
Signe seul Texte seul Signe intégré dans le texte
03
Le logotype
Signe à gauche Signe au dessus Zone de protéction

LOGO
 La charte graphique
La charte graphique est un document de travail qui
contient l’ensemble des règles d’utilisation d’une identité visuelle.

On y retrouve :
- Le logotype
- Le nuancier
- La typographie et ses caractéristiques
- Les illustrations graphiques et
photographiques
- La grille de mise en page
- Les applications possibles : print, écran, ...
La charte graphique

Le nuancier La typographique Les illustrations

La grille
Les applications
UX = User eXperience
#
UI = User Interface
 Est-ce que les clients en veulent ?

DESIRABILITE
Utilisateur
Est-ce que c’est bon
pour les affaires
Savons-nous le produire ?

VIABILITE FAISABILITE
Affaires Technologie
 DESIGN SPRINT

M T W T F
Map Sketch Decision Prototype Test

24 Interne Orange
Process UI Design

25 Interne Orange
UX
+
UI
28 Interne Orange
- SOYEZ EMPATHIQUE A L’USER (comprendre les données)
- DEFINISSEZ CE QUE L’USER A VRAIMENT BESOIN
- IDEATION DES SOLUTIONS
- PROTOTYPEZ VOS IDEES
- TESTEZ VOS PROTOTYPES
- IDEES TO WORK
Process UI Design

Sketches

Dresser la version final de la maquette validée après l’évaluation UX pour une

version finale des emplacements

Interne Orange
Process UI
Design

Sketches Prototype

Avancer dans le design, définir les couleurs, les polices, sans s’éloigner de
l’identité de l’entreprise

Interne Orange
Process UI Design

Sketches Prototype Workflow

Discuter sur le prototype, définir les animations, …

Interne Orange
Process UI Design

Sketches Prototype Workflow Validation

Tester et valider

34 Interne Orange
Interne Orange
PROXIMITÉ
REGION

COMMUNE
SIMILARITÉ
CONTINUITÉ
PROXIMITÉ
Interne Orange
Interne Orange
 Le Design Thinking est une
approche centrée sur
l'utilisateur qui vise à résoudre
les problèmes de manière
créative et innovante.

Interne Orange
 Le Design Thinking est une solution basée sur
une approche de résolution de problèmes

Interne Orange
 4 principes
du DT

Interne Orange
Interne Orange
Interne Orange
Interne Orange
Interne Orange
 Est-ce que les clients en veulent ?

DESIRABILITE
Utilisateur
Est-ce que c’est bon
pour les affaires
Savons-nous le produire ?

VIABILITE FAISABILITE
Affaires Technologie
 Etapes du
DT

Interne Orange
• SOYEZ EMPATHIQUE A L’USER (comprendre les données)
• DÉFINISSEZ CE QUE L’USER A VRAIMENT BESOIN
• IDEATION DES SOLUTIONS
• PROTOTYPEZ VOS IDEES
• TESTEZ VOS PROTOTYPES
• IDEES TO WORK
DOUBLE DIAMOND

DEVELOPPER

DECOUVRIR DELIVRER

DEFINIR

LE PROBLEME LA SOLUTION
53 Interne Orange
Interne Orange
Interne Orange
Interne Orange
Interne Orange