Cours ID visuelle

17
SEANCE identité visuelle ABCDEFGH abcdefgh

description

Support de cours Master Spécialisé Innover & Entreprendre. Reflexion sur le design au début du projet + importance de l'UX / UI

Transcript of Cours ID visuelle

Page 1: Cours ID visuelle

SEANCE

identité visuelle

ABCDEFGHabcdefgh

Page 2: Cours ID visuelle

ABCDEFGHabcdefgh

Logo

Typographies

Couleurs

...

Page 3: Cours ID visuelle

LA CHARTE GRAPHIQUEen anglais : branding guidelines

Documentation rassemblant l’ensemble des marqueurs de votre identité visuelle.

Objectif :

Assurer la cohérence de l’identité de marque

dans une multitude de contextes.

Page 4: Cours ID visuelle

QUELQUES EXEMPLES

Adamas Regular (Typographie crée par Colorblind - Utilisation Commerciale et/ou personnelle autorisées)

COULEUR UTILISÉE TYPOGRAPHIE UTILISÉE POUR LE LOGO

ABCDEFGHIJKLMNOPQRSTUVWXYZBLEU NUIT “ESCP”C100 M89 Y21 K10#003671

LOGO & CHARTE GRAPHIQUEBLUE FACTORY (ESCP EUROPE)

LOGO PRINCIPAL

La zone bleue correspond à l’espace incompressible et necessaire entre le logo et son environnement. La zone verte correspond à l’alignement des éléments typographiques du logo et leur centrage.

= 10% de marge

LOGO ACCOMPAGNÉ DU LOGO ESCP EUROPE

SUGGESTION DE DÉCLINAISON COULEUR UTILISÉE

BLEU NUIT “ESCP”C100 M89 Y21 K10#003671

RECOMMANDATIONS

- Ne pas étirer ou déformer la typographie / le logo- Garder la même organisation typographique- Respecter autant que possible la couleur utilisée

Fichiers disponibles : .ai / .png / .jpg

SUGGESTIONS D’ACCOMPAGNEMENT

TYPOGRAPHIQUE

Helvetica Neue lt Std

> 77 Bold Condensed> 47 Light Condensed

CHARTE GRAPHIQUE ESCP EUROPE

Édition 2011

Page 5: Cours ID visuelle

EN PRINCIPEce qu’un designer vous recommendera

2 à 3 CouleursTypographies

Prévoir la charte en fonction des utilisationsde la marque (anticiper les besoins)

Définir type de logo

Page 6: Cours ID visuelle

LOGOTYPE / ICOTYPE / LOGO MIXTE

Page 7: Cours ID visuelle
Page 8: Cours ID visuelle
Page 9: Cours ID visuelle

pensez à votre ENVIRONNEMENT

une Marque sert à se différencier de la concurrence

Page 10: Cours ID visuelle

LE CONSEIL BOOTSTRAP

surtout si vous commencez sans designer et sans resources pour vous en offrir un

less is more

Page 11: Cours ID visuelle

LES COULEURSchoisir vos couleurs

Les couleurs ont dessignifications (qui peuvent varier en fonction des cultures)

Page 12: Cours ID visuelle

BLEUsympathie / harmonie /repos / passivité / paix / fidélité / infini /mélancolie / performance // froid

VERTespoir / tolérance / naturel / santéfrais / jeunesse / fiabilité // toxicité

ROUGEpassion / amour / force / courage / chaleur / joie / voyant // haine / colère / danger / erotisme

Page 13: Cours ID visuelle

CONSEIL

Exploiter Noir / Blanc + 1 couleur+ jouer les tons sur tons / nuances

exemple :

Noir Blanc Alizarine

Page 14: Cours ID visuelle

LES TYPOGRAPHIES

avec empa�ements

ou sans

Print : Sans Serif plutot pour les titrages et serif pour corps de texteScreen : Plutot Sans Serif pour l’ensemble (Serif parfois pour le titrage)

Page 15: Cours ID visuelle

LES TROUVER

ou les faire faire pour une personal touch

Page 16: Cours ID visuelle

EN MODE BOOTSTRAP

Aller vers l’essence de votre marque• votre Value Proposition

• votre différence ...

Simplifier l’incarnation visuelle de votre esprit de marque jusqu’à obtenir

des briques élémentaires à dessiner

calquetypo abstraiticoneoptions :

Page 17: Cours ID visuelle

icone

typo

calque...