Créativité visuelle

1 cerner les gouts du client : est e qu’il y en a qui préfère plus que d’autre ( regard au niveaux
des concurrents direct et indirect

2 Connaitre les valeurs à véhiculer : transmettre des émotions en fonction de ce qu’il veut faire
véhiculer

3 Déterminer univers graphique souhaité : unité visuelle a utiliser convenablement

COMMENT CREER UNE IDENTITA VISUEL FORTE ET MARQUANTE ?

C’est l’ensemble des élément graphique qui permet didentifier une marque ou une entreprise.
4 ELEMENTS :
- Logo - Couleurs
- Base line - Typographie
 La pyramide de maslo elle hiérarchise les 5 types
de besoin humain pour être pleinement satisfaite.

La pyramide 3 niveaux pour internet :

INTERFACE FIABLE : le site doit s’affiche

quand l’UT le demande et s’affiche
correctement.
Faire attention au serveur et hébergeur qui
peuvent ralentir l’affichage.
Erreur 500 : lié au serveur ( en panne ou
configuration poserait probleme)

Interface utilisable : avec des test la

fonctionnalité principale est facile a utiliser et
intuive pour correspondre a leur attente.

Interface agréable : émotion lié a la marque ou au valeur qu’elle veut transmettre. Soit fournis par
le client soit définis par l’agence. Lié valeur et émotion

« Le design émotionnel est une manière de créer une expérience utilisateur plus humaine
dans le but de créer l’engagement et la fidélité des internautes via son identité visuelle. »

PERSONA DE DESIGN :
Il va schématiser une personne, on créer un personnage pour la marque pour lui donner une
personnalité et savoir sur quelle valeur on va jouer pour les mettre en place.
Il va décrire comment représenter la personnalité du site et service avec un résultat uniforme et
cohérent.

1 - NOM DE LA MARQUE
Le nom qui va apparaitre sur le logo

2 APERCU
Scénario : petit paragraphe qui dit les produits et services proposer par la marque et quel est la
valeur ajouter par rapport aux concurrents

3 IMAGE DE PERSONNALITE
Photo pour créer de l’empathie, une img qui représente la marque(egerie ou personne x) connu ou
qui transmet des valeurs.
(on peut expliquer pourquoi on l’a choisit)

4 TRAITS DE LA MARQUE
Drôle > impertinent
Sérieux > coincé
Epuré > Simpliste

Donné les valeurs que l’on souhaite véhicule et leur cote négatif qu’on ne souhaite pas tombé.
5 CARTE DE LA PERSONALITE

Amical ou non
Et dominateur ou soumis en fonction de votre manière de parler.

Point gris : possibilité

6 VOIX

Si notre marque était une personne : homme ou femme, voix aigu ou grave, Language soutenu,
détendu. Comment elle parlerait.

7 EXEMPLE DE TEXTE

On va prendre des texte présenté sur le site pour avoir des exemple concrets. Phrase d’accroche
sur la page d’accueil, des titres principaux (h1), Message erreur ou de validation sur les
formulaires. Entre 5 ET 8.

8 LEXIQUE VISUEL
Cf « trait de marque » + mot clé du
secteur d’activité du client
Moon board;

C’est pas un choix définitif, c’est une

ambiance que l’on aimerait.

9 METHODE D’ENGAGEMENT

Visuel pour les fetes, jeux concours, page 404, formulaire d’inscription..
Listing qui évolueront sur le long terme. Fait avec les équipes marketing.

———
 Qu’est ce qu’un logo ? Comment le rendre efficace ?

« Un logo va servir à valoriser l’image d’une marque ou entreprise en identifiant l’activité, le

service …
5 critères :

MEMORABLE : un logo qui est

facilement retenu.

SIMPLE: un logo qui va être

facilement mémorable, qu’on
peut s’en rappeler facilement
sans trop de détails en plus

APPROPRIABLE: convenir et
parler à la cible, qu’ils puissent se
reconnaitre dans les choix
graphique ou couleurs, et aussi
par rapport aux valeurs de la
marque et de la cible

ETERNEL:Un logo qui doit tenir dans le temps, qui dure plusieurs années

ADAPTABLE: Lisible quelque soit le support print ou web

STRUCURES LOGO DES DERNIERES ANNEES

TENDANCES LOGO

Workdmark : MOT SYMBOLE

Utiliser le nom de marque pour faire le logo
 Contraste
Typographique :
2 typos différents
( caligraphique et
typo sans serif)

Typo Alternative:
Ajouter au nom
de marque, une
motif de la lettre,
quelque chose de
nouveau qui
apporte un
message. (emma
= marque de
matelas).

4 : EMBLEMES /
BADGES
Emblème
contemporain, ligne et
typo épuré, une
épaisseur fine, et dessin
vectoriel. Garder un
classique pour
l’emblème. ( mettre en
avant leur savoir faire
ancestrales)

5 : ANIMATION:
Animer le logo ou l’ensemble. Faire passer un message plus facilement.

6 : ADAPTABLES:
Différentes déclinaison du logo, site responsive, pas forcement placer sur le site on le simplifie
pour qu’il soit lisible.

7 : FORME 3D :
Donner une profondeur au logo, forme 3D. Tendance dans l’innovation.

LOGO :
TYPOGRAPHIE: a faire choisir pour le nom de marque. Ou même pour un symbole
COLORIMETRIE: choix a faire
FORME: en fonction de la forme carre ou arrondi, la signification est differente.

TYPOGRAPHIE :
POLICE DE CARACTERE :
Ensemble des caractères composant l’alphabet d’une même famille comprenant tous les styles,
coprs, chasses et graisses ( ARIAL)

FONT:
Ensemble des caractères d’une même police de même style, grasse, chasse et corps (ARIAL
ILALIC, BOLD 12px)
Qu’est ce qu’un point ?
Unité de mesure pour les impressions et de la typographie.

1,72e du pouce = 0,03528cm

En print, le texte courant = 16 points.

Qu’est ce qu’un pixel ?

Unité de mesure a la taille de l’écran et de la résolution.
On peut pas le dire en cm vu que cela dépend de la taille de l’écran et de sa résolution.

Classification en web

5 FAMILLES DE POLICE WEB STANDARD :

- Sans serif
- Serif
- Monospace
- Fantasy
- Cursive
SANS SERIF :
Police de caractère sans empattement. ( ARIAL , TAHOMA, VERDANA )

SERIF:
Police de caractère avec empattement ( TIMES NEWS ROMAN, GEORGIA )

MONOSPACE:
Police de caractère avec une chasse fixe = même largeur ( COURIER NEW )

FANTASY:
Police type décorative, pour les gros texte mais pas texte courant. (IMPACT, ARIAL BLACK)

CURSIVE:
Police de caractère qui imite l’écriture manuel ( COMIC SANS MS)

COMIC SANS MS :
Trop utiliser a different emploi.
L’inter-lettrage n’est pas le même pour tous les caractères. Pas de confort de lecture ( handicap
cognitif et neurologique). Certaines lettres ne sont pas très bien travailler, et les lettres ne sont pas
jolie visuellement.

CSS3 ou l’art de choisir n’importe

quelle typographie
Au début de la page CSS, faire apparaître 2
propriété :
 Url : http ( google font)
Url ( font/ dossier typo)

True type :
Open TYPE : meilleure qualité de
caractère ( en print et en web sans
perte de qualité), ( plus d’extension :
glyphe, filature, petite capitale )
WOFF : web open font format :
EXTENSION 2009 / FORMAT prévu
pour le web, comprimé pour
permettre d’avoir un poids léger
même soucis que la TTF.

PRINT : CLASSIFICATION THIBAUDEAU

LES ELZEVIRS : empatement triangulaire ( TIMES, GARAMON, BASKERVILLE)

LES DIDOTS : empatement filiforme, rectangulaire mais assez mince, fort contraste entre les
pleins et les déliées ( DIDOT, BODONI, WALBAUM)
LES EGYPTIENNES: Empattement plus épaisse que les Didot, l’épaisseur de l’empattement va
être quasiment égale au Trond de la lettre (CLARENDON, ROCKWELL, MEMPHIS)
LES ANTIQUES: Toutes les polices de caractères sans empatement ( ARIAL , HELVETICA,
FUTURA, UNIVERS)
 CLASSIFICATION VOX ATYPI ( par Maximilien vox en 1954)

1 CARACTERES CLASSIQUES OU HISTORIQUES

HUMANES GARALDES REALES

2 caractéristiques visuel pour les reconnaître:

empattement et triangulaire, et certaines
lettres sont incliné sur la gauche.

HUMANES : caractères latin les plus ancien

connu, venu de Venise, et vient des texte
humaniste de l’époque. ( Myriade, Sentors)

GARALDES : elle vient de 2 archétypes, de

l’époque. Dériver des humanes, et parfois des
proportion plus fine . (GARAMONT, CASSON )

REALES: caractère dit classique du 18e siècle, un peu austère au niveau de leur constitution.
Transition entre les garances et une autre. L’inclinaison sera moins forte et empatement plus fin.
( TIMES, BASKERVILLE).

2 CARACTERES MODERNES
fin 19e siècle
3 familles de police :

DIDONE / MECANES

- 2 caractéristique visuel commun : empatement et inclinaison qui n’existent plus sur les
caractères

DIDONES : correspond famille Didot

vient de 2 célèbre imprimeur de l’époque
(Dido et Bodoni)
Les polices qui apparait avec ces 2
familles sont des polices avec
empatement horizontaux

MECANES : correspond classification

kibodo égyptienne

Ce sont des caractère qui ont vu le jour

avec l’ère de l’industrialisation, on les
appelle aussi les egyptienne, du a
l’engouement pour l’Égypte qu’il y a eu a l’époque
Les polices qui appartienne a cette famille : century, clarendon ou rokwell

LINEALES: Caractères sans empatement

Appeler antique, grotesque ou bâton
Il existe une multitude de police pr cette famille : Futura, univers, Gill sans
 3 CARACTERES INSPIRATION CALLIGRAPHIQUES

INCISES: inspiration des trous fait dans la

terre ou le metal ( OPTIMA)

SCRIPTES : police de caractères inspirer de

l’écriture a la plume ( années 50, année folles)

(MISTRALES)
MANUAIRES : inspiration de l’écriture au
pinceau (ORIOL)

4 FRACTURES : caractère dit brisé ou

gothique qui font références l’époque
médiévale( FRAKTUR, OLD ENGLISH)

5 NON LATINES: hétérogène, police de

caractères n’ont basé sur l’alphabet latin
( HEBRAIQUE, ARABE)

COMMENT FAIRE SON CHOIX ?

1 POLICE = 1 personnalité

Ressenti des familles : quel ressenti

que les utilisateur avait et les termes
utiliser pour les qualifié.

Serif : Classique, élégant, luxe,

Sans Serif : Moderne, épuré,

minimaliste

FANTASY : décorative, titrage

Monospace : force et clarté,

chasse régulière

Cursive : Créativité, expressions

des sentiments, identification a
la personne

OU TROUVER SES TYPO ?

RVB additive = mélange tout = blanc = couleur écran
CMJN = MELANGE Tout = quasi noir = Couleur print
PANTONE = couleur référencer dans un échantillonnage( nuancier, pantonier),

Pantone :
+ : couleur fiable , couleur spécifique
- : Plus cher , coût du nuancier

Pantone C: papier couché

Patone U :
Pantone M: papier Mat

PANTONE 2020
La psychologie de la couleur est un boost pour la conversion !!

62 a 90% des internautes jugent un produit/service uniquement sur la couleur

HEINZ (rouge) pendant 7 mois en vert : +23 millions $

+ 10 millions de bouteilles vendues en plus de 7 mois

HOMMES: couleur terne, moins lumineuse

FEMMES: couleur claire, nuance de couleur

ETUDES MARKETING AUTOUR DE LA COULEUR

3 domaines :
alimentaire,
média,
High tech

Chine = chance
Afrique = deuil

3 domaines:
Divertissement
voyage, sport

accessibilité,
rentabilité,

Inde : spiritualité
urkraine: révolution
Asie : royauté
Egypte : deuil
 Les 3 couleurs les plus utilisés sont le noir a 33%, rouge à 10% et le bleu a
23%. ( étude 2019).

Choix harmonies des couleurs

Harmonie à 2 couleurs : Couleurs diamétralement opposées

Harmonie à 3 couleurs : Triangle équilatéral

Harmonie à 4 couleurs : Rectangle de 2 couples complémentaires

Camaïeu : Différents tons d’une même couleur ( dégradée)

ATTENTION AU NIVEAU DES CONTRASTES DES COULEURS:

FORMES ET SYMBOLIQUE

LIGNE HORIZONTALE : calme,

sérénité, stabilité auprès des
marques ( aspect négatif :
immobilisme) (ING DIRECT).

LIGNE VERTICALE :
Hierarchisation, force et
determination de la marque, rajouter des espaces sur le logo si necessaires, (aspect negatif : trop
de barre verticale, = code barre ou prison ) (VALPRE)

LIGNE OBLIQUE: Progression et ascension ou inversement descendant, dynamisme de la

marque. (ADIDAS NIKE)

CARRE: associé au construction

humaine, il mettra en avant sur la
marque qu’elle a des actions
organiser et structurer. Notion de
sérieux de la marque, en France au
niveau du code de la route ( c’est
arrêt ou danger), pour les banque
(AXA SOCIETE GENERALE) et
assurance souvent utilisé ( sérieux).

RECTANGLE: quasi identique au carré, sauf selon vertical(la force et le dynamisme de la marque
et aussi sa spontanéité) ou horizontale( vision panoramique de la société, mais aussi le calme et
repos) ( ALLIANZ L’HUMANITE).

LOSANGE: aspect de partage et d’échange, faire attention aux angles pointues = agressifs
(LESIEUR).
 TRIANGLE: sécurité, la vigilance,
la sagesse et l’équilibre de la
marque, (religion catholique =
trinité), en fonction de la pointe
haut ( homme, puissance et
virilité) bas ( femme, féminité et
fécondité). (ABODE GOOGLE
DRIVE).

POLYGONE: à partir de 5. Forme pour la polyvalence de la marque, France pour une notion de
territoire. ( HARMONIE MUTUELLE, COLISSIMO).

CERCLE: perfection et infini, mettre en avant le mouvement sur le logo, attention a ce qu’on met
a l’interner du cercle = enfermement. Lié au milieu artistique, mettre en avant la créativité, et aussi
aspect communautaire, rond = terre, bcp de logo de navigateur web pour montrer la connexion
(STARBUCKS, DARTY, GOOGLE CHROME).

TARIFICATION LOGO

3/4 allée retour pour des modifications accepté pour le clients, sinon payer e supplément le taux
horaire.

DROIT D’AUTEUR:

Pour montrer qu’on est le premier qu’on a fait le logo, ( le logo appartient a l’agence dans le cadre
d’une societe), protéger son travail en cas d’auto entrepreneur.

ENVELOPPE SOLEAU: Prouver qu’on est le

créateur d’une oeuvre graphique et surtout a
partir de tel date. Une pour nous, une pour
l’INPI.
Cela coute 15€ (5mm = 7 feuilles en format
A4, et aussi en format numérique (10Mo de
fichier et 10€ par 10Mo supp).

Durée de 5 ans, renouvelable une fois !

INPI ne se portera plus garant après.

Graphiste s’envoie a eu même les lettre par recommandé pour avoir une date dessus, et elle sera
ouverte en cas de problème au tribunal.

INPI protège le nom de marque, on peut déposer le brainstorming pour protéger nos données
ainsi que le nom de la marque dans le même secteur d’activité pour ne pas avoir de doublon.
 MAQUETTAGE

Faire valider l’aspect visuel au client pour continuer le développement.

42% des UT se font une opinion du site en observant le design ( sans lire le texte).
52% des consommateurs ne reviendront pas sur un site a cause de son design ( vieux ou pas
confiant).

« EFFET ESTHETIQUE UTISABILITE »

Les UT perçoit un site comme plus utilisable et intuitif seulement si il est esthétique.
Aspect graphique en lui meme.

1 position logo, textes et images

Avec les Wireframes, on place les img et

les texte etc ..

Revoir les Wireframes si des soucis

d’espaces ou ajustement des texte.

2 Aligner éléments pour responsive

Site responsive, grille indispensable.

Colonnes.

Que tout soit aligné des aliments.

< site pour faire les grilles.

PLUNG IN PHOTOSHOP _
GUIDEGUIDE.

Adobe XD.

3 Mettre en place identité

Mettre en place, typo, image etc ..

ATTENTION au pop in etc ..

Hiver, bouton etc il faut l’intégrer pour le

montrer.

PENSER AU PIXEL PRES !!!!! Il ne faut rien

oublier !! L’integrateur va faire EXACTEMENT
LA MEME CHOSE !!!!
1 TEXTES

Ligne de texte trop long : 45 à 75 caractères, moyenne 60 caractères.

Taille de texte: texte courant 13px, lisibilité et pas trop encombrant. Titre plus gros. La taille ne
diminue pas dans les version smartphone.
Nombre de typo différentes: Il est conseille de ne pas dépassé 2 à 3 typos différents, pour ne
pas perdre l’UT sur le site. (2 typo en moyenne, 2 famille de polices totalement différents, 1 texte
courant - 1 titre).

2 COULEURS

Couleurs du logo : 2 couleurs principales, et 3 couleurs secondaires, pour le site. (1 couleurs à

une catégories = plusieurs couleurs possibles pour bien différencier les catégories).
Bouton/action: Couleurs chaude peu utiliser sur l’ensemble de la page, pour attirer l’oeil.

« Un élément qui diffère des autres a plus. De chance d’être mémorisé » Effet Von Restorff

3 TENDANCES WEBDESIGN 2020

DARKMODE

SITE [Link]
Concentrer sur l’interface UT, élément placé sur la page, qui ressort avec le contraste qui va être
utiliser dessus. Un fond sombre réduit le stress par les yeux.

CADRE BLANC/ MINIMALISME

Fond entièrement blanc, très fin, épuré. Image en full-screen ou les centre sur la place avec un
cadre blanc pour donner du poids à l’img. Cadre blanc permet de structurer la page et de
stabiliser.

COULEUR LUMINEUSE ET ECLATANTE

Fond sombre avec une palette de couleur éclatante, effet néon pour les faire ressortir. Les 3
couleurs ( bleu, violet, rose).

ELEMENTS 3D IMMERSIFS/ REALISTES

Éléments du site comme photo ou dessin pour essayer avec la 3D donner de la profondeur au
design. Jeux de matières mit en place peut donner du réalisme et de la proximité à l’internaute.
Cela va aider l’expérience UT pour passer plus de temps sur le site internet.

OMBRE ET OBJET FLOTTANT

Matériel design a l’extreme, en 2D. Grâce a ombre ou juxtaposition des objet, on peut casser les
code et ajouter de la profondeur a la maquettes.
Connu des graphiste, pas trop en faire a cause du fait que cela évolue très vite.

4 TROUVER L’INSPIRATION
Galeries de site :

[Link]
[Link]

Site de template :

[Link]
[Link]
TEXTURES:
[Link] ( pour le fond du site, on peut tester sur le site pour avoir notre avis)

VECTEUR ICON :
[Link]
[Link]
[Link]
[Link] ( changer les couleur sur le site pour changer l’icone choisir directement)
[Link]
[Link]

IMAGES:
Img le plus parlant au niveau de l’activité.
ATTENTION AU LICENCE DES IMG
[Link]
[Link]
[Link]
[Link]
[Link]
[Link] GRATUIT
[Link] GRATUIT
[Link] GRATUIT

LICENCE FRANÇAISE

Libre de droits :
Libre et illimité, autant de supports que l’on veut. Domaine privée et commercial et promotionnel.
Blog perso et site commercial.
Photo payante, + img grande + tarif élevé.
On a pas le droit de donner cette img à quelqu’un. On achète on utilise.

Droits gérés :
Prive, commercial et promotionnel.
Usage UNIQUE. Dire ou qu’on va l’utiliser et combien de fois, combien de temps, et ou il sera
utiliser = tarif final.
On a pas le droit de donner cette img à quelqu’un. On achète on utilise.

Usage éditorial :
Photo utiliser dans un cadre public ou fait d’actualité.
Grand reporter vendue des journaux ou magasine pour les utiliser dans leur articles.
Usage UNIQUE de la photo.

CREATIVE COMMONS (EN)

La plus interessante c’est la CC0:

Il ont quasi plus de droit sur la photo, et elle est public.
On peut l’utiliser comme on le veut.

BY: attribution ou paternité

On peut en faire ce que l’on veut , seul obligation on doit
citer le nom de l’auteur ou copyrite de l’img.

SA: Partage a l’identique

Modifier ou montage photo, proposer a la vente ou autre
avec les modfis on ne peut le faire il faut le faire avec la
même licence que la photo initiale avec le nom de
l’auteur de la photo initiale de la photo utiliser.
NC: non commercial
Cadre privée, non commercial ou promotionnel.

ND: pas de travaux dérivé

INTERDICTION de faire la moindre modification sur la photo.
Seul motif toléré = recadrage

Elles peuvent se cumuler - NC SA BY etcc.

VERSION SMARTPHONE

Penser à la taille des éléments pour qu’il soit visible.

NORME ISO 9241-9 : élément tactile : zone de clic optimale est de (carre) - 44px.

Loi ergonomique : loi de FITTS 1954 (Paul Fitts) met en relation vitesse et précision.
Plus un élément est gros moins UT prendra de temps a l’atteindre et facilement clicable.
Plus il est petit plus de temps sera long pour l’atteindre et complication pour cliquer.

Attention dans les formulaires : champs à 100% de largeur, taille de

texte ++

5 VALIDATION CLIENT

2 propositions différentes a partir d’un wireframe.

Le client nous fera les retours avec quelle maquette et les modifications à faire.

6 DECLINER SUR LES AUTRES PAGES DEPUIS LA PAGES D’ACCUEIL

Pour les montrer au client : Faure les proposions des wireframes. Et faire ce qu’est responsive =
ordi - tablette - smartphone. (12 maquette ou 8 maquettes si tablette = ordi).
Catégories
Produit
Contact

Page qui recentre du texte pour les titres et textes courant pour aider l’intégrateur au niveau de la
mise en page avec l’ensemble des textes.

CARTE DE CHALEURS

3 utilités

- Mesurer l’engagement : savoir jusqu’a ou l’UT lit les pages du site.

- Mesurer les actions : savoir ou les UT clique sur la page du site.
- Mesurer l’attention : en fonction des cliques et mouvements de la souries on va savoir ou UT a
le + d’attention.
MESURER L’ENGAGEMENT :

Analyser le scroll.
SCROLL-MAP :
Couleur blanc : 100% des UT ont vu, visible sans scroll,
Couleurs jaune, orange, rouge : vu par la majorité des UT,
Couleurs vert bleu ou noir : vu ou quasiment pas par UT.

MESURER LES ACTIONS:

La HEATMAP:
Click head map,
Chaque clic va être représenter par des tache jaune pour voir ou UT clique.

Pourcentage de clics:
Stats des liens cliquable, pour savoir quel lien fonctionne le mieux de la page.

MESURER L’ATTENTION:

CARTES CONFETTI:
Carte similaire a la précédente: on peut discerner tout les clics fait par les UT et aussi les
placements long de la sourie.

QUELS OUTILS ?
Faire de bonne déductions.

- Segmentation comportementale: nouvel UT ou un UT qui vient d’une campagne ou autre.

- HEADMAP responsive: certains outils ne fonctionne que sur ordi, faire attention de bien
prendre un outils responsive.
- Exports des données : toujours interessant dépourvoir les exporter et de faire des analyses
complètes.
- Aspect dynamique: ce qui ne prend pas en compte pop in, slider, faire attention que l’outils
puisse le faire.

HEADMAP _ GRATUIT POUR UN SEUL SITE QUE 5 PAGES

SMARTLOOK période d’essaie - version gratuite
HOTJAR période d’essaie -version gratuite- limitation export de donner
CRAZYEGG - période d’essaie pas de version gratuite
CLICKTALE - période d’essaie pas de version gratuite

A/B TESTING

Tout les visiteurs qui viennent sur le site auront des versions différentes.
VERSION A & VERSION B.
Sur les version on peut modifier certains éléments.

Avoir d’avantage de visite ou de vente.

Regarder les stats et voir le taux d’inscription et conversion en fonction des version.

Une des premières motifs c’est un changement de couleurs, les phrases d’accroches, certains
contenu, changer les formulaire etc …

65% des marqueteur font de A/B Testing

51% pour améliorer l’ergonomie
24% pour vérifier l’apport de nouvelles fonctionnalités
OUTILS ?

- Kaameloon
- AB Testy
- Optimize (Google) +++ Gratuit ( simple à mettre en place, on peut coupler les résultats à
Google Analystics )

ELEMENTS COMMUNICATION

RESEAU RATP

les culs de bus sont 4x plus regarder que d’autres.

[Link] // prix et lieu des location des

panneaux d’affiches.

Abris bus : en fonction des villes cela appartiendra soit a la ville

soit a la RATP.

AFFICHAGE DE RUE / MOBILIER URBAIN

4x3 : grenaille juillet 2015: certaines
villes ou la population de 10,000
habitants.

Bâche pub: façon permettante (opéra

Garnier), bâtiment en rénovation pour
camoufler les travaux. ( cela revient
vite très cher).

Colonne Morris: SEULEMENT A

PARIS. Art et spectacle !

Sucette: Paris aucune sucette. Mais

autre aglo oui.
[Link]

PAPETERIES
Flyers : A5 / A6. Attention Mention
légale a faire apparaitre (pas jeter sur la
voix public, mendataire du flyer
l’entreprise pour qui on fait la pub -
4 INFOS:
•nom de la société
•Forme de la société ( SA, SARL)
•Numéro RCS - registre des commerce
et société et la ville du siège
•Capital social à faire apparaitre
A FAIRE AUSSI POUR L’IMPRIMEUR.

En fonction de la pub on fait apparaitre d’autre mention ( manger bouger, attention a l’abus
d’alcool).
 Logo a faire apparaitre si la société a fait imprimer plus de 5 TONNES de
papiers ( taxe a payer).
Logo trime = logo de papier recycler pour la bonne poubelle.

—————
• Indiquer si photo humain retouché.
• Si texte non français mettre la traduction ( légalement obligatoire).
• Aspect visuel interdit de faire un flyer un fond blanc et texte noir ( réserver a l’administration
public pour décret officiel) .
• Distribution: droit de regard pour éviter les problèmes, communes de la grande couronnes de
Paris on doit déposer un dossier à la marie.
• Interdit de distribuer des flyers à des voitures avec le moteurs allumés sauf Croix Rouges.

Papier a entête :
Cadre administratif : mention légales : siège social(adresse), raison social (SARL..), Numéro RCS
et capital social.
Facture ou devis : rajouter le numéro de TVA intracommunautaire.

Enveloppe : LOGO qui apparaît.

Carton de correspondance: en fin d’année pour envoyer leur voeux, assurance et banque petit
cartons des banquier avec détails ( taille standard: 10x20cm)

Carte de visite : 8,5x4,5 cm ( taille CB)

Plaquettes et dépliants : 2,3 volets. Chaque face a une actions différentes.

[Link]

4 PRESSE :

Chaque presse à une idée différente pour

la marque.
[Link] , il relate les tarifs des
presses. Stats de lecture interessants pour
la cible.

Journaux gratuits dans les metro, les

dernières de coup coute plus chère

GOODIES :

En fonction du secteurs d’activité du client.

Stylo, clés usb, tshirt, mug …

BONNE PRATIQUES PRINT:

Colorimétrie : CMJN -
Résolution : dpi - point par pouces. Unité de
mesure qui permet de régler la résolution des
imprimantes qui va régler la qualité de l’impression.
Min = 240 DPI - 300DPI
ZONE DE SECURITE:

Zone de marge: a l’intérieur du flyer ou il ne faut pas mettre de texte. (5mm).

Zone de fond perdu : marge autour du doc, prolonger les fonds. (5mm).

Faire des mises en situations avec des mockups.

• [Link]
• [Link]
• [Link]
• [Link]
• [Link]

[Link]
( lien pour mockup réseaux sociaux).

CHATRE GRAPHIQUE

Contient les règles fondamentales d’utilisation des éléments graphiques qui constituent
l’identité graphique d’une marque / entreprise.

Facultatif. Pas d’obligation de la réaliser.

Facturer en plus des prestation.
Elle permet de rester en cohérence avec tout les éléments que l’on fournis au client.

• Conserver la cohérence graphique dans le temps et sur different supports.

• Identifier facilement une enseigne avec typo et couleur.

Charte graphique uniquement web ou uniquement print. Ou parfois un peu les 2.

1 LOGO
Le logo représente la marque.
1ER élément de la chaire graphique.

• Justification du logo. (concept et organisation, les choix…).

• 70% visuel 30% textuel.

1.1 COULEURS
Ajouter les couleurs utiliser dans le logo, et code RVB & CMJN.

1.2 TYPOGRAPHIES
Montrer les typo qu’on utilise dans le logo.
Abcdaire de la lettre A a Z avec nombre et caractère spéciaux.
Choix et licence ( gratuite ou payante) a faire apparaitre.

1.3 DECLINAISON
Montrer les déclinaison du logo, couleur ( noir et blanc, nuance de gris), version mobile.

1.4 INTERDIT
Montrer les interdit du logo. NE PAS CHANGER TYPO, DESIGN, DEFORMER etc…
On peut interdit ici de mettre le logo en certains fond et img.

1.5 ZONE DE BLAN TOURNANT

Espace autour du logo dans lequel on ne place pas de contenu.
Taille fixe au min = 2cm autour du logo. Indication en mm pour le print et px pour le web.
Élément qui compose le logo: zone de regard dépend de la taille de cette élément la.
1.6 DIMENSION MIN ET MAX
Les tailles ou l’on a pas le droit de mettre en plus petit le logo pour ne pas perdre des éléments du
logo. Et tailles maximale du logo prendre le plus grand support de logo (4x3).
METTRE EN MM ET PX.
Taille max: mettre un certains pourcentage ( taille du logo ne dépasse pas 20% de la taille du
support ou il sera placer).

2 COULEURS
On présente les couleurs qu’on peut utilise dans les différents supports.
Couleur principale et ensuite les couleurs secondaires. Mettre les pastilles, RVB et CMJN.

2.1 ACCESSIBILITE WEB

Présenter les couple (contraste) de couleur qu’on peut utiliser dans les support de com dans un
point de vue d’accessibilité.
Couleur analyseur de couleur, qui permet de savoir quelle couleur on peut utiliser.
Niveau AA très bon à avoir.

Faire un screenshot des écran qui montre les contrastes, noter le code de la couleur, et voir si le
texte est conforme avec le texte AA.

3 TYPOGRAPHIES
Toutes les typo que l’on peut utiliser, classifier les typo,
TITRE ET PHRASES D’ACCROCHE en premier lieux,
TEXTE COURANT en second.

On va présenter un abcdaire, des typo pour présenter l’ensemble de la typo qu’on utilisera.
(gratuite ou payante avec site).

4 TABLEAU DES TYPO

UNIQUEMENT AU WEB
Si on doit rajouter des
pages sur le site,
l’intégrateur regardera le
tableau pour intégrer une
nouvelle page.
Prévoir le hover si
changement, et si le style
change il faut l’indiquer.
Selon ordi ou smartphone.

5 IMAGES
On va donner des indications au clients et graphistes, des images qu’on peut sélectionner.
Img autorisé (oui) img refuse ( non) et les explications.

• Point de vue visuel (noir et blanc oui, couleur non)

• Contenu de la photo ( fond blanc oui, humain non).
• Avoir une dizaine de photos autorisées et refusées.

Chaque photo sélectionné a qui appartient les droit de l’img on parle de CREDIT DES IMG. Auteur
de la photographie. c + auteur ou site ou l’on a prit la photo.
Il doit apparaitre à côté ou en dessous de l’img.
6 ICONS PICTO
Recenser les pico qu’on pourrait a avoir utiliser.

Rechercher ( si hover ou clic montrer a quoi elle ressemble).

Icon dessin qui ressemble a la réalité.

Picto/

7 BOUTON

Présenter si changement.

8 DIMENSION DES BLOCS

Gabarit de la page, menu (taille) etc…

9 BANNIERES PUBLICITAIRES
Facultatif (display).

10 PRINT
On présente les différents supports print qu’on peut présenter au client.

Montrer les positions des éléments sur la

page avec unité de mesure (mm).
CAHIER DES CHARGES - PARTIE CHATRE GRAPHIQUE