01
La couleur
01
Le cercle chromatique
Quelques notions importantes :
- Couleurs primaires, secondaires et
tertiaires
- Couleurs chaudes et couleurs froides
Spatialité d’une couleur :
01
Anatomie d’une couleur
Il existe de nombreuses façon de nommer une couleur :
Bleu outremer
Écran : Imprimé :
RVB : 27 1 155 CMJN : 83 99 0 39
Code hexadécimal : #1B019B Pantone : 2736
01
Symbolique des couleurs
Blanc Noir Rouge Bleu Jaune
Pureté, innocence, Mort, nuit, mystère, Passion, amour, force, rêve, évasion, paix, lumière, chaleur, énergie,
richesse, chasteté, silence, tristesse, danger, puissance, union, froid, plénitude, joie, puissance, jeunesse,
silence élégance, luxe courage, action fidélité, justice jalousie
Vert Orange Violet Brun Rose
Éspérance, nature, Énergie, enthousiasme, Spiritualité, mélancolie, Terre, force, solidité, Tendresse, amour,
immortalité, repos, imagination, richesse, connaissance, magie, confort, inquiétude, pureté, timidité, fidelité
jeunesse, chance, honneur deuil, crainte égoïsme
immaturité, jalousie
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 (Utile pour créer un nuancier ou pour en utiliser un existant)
- Color hunt
- Coolors.co
- Brand Color (Pour réutiliser le nuancier d’une marque existante)
01
Quelques conseils
Attention aux contrastes
Ceci est illisible
Éviter le noir pur
Bof Mieux !
02
La typographie
02
Anatomie d’une typographie
Interlignage
Abc
L’approche
line-spacing Interlettrage
letter-spacing
Empattements : Proportions : Graisse :
sans-serif Étroit Light
Regular
Moderne, claire, universel
serif Normal
Autorité, respect, luxe
Bold
02
Familles de typographie
Classification Vox-Atypi
Humanes Mécanes Scriptes
Garaldes Manuaires
Réales Fractures
Linéales
Didones
Incises
02
Quelques conseils
1. Ne jamais étirer une typographie manuellement
02
2. Ne jamais utiliser plus de 3 fonts 3. éviter les fonts trop fantaisistes
différentes sur le même document
Mirlababi
Victor Hugo - Les Misérables
Sinon
ça deviens
Mirlababi surlababo,
N’IMPORTE
Mirliton ribon ribette,
Surlababi mirlababo,
Mirliton ribon ribo.
quoi !
02
4. Pour une bonne hiérarchisation utiliser 5. Préférer une font avec des accents (é,
la taille, la couleur et les différentes è, à, ...) et plusieurs graisses
graisses de la font
Le wombat Sinon ça va donner un aspect
Cet animal au ratio mignon/
popularité bien trop bas.
énigmatique à votre texte
Pourquoi le wombat ?
Les wombats forment une famille de
mammifères marsupiaux. Ils vivent dans
les forêts montagneuses d’Australie, où ils
s’il manque des lettres
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 : Justification : Césure :
Idessit lam eicaescid que nemporit Idessit lam eicaescid que nemporit Id modigenimint quis adicide voloris int
rehende nissita ditate pe vel et quibu et rehende nissita ditate pe vel et quibus et untiis re aut ullesti oreped molupta tqua-
explabo repella posa nditate mporist ut explabo repella poriosa nditate mporibust tio dollis cullat harcipis idus etur?
quam fugitio rionsed quos voloriost, simi, ut quam fugitio rionsed quos re voloriost, Officaectur? Ignias est porepella dio
consequis et imusaepe acerepr atibus simi, consequis et imusaepe acerepr atibus maion perchil igentiis eos minus solorpo
usam ratis ped molor mo pedio molor mo rporectur autempe riberum quae ratem-
poreium vitae nos eicia demo quatisquae
eatem dolorum facerescias es apero mi, ut
Idessit lam eicaescid que nemporit Idessit lam eicaescid que nemporit rehende quid modipit erchill ecusdae nimporitias
rehende nissita ditate pe velt quibus et nissita ditate pe vel et quibus et explabo dissitatis quassi voluptia nus vit, tet,
explabo repella poriosa ndit mporibust ut repella poriosa nditate mporibust ut quam
quam fugitio rionsed quos re voloriost, fugitio rionsed quos re voloriost, pedio Id modigenimint quis adicide voloris
simi, consequis et imusae acerpedio molor mo int untiis re aut ullesti oreped molupta
molor mo tquatio dollis cullat harcipis idus etur?
Officaectur? Ignias est porepella dio
maion perchil igentiis eos minus solorpo
Idessit lam eicaescid que nempt rehende Idessit lam eicaescid que nemporit rporectur autempe riberum quae
nissita ditate pe vel et quibus et explabo rehende nissita ditate pe vel et quibus ratemporeium vitae nos eicia demo
repella poriosa nditate oribust ut quam et explabo repella poriosa nditate quatisquae eatem dolorum facerescias es
fugitio rionsed quos re voloriost, simi, mporibust ut quam consequis et apero mi, ut quid modipit erchill ecusdae
consequis et imusaepe acerepr bus et imusaepe acerepr atibus et auda net que nimporitias dissitatis quassi voluptia nus
auda net que et asi dia cusam molor mo et asi dia cusam ratis pedio molor mo vit, tet,
02
Comment choisir une bonne typographie ?
1. Préferer une
typographie lisible
2. Adapter sa
typographie à sa cible
et au contexte (ex :
enfants, professionnel,
tradition, nourriture, ...)
02
Les typographies passe-partout
Lato
Roboto
Lora
Quicksand
Open sans
...
02
Quelques ressources
Où trouver des fonts sympas, légales et gratuites ?
- Fontsquirrel
- typotheque.interstices.io
- Google Font
Quelques liens :
- Comment combiner des fonts
02
L’ortho-typographie <3
Les césures La ponctuation Autre
Ne jamais diviser : Les signes simples ( , . ...) : Il est fortement recommandé
- un nom propre pas d’espace avant, une de mettre des accents sur les
- avant ou après une espace après majuscules :
apostrophe ELEVES EN PLEIN AIR
- d’une colone à une autre Les signes doubles ( : ; ? ! ) : LE POLICIER TUE
- les nombres (chiffres et une espace avant et une
lettres) espace après en français,
comme les signes simples en
>Règle d’euphonie anglais
>Règle de construction
>Règle d’épellation Pour les autres () {} [] ‘‘
Une espace à l’extérieur, pas
d’espace à l’intérieur
03
Hiérarchie visuelle
03
Objectif : diriger le regard
Qu’est ce que je veux que l’on voit en
premier ? Quel chemin ?
Pour diriger le regard on peut :
- jouer sur la taille
- jouer sur la couleur
- jouer sur la position
Note : notre oeil est toujours attiré par
les visages et les yeux.
03
Quelques principes
La symétrie L’asymétrie Le plein
03
Quelques principes
Le vide Centré Hors-champ
04
L’identité visuelle
04
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.
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, ...
04
Le logotype
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.
Suivant ces différentes Ces deux logos sont trop complexes : trop de texte, trop
réponses les couleurs, de couleurs
la typo, le signe seront
différents.
Un logo doit être simple et
reconnaissable.
04
Le logotype
Signe seul Texte seul Signe intégré dans le texte
04
Le logotype
Signe à gauche Signe au dessus
04
La charte graphique
Le nuancier La typographique Les illustrations
...
Les applications La grille
04
Quelques ressources
Où trouver des idées ?
- Google image
- Pinterest
- Dribbble/Behance
Où trouver des pictos ?
- Flaticon
- The noun project
Où trouver des photos libres de droit ?
- Freepik
- Unsplash
- Gratisography
