PETIT GUIDE �APPLICATION GRAPHIQUE
1
2
3
INTRODUCTION
4
Ce petit guide d’application graphique à pour but de vous présenter les différents éléments de la charte graphique de Violette & Co. TOULOUSE. Ce guide vous montrera le logotype crée pour la marque, toutes les explications relatives à son utilisation, ses caractéristiques, et ses différentes déclinaisons. Le but principal de ce guide est de conserver un cohérence graphique dans les différentes réalisations graphiques de la marque. Vous y découvrirez donc les consignes d’application graphique pour les différents supports liés à la marque tel que le packaging, la papeterie, les supports de communication, l’enseigne ou le site web de la marque. 5
SOMMAIRE
6
IDENTITÉ VISUELLE LOGOTYPE GAMME COULEUR TYPOGRAPHIE APPLICATIONS
p. 10 p. 22 p. 24 p. 26
BRANDING / MARKETING
LIGNE GRAPHIQUE IMAGE DE MARQUE ET FIDÉLISATION COMMUNICATION ET RÉSEAUX SOCIAUX
p. 32 p. 34 p. 36
PACKAGING
PACKAGING PRODUITS PACKAGING EMBALLAGES PACKAGING COFFRETS CADEAU
p. 44 p. 48 p. 52
ENSEIGNE ET AMÉNAGEMENT DE L’ESPACE DE VENTE
STYLE GRAPHIQUE MAGASIN VITRINE ET ENSEIGNE AMÉNAGEMENT DE L’ESPACE DE VENTE
p. 58 p. 64 p. 68
SITE WEB
INTERFACE GRAPHIQUE ET STRUCTURE DU SITE SITE WEB ‘‘ DESKTOP ’’ SITE WEB ‘‘ MOBILE ’’
p. 74 p. 80 p. 86
7
IDENTITÉ VISUELLE
8
LOGOTYPE
logotype et déclinaisons utilisation du logotype
GAMME COULEUR
p. 24
différentes typographies et usages
APPLICATION
p. 22
gamme colorimétrique de la marque
TYPOGRAPHIE
p. 10
p. 26
application et utilisation exemples d’application
9
IDENTITÉ VISUELLE LOGOTYPE logotype et déclinaisons
Le logotype de Violette & Co. TOULOUSE se compose en trois partie, un sigle, le nom de la marque et la mention TOULOUSE. Le choix typographique de ce logo s’est porté sur une typographie manuscrite légère et envolée représentive des caractéristique de la violette ( délicate, précieuse, douce, rafinée, élégante et chaleureuse ). Le principal « jeu graphique » de ce logo se porte sur l’esperluette ( & ) étant tiré du sigle. Le sigle, composé de deux esperluettes représente de manière stylisée un fleur de violette. Celui-ci peut être utilisé seul dans certains cas ( dont il sera fait mention dans ce dossier ). Le titrage « Violette & Co. » est indisociable de la menion « TOULOUSE » et ne peut être utilisé seul. Le sigle et le titrage seront de couleur violette ( voir rubrique « GAMME COULEUR » ) et la mention sera obligatoirement de couleur noire. 10
11
LOGO EN COULEUR 12
SIGLE EN COULEUR 13
LOGO EN NOIR 14
SIGLE EN NOIR 15
IDENTITÉ VISUELLE LOGOTYPE utilisation du logotype
Le tracé en pointillé ci-contre présente la zone d’exclusion à respecter autour du logo. Aucun autre élément ne doit chevaucher cette zone de manière à ne pas perturber la lecture de celui-ci. Ce logo sera toujours présent en haut au centre des publications. 16
ZONE D’EXCLUSION DU LOGO À RESPECTER 17
INTERDICTIONS POUR L’UTILISATION DU LOGO Les représentations ci-contre montre les utilisations proscrites à l’usage du logotype. Il ne faut en aucun cas les reproduire. 18
NE PAS
NE PAS
dĂŠformer le logo
modifier le logo
Violette & Co. NE PAS
faire pivoter le logo
NE PAS
encadrer le logo seul
NE PAS
changer le titrage
NE PAS
(sauf exception pour ĂŠtiquettes packaging)
incruster de visuels dans le logo
NE PAS
NE PAS
modifier la couleur du logo
apposer le logo sur un visuel de fond 19
INTERDICTIONS POUR L’UTILISATION DU SIGLE Les représentations ci-contre montre les utilisations proscrites à l’usage du sigle. Il ne faut en aucun cas les reproduire . 20
NE PAS
dĂŠformer le sigle
NE PAS
faire pivoter le sigle
NE PAS
encadrer le sigle seul
NE PAS
modifier le sigle
NE PAS
aposer TOULOUSE seul sous le sigle
NE PAS
(sauf exception pour ĂŠtiquettes packaging)
incruster de visuels dans le sigle
NE PAS
NE PAS
modifier la couleur du sigle
apposer le sigle sur un visuel de fond 21
IDENTITÉ VISUELLE
GAMME COULEUR gamme colorimétrique de la marque
Les encadrés ci-contre présentent la gamme de couleur à utiliser pour les publications de Violette & Co. TOULOUSE. L’usage de la couleur principale devant être limité il est fortement recommandé de l’utiliser uniquement pour le logotype et les encadrés. Préférez rester sobre et utiliser les blancs tournant du fond de votre publication. 22
COULEUR PRINCIPALE - LOGO C : 83 M : 100 J : 12 N : 2 R : 86 V : 38 B : 121 PANTONE : 268C HEX : #562679
COULEUR DE FOND - PAPIER C : 0 M : 0 J : 20 N : 0 R : 255 V : 251 B : 220 PANTONE : 7499C HEX : #fffbdc
COULEUR DU TEXTE C : 0 M : 0 J : 0 N : 100 R : 29 V : 29 B : 27 (préférer 0 ; 0 ; 0) PANTONE : Neutral Black C HEX : #1d1d1b (préférer # 000000) 23
IDENTITÉ VISUELLE
TYPOGRAPHIE différentes typographies et usages
La typographie est un élément indispensable à la concordance graphique des communications, celle ci devra être respectée pour toutes les publications externes.
RALEWAY Regular abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 RALEWAY Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 TYPOGRAPHIE SPÉCIALE COMPATIBILITÉ WEB (GOOGLE FONTS) 24
SACKERS GOTHIC Light abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 TYPOGRAPHIE TITRAGE PACKAGING PROXIMA NOVA Light abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 PROXIMA NOVA Light Italic abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 PROXIMA NOVA Régular abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 PROXIMA NOVA Bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 TYPOGRAPHIE TEXTE DE LABEUR PRINT 25
IDENTITÉ VISUELLE APPLICATION application et utilisation
Fond blanc sur papier à grain ou visuel de fond avec texture de papier à grain sur papier blanc. Logotype centré sur la publication.
Motif d’esperluette ( & - partie gauche du sigle ) noir en transparence ( noir : 10-20% ) sortant du cadre d’impression ( voir ci-contre ). 26
Violette & Co. TOULOUSE TĂŠl.: 05 61 45 78 96
entete.indd 1
10, Rue Croix Baragnon 31000 Toulouse violette-co.com contact.violette-co.com
22/06/2014 01:49:34
27
IDENTITÉ VISUELLE APPLICATION exemples d’application
Violette & Co. TOULOUSE 10, Rue Croix Baragnon 31000 Toulouse Tél.: 05 61 45 78 96 violette-co.com contact.violette-co.com
CARTE DE VISITE ( FORMAT 55x55 ) 28
Violette & Co. TOULOUSE Tél.: 05 61 45 78 96
Violette & Co. TOULOUSE Tél.: 05 61 45 78 96
10, Rue Croix Baragnon 31000 Toulouse violette-co.com contact.violette-co.com
10, Rue Croix Baragnon 31000 Toulouse violette-co.com contact.violette-co.com
CARTON DE CORRESPONDANCE ( FORMAT 160x160 ) RECTO PREMIERE PAGE LE VERSO RESTERA SANS IMPRESION
CARTON DE CORRESPONDANCE ( FORMAT 160x160 ) RECTO PAGES ADDITIONELLES LE VERSO RESTERA SANS IMPRESION RAPPEL DU LOGO PAR LE SIGLE UNIQUEMENT 29
BRANDING / MARKETING
30
LIGNE GRAPHIQUE
exemples de visuels et d’applications
IMAGE DE MARQUE ET FIDÉLISATION
p. 34
offres fidélité et cadeaux clients
COMMUNICATION ET RÉSEAUX SOCIAUX
p. 32
p. 36
catalogue produit annonces presse et affiches page facebook
31
BRANDING / MARKETING LIGNE GRAPHIQUE exemples de visuels et d’applications
Tout comme le logotype, le branding se base sur la même ligne graphique que celui-ci. L’essentiel étant de rester le plus sobre dans les compositions en « jouant » avec les blancs tournant, il est recommandé d’utiliser un papier à grain ou une texture de papier à grain en fond. Evitez des visuels et illustrations tranchants avec le style graphique. Si vous utilisez des visuels préférez des visuels au style épuré et « doux » avec un fond transparent. Voici quelques exemples de visuels vous guidant dans la ligne graphique à suivre. 32
La violette n’a pas dit son dernier mot
EXEMPLE DE VISUEL TEXTUEL
EXEMPLE DE VISUEL PHOTOGRAPHIQUE 33
BRANDING / MARKETING
IMAGE DE MARQUE ET FIDÉLISATION offres spéciales et cadeaux clients
Ce n’est pas pour rien qu’on dit d’un bon commerçant qu’il est « commerçant »! Le principal atout d’un commerce est d’être apprécié de ses clients. Il est donc essentiel d’établir un lien de fidélité avec eux. Il semble donc normal de remercier les clients pour leurs achats et leur fidélité. C’est pourquoi il a été spécialement élaboré ce petit coffret cadeau contenant des violettes cristallisées ( 10g ) afin de pouvoir l’offrir aux nouveaux clients. Il peut également être mis en place d’autres remises comme des offres spéciales ou des offres par tranches d’achat. 34
PROPOSITION DE CADEAU FIDÉLITÉ 35
BRANDING / MARKETING
COMMUNICATION ET RÉSEAUX SOCIAUX catalogue produit
36
Le catalogue se veut être sobre à l’image de la ligne graphique de la marque. Sa grille simple à la structure carré permet une lecture simple et une modification simple des contenus pour des ajouts sur les versions ultérieures. Epurée et claire, la mise en page du catalogue à pour but de mettre en valeur les produits ce qui est sa fonction primordiale.
37
BRANDING / MARKETING
COMMUNICATION ET RÉSEAUX SOCIAUX annonces presse et affiches
38
EXEMPLE D’ANNONCE PRESSE PAGE UNIQUE
EXEMPLE D’ANNONCE PRESSE DOUBLE PAGE 39
BRANDING / MARKETING
COMMUNICATION ET RÉSEAUX SOCIAUX page facebook
La réalisation d’une page facebook est à l’heure actuelle un élément indispensable à toute marque. Elle permet de conférer aux internautes des informations à propos de votre boutique, de publier des photos, d’informer les utilisateurs des nouveautés, de créer des évènements et de vous faire connaître. 40
41
ENSEIGNE ET AMÉNAGEMENT DE L’ESPACE DE VENTE
42
STYLE GRAPHIQUE MAGASIN
gamme couleur magasin logo et applications
VITRINE ET ENSEIGNE
p. 48
intégration vitrine et enseigne
AMÉNAGEMENT DE L’ESPACE DE VENTE
p. 44
p. 52
vitrines de présentation produits aménagement local de vente
43
ENSEIGNE ET AMÉNAGEMENT DE L’ESPACE DE VENTE STYLE GRAPHIQUE MAGASIN gamme couleur magasin
Contrairement à la ligne graphique des produits et des autres supports de la marque, l’enseigne et l’aménagement de l’espace se différencient légèrement de ces précédents notamment au niveau de sa gamme de couleur. Ce changement graphique a avant tout pour but de faire ressortir les produits aux packaging et aux couleurs claires en jouant sur le contraste de la vitrine et du mobiliers aux tons foncés. Le second but recherché est de faire de la Violette de Toulouse un produit de qualité et unique. Ainsi les produits seront présentés dans un magasin au design et aux vitrines épurées à la manière d’un produit d’exception, non pas par sa rareté mais par son originalité et sa distinction des produits de la grande distribution. 44
VITRINE
GRIS CLAIR MAT ( REFLETS VIOLETS LEGERS ) C : 50 M : 39 J : 37 N : 3 R : 134 V : 140 B : 144 PANTONE : Cool Grey 8 C HEX : #868c90
PORTIQUE ENTRÉE BOUTIQUE
GRIS FONCÉ BRILLANT ( REFLETS VIOLETS LEGERS ) C : 69 M : 62 J : 54 N : 40 R : 68 V : 69 B : 74 PANTONE : 7540C HEX : #44454a
LOGO ET SIGLE
METAL TRAITÉ MAT C : 21 M : 15 J : 15 N : 0 R : 201 V : 203 B : 205 PANTONE : 420C HEX : #c9cbcd
MOBILIER
BOIS PEINT NOIR MAT C : 0 M : 0 J : 0 N : 100 R : 29 V : 29 B : 27 (préférer 0 ; 0 ; 0) PANTONE : Neutral Black C HEX : #1d1d1b (préférer # 000000) 45
ENSEIGNE ET AMÉNAGEMENT DE L’ESPACE DE VENTE STYLE GRAPHIQUE MAGASIN logo et applications
46
47
ENSEIGNE ET AMÉNAGEMENT DE L’ESPACE DE VENTE VITRINE ET ENSEIGNE intégration vitrine et enseigne
48
49
50
51
ENSEIGNE ET AMÉNAGEMENT DE L’ESPACE DE VENTE
AMÉNAGEMENT DE L’ESPACE DE VENTE vitrines de présentation produits
52
53
ENSEIGNE ET AMÉNAGEMENT DE L’ESPACE DE VENTE
AMÉNAGEMENT DE L’ESPACE DE VENTE aménagement local de vente
54
55
PACKAGING
56
PACKAGING PRODUITS
utilisation et explications exemples d’application
PACKAGING EMBALLAGES
p. 64
utilisation et explications exemples d’application
PACKAGING COFFRETS CADEAU
p. 58
p. 68
utilisation et explications exemples d’application
57
PACKAGING
PACKAGING PRODUITS utilisation et explications Le packaging des produits est strict et doit respecter les critères mentionnés ci- après afin de garder une cohérence graphique dans toute la gamme. À l’exception des produits de beauté, seuls les flacons / boîtes en verre et en aluminium sont autorisés. Le plastique est toléré si le coût de revient est trop élevé mais doit être en minorité et utilisé qu’en extrême recours. Pour les produits de beauté et d’hygiene on préfèrera des packagings en plastique, plus légers, plus maniables et pouvant être comprimés. En règle général le produit sera vendu dans un flacon en verre transparent et fermé par un bouchon en aluminium. L’utilisation de ce support permet au client de voir directement le contenu ( produit ) et celui-ci étant généralement dans les tons de violet permet de faire ressortir l’étiquette ( avec un fond blanc ). Si pour des raisons sanitaires ou de conservation le produit ne peut être contenu dans un flacon en verre ( crème, baume, thé, ... ) celui-ci devra être présenté dans une boîte en aluminium ronde au style cohérent avec le reste de la gamme. Les flacons en verre seront ornés d’un ruban violet recouvrant le bouchon et d’un « pompom » placé sur le côté droit. Le ruban sera noué avec un « nœud papillon » en son centre. Dans le cas d’une boîte en métal, celle-ci sera cerclée par un ruban et n’aura ni nœud ni de « pompom ». 58
L’étiquette doit être placée au centre du flacon / boîte sauf si l’espace n’est pas suffisant pour assurer sa lisibilité où dans ce cas elle pourra être aposée sur le bouchon. Elle sera cernée d’un cadre violet de manière à la faire ressortir sur les produits de couleur claire.
encadré violet bordant l’étiquette logotype centré en haut de l’étiquette
BOUGIE PARFUMÉE À LA VIOLETTE
sigle en fond ( voir « application et utilisation » dans la partie « identité visuelle » nom de produit centré
DOUCEURS DE CHOCOLAT À LA VIOLETTE
5 2
COMPOSITION DE L’ÉTIQUETTE 59
PACKAGING TYPE A Bouchon en aluminium mat ( non chromé ) Ruban ornant le tour du bouchon Étiquette carrée centrée sur le flacon Flacon en verre
PACKAGING TYPE B Bouchon en aluminium mat ( non chromé ) Ruban onrnant le tour de la boîte Étiquette carrée centrée sur le couvercle Boîte en aluminium mat ( non chromé )
60
PACKAGING TYPE C Bouchon en verre avec boule sur le dessus Ruban ornant le tour du bouchon avec « pompom » assorti Étiquette carrée centrée sur le flacon Flacon en verre
PACKAGING TYPE D Bouchon en aluminium mat ( non chromé ) absence de ruban Étiquette carrée centrée sur le couvercle Boîte en aluminium violette brillante
61
PACKAGING
PACKAGING PRODUITS exemples d’application
TAPENADE DU SUD À LA VIOLETTE PACKAGING TYPE A 62
FLEURS DE VIOLETTE CRISTALLISÉES PACKAGING TYPE A
BAUME MAINS À LA VIOLETTE PACKAGING TYPE B 63
PACKAGING
PACKAGING EMBALLAGES utilisation et explications
Dans le cas où le produit ne peut être placé dans un flacon ou une boîte, celui-ci sera présenté dans un emballage cartonné. Un emballage peut également être utilisé pour les produits plus prestigieux tel que le parfum. L’emballage doit être réalisé dans un papier épais à gros grain ( plus de 220g/m² - type papier à aquarelle ). Sa composition se base sur celle de l’étiquette à l’exception de l’absence de bordure violette. 64
65
PACKAGING
PACKAGING EMBALLAGES exemples d’application
66
67
PACKAGING
PACKAGING COFFRETS CADEAU utilisation et explications
Les boîtes et coffrets cadeau seront de couleur blanche recouvertes de préférence d’un papier à grain. Elles seront cerclées par un ruban de couleur violette dont la largeur sera proportionelle à la taille de la boîte. Le ruban sera fixé au cetre de la boîte par une étiquette sur laquelle figurera le logo. 68
69
PACKAGING
PACKAGING COFFRETS CADEAU exemples d’application
COFFRET CADEAU CLIENT VIOLETTES CRISTALLISÉES 10g 70
COFFRET CADEAU BEAUTÉ 71
SITE WEB
72
INTERFACE GRAPHIQUE ET STRUCTURE DU SITE p. 74 gamme couleur web navigation agencement pages ( mise en page )
SITE WEB ‘‘ DESKTOP ’’
caractéristiques présentation du site
SITE WEB ‘‘ MOBILE ’’
p. 80
p. 86
caractéristiques présentation du site
73
SITE WEB
INTERFACE GRAPHIQUE ET STRUCTURE DU SITE
gamme couleur web
Le site web reprend la même gamme colorimétrique que celle de la marque à l’exception de la couleur de fond qui sera complètement blanche et texturée d’un motif de papier à grain. 74
COULEUR PRINCIPALE - LOGO C : 83 M : 100 J : 12 N : 2 R : 86 V : 38 B : 121 PANTONE : 268C HEX : #562679
COULEUR DE FOND - PAPIER C:0 M:0 J:0 N:0 R : 255 V : 255 B : 255 PANTONE : X HEX : #ffffff
COULEUR DU TEXTE C : 0 M : 0 J : 0 N : 100 R : 29 V : 29 B : 27 (préférer 0 ; 0 ; 0) PANTONE : Neutral Black C HEX : #1d1d1b (préférer # 000000) 75
SITE WEB
INTERFACE GRAPHIQUE ET STRUCTURE DU SITE
navigation La navigation dans le site web s’oppère au sein du menu présent en haut de chaque page. Celui-ci se compose de plusieurs liens : - ACCUEIL ( page accueil du site ) - PRODUITS ( page de tous les produits ) - sous menu permettant un accès direct aux différentes catégories de produits - NOTRE HISTOIRE ( page d’information sur l’histoire de la Violette de Toulouse et l’histoire de Violette & Co. TOULOUSE ) - CONTACT ( formulaire de contact ) - MON COMPTE ( compte personnel de chaque client ) - MON PANIER ( panier regroupant les articles désirés avant l’achat ) Le retour à l’accueil est également possible en cliquant sur le logo. Des liens de retour aux catégories sont également affichés sur les fiches produit permettant une navigation simplifiée. 76
VERSION ‘‘ DESKTOP ’’ DU MENU MENU FIXE
VERSION ‘‘ MOBILE ’’ DU MENU MENU DÉROULANT
77
SITE WEB
INTERFACE GRAPHIQUE ET STRUCTURE DU SITE
agencement pages ( mise en page ) Toutes les pages du site sont agencées sur la même structure de manière à ce que l’internaute se repère facilement lors de sa navigation. La structure de chaque page se décompose en 5 blocs: - 1 : LE LOGO permetant un retour simple à l’accueil ( header ) - 2 : LE MENU permetant la navigation dans les différentes pages du site ( header ) - 3 : LE TITRE affichant le nom de la page sur laquelle on se trouve ( body ) - 4 : LE CONTENU affichant le contenu de la page désirée ( body ) - 5 : LES INFOS PRATIQUES ancrées dans le pied de page ( footer ) 78
1
2 3
4
5 79
SITE WEB
SITE WEB ‘‘ DESKTOP ’’
caractéristiques
Le site web est un élément indispensable de toute entreprise. Il permet de communiquer aux internautes des informations sur votre enseigne mais également dans le cas d’un site de e-commerce la vente de produits à l’échele nationale voir mondiale sans avoir de point de vente. Le site web regroupe ainsi tous les produits à la vente et permet aux utilisateurs de pouvoir passer des commandes de la même manière que s’ils se rendaient en boutique. 80
81
SITE WEB
SITE WEB ‘‘ DESKTOP ’’
présentation du site
82
83
PAGE PRODUITS
FICHE PRODUIT 84
PAGE D’ACCUEIL
PAGE INEXISTANTE ( ERREUR 404 ) 85
SITE WEB
SITE WEB ‘‘ MOBILE ’’
caractéristiques
Le site web mobile est une déclinaison du site pour ordinateur ( dit « desktop » ). Il permet une navigation plus fluide et une prise en main plus adaptée pour les écrans tactiles. La structure et le contenu restent les mêmes seul l’affichage est optimisé notamment au niveau du menu se présentant sous la forme d’un bandeau déroulant en haut de page. Ce site est compatible avec tous les appareils mobiles sans distinction de système d’exploitation ni de taille d’écran. 86
87
SITE WEB
SITE WEB ‘‘ MOBILE ’’
présentation du site
88
89
PAGE PRODUITS
FICHE PRODUIT 90
PAGE D’ACCUEIL
PAGE INEXISTANTE ( ERREUR 404 ) 91
92
93
94