CHARTE GRAPHIQUE OUTFISH LE LOGO ET SES APPLICATIONS
PRINCIPES DE PRÉSENTATION DES PAGES WEB
- Le logo (versions et spécificités) > 2/19 - Zone de protection > 4/19 - Utilisations > 4/19 - Utilisations interdites > 6/19
UNIVERS COLORIMÉTRIQUES
- Page référence > accueil > 9/19 - Page référence > fiche produit > 10/19 - Typographie > 11/19 - Pictos et styles graphiques > 15/19 - Principes de mise en page > 16/19 - Présentation générale > 18/19
- Couleurs du logo > 7/19 - Couleurs d’accompagnement > 7/19
DÉCLINAISONS POUR LE PRINT
UNIVERS TYPOGRAPHIQUES
- Adaptation de la charte graphique web à l’univers du print > 19/19
- Typo du logo > 8/19 - Typo d’accompagnement (print et web) > 8/19
La présentation des éléments spécifiques tels que le header, le footer, ou les différents blocs détaillés dans la page d’accueil et la page produit devra être rigoureusement identique sur toutes les pages concernées. Les éléments non détaillés ici, tels que le contenu des onglets MON COMPTE ou PANIER par exemple, devront suivre la même logique que celle développée dans les pages principales (notamment pour la taille du texte courant et des titres, ou encore pour les espacement entre les blocs, détaillés plus loin dans ce document).
LE LOGO ET SES APPLICATIONS - Le logo
> 2 versions (la version de gauche sera en général préférée à celle de droite).
OUTFISH
OUTFISH
VENTES PRIVÉES - 100 % PÊCHE
VENTES PRIVÉES - 100 % PÊCHE
2/19
LE LOGO ET SES APPLICATIONS
60 mm
> Spécificités (valeurs données pour le logo au format 100 x 60 mm) :
40,693 mm
> Polices de caractères : - OUTFISH : News Gothic MT / bold / 50,67 pts - VENTES PRIVÉES - 100% PÊCHE : News Gothic MT / bold / 13,78 pts
OUTFISH
> Interlignage : 33,4 pts > Interlettrage : 0 (sauf entre 100 et % : -150 sur Illustrator) > références couleurs : - camel : #c86b36 (r 200, v 107, b 54) C 18, M 65, J 84, N 4 - beige : #ffde9c9 (r 253, v 233, b 201) C 1, M 10, J 25, N 0
VENTES PRIVÉES - 100 % PÊCHE
> Traits horizontaux : - épaisseur de contour : 2,702 pts - longueur : 81,081 mm
3/19
LE LOGO ET SES APPLICATIONS - Zone de protection
> Une zone correspondant au tiers de la hauteur du logo devra systématiquement être laissée vide tout autour.
OUTFISH
30 mm
VENTES PRIVÉES - 100 % PÊCHE
10 mm 10 mm
- Utilisations
> Dans le cas où le logo serait utilisé sur un fond de couleur identique à sa couleur d’arriète plan, le rectangle peut disparaître. (comme sur l’en-tête du site par exemple)
4/19
LE LOGO ET SES APPLICATIONS
> Dans le cas d’une utilisation sur un document en noir et blanc (et uniquement dans ce cas), le logo pourra être utilisé dans sa version monochrome, en positif ou en négatif.
OUTFISH
OUTFISH
VENTES PRIVÉES - 100 % PÊCHE
VENTES PRIVÉES - 100 % PÊCHE
5/19
LE LOGO ET SES APPLICATIONS - Utilisations interdites
> Il est interdit d’utiliser le logo Outfish dans des situations qui pourraient le rendre moins visible, empêcher sa reconnaissance, modifier sa forme, ne pas respecter sa zone de protection, ou introduire de nouveaux éléments. Voici quelques exemples (liste non exhaustive) de mauvaises pratiques :
H
FIS T U O 100 % ES RIVÉ
E
PÊCH
OUTFISH VENTES PRIVÉES - 100 % PÊCHE
ES P
VENT
OUTFISH VENTES PRIVÉES - 100 % PÊCHE
6/19
OUTFISH
OUTFISH
VENTES PRIVÉES - 100 % PÊCHE
VENTES PRIVÉES - 100 % PÊCHE
OUTFISH VENTES PRIVÉES - 100 % PÊCHE
UNIVERS COLORIMÉTRIQUES - Couleurs du logo
> Rappel des références couleurs du logo : - camel : #c86b36 (r 200, v 107, b 54) C 18, M 65, J 84, N 4 - beige : #ffde9c9 (r 253, v 233, b 201) C 1, M 10, J 25, N 0
- Couleurs d'accompagnement
> Dans la mesure du possible, seules les 2 couleurs du logo devront être utilisées pour la création des outils de com ou promo de la société Outfish.
> En cas de nécessité d’une 3e nuance contrastante, il est également possible d’utiliser un marron foncé : #221918 (r 34, v 25, b 24) C 70, M 75, J 70, N 80 (cette couleur pourra être utilisée dans des teintes allant de 50 à 100 % selon les besoins)
7/19
UNIVERS TYPOGRAPHIQUES - Typo du logo
> Rappel de la police de caractère utilisée pour le logo : News Gothic MT / bold.
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*() - Typo d'accompagnement
> Le site web outfish.fr ainsi que tous les documents de communication ou promotion de la société Outfish doivent exclusivement être rédigés avec la police de caractères Karla regular et ses variantes (italic / bold / bold italic) :
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*() abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*() abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*() abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789 !@#$%^&*() 8/19
- Page référence > accueil
9/19
- Page rĂŠfĂŠrence > fiche produit
10/19
PRÉSENTATION DU SITE WEB - Typographie Texte général
> Titres : Karla / bold / 16 px
> Texte courant : Karla / bold / 12 px
Texte du header
> Texte courant + menu : Karla / bold / 12 px
> Exception lien de déconnection : Karla / bold / 10 px
Texte du footer
> Menu bas : Karla / bold / 12 px
> Description site + référencement : Karla / bold / 11 px
Textes des onglets latéraux
> Titres : Karla / bold / 32 px
11/19
Texte spécifique de la page d’accueil
> Boutons du slideshow : Karla / bold / 22 px
12/19
> Titres des blocs : Karla / bold / 20 px
> Blocs vente / temps restant : Karla / bold / 17,5 px
> Contenu du bloc / arguments clés : Karla / bold / 16 px
> Blocs vente / bouton d’accès : Karla / bold / 19 px
> Exception accroche facebook : Karla / bold / 18,87 px
> Blocs vente / période de la vente : Karla / bold / 20 px
13/19
PRÉSENTATION DU SITE WEB - Texte spécifique de la page produit
> Nom produit + PVC : Karla / bold / 16 px (ancien prix barré)
> Titres rubriques : Karla / bold / 16 px
> Prix de vente : Karla / bold / 24 px
> Sous-rubriques : Karla / regular / 14 px
> Économie réalisée : Karla / regular/ 14 px
> Titres menu déroulant : Karla / bold / 16 px
> Instruction menu déroulant : Karla / regular/ 14 px
> Choix possibles (texte) : Karla / regular/ 14 px
> Choix possibles (chiffres) : Karla / bold / 16 px
> Bouton d’ajout au panier : Karla / bold / 16 px
> Réfs photo principale slideshow : Karla / bold / 16 px
14/19
PRÉSENTATION DU SITE WEB - Pictos et styles graphiques
> Couleurs des pictos
Certains pictos du site sont fournis en 2 versions couleur (beige et marron). Il s’agit des pictos apparaissant sur des photos (slideshow de la page d’accueil ou image produit). L’utilisation d’une version ou de l’autre se fera en fonction des tonalités de l’image de fond, afin que le picto soit le plus visible possible.
Pictos du slideshow d’accueil (opacité du fichier d’origine = 80 %) :
Pictos des photos produits (page produit) :
15/19
> Ombrage des blocs : réglage du calque d’effet dans Photoshop
PRÉSENTATION DU SITE WEB - Principes de mise en page
header
> Grille verticale à respecter : voir dimensions ci-contre.
Les blocs internes doivent obligatoirement occuper : - la largeur complète, soit 1000 px de large, - la colonne de gauche, soit 240 px de large, - ou la colonne de droite, soit 710 px de large.
A
Seule exception à cette règle : le bloc d’achat avec choix des options et de la quantité, dont la largeur sera adaptée au contenu (nombre de menus déroulants). Un espace fixe de 68 px sera respecté entre chaque menu (voir schéma ci-dessous). largeur variable
50 px
B1
largeur variable
C
39 px 68 px
188 px
B2
> Alignement des blocs
50 px
2 blocs B et C (cf schéma) situés en dessous d’un bloc A occupant toute la largeur devront obligatoirement être alignés par le haut.
D
L’espace vertical entre 2 blocs dépendra de leurs liens : - 2 blocs de nature différente seront distants de 50 px, - tandis que 2 blocs d’un même groupe (infos produits et bloc d’achat par exemple) seront seulement espacés de 39 px.
footer 240 px
50 px
710 px
1000 px
16/19
PRÉSENTATION DU SITE WEB
> Tailles de blocs spécifiques
Dimensions du slideshow de la page d’accueil : 1000 x 450 px
> Marges à respecter
240 px
Le contenu des blocs de la colonne de gauche devra être centré (images, logos, pictos) ou aligné à gauche (texte). Des marges de 28 px de large (depuis le bord du bloc) seront à respecter à droite et à gauche. 28 px
Les blocs de cette colonne comportant un titre disposeront d’un en-tête identique à ceux présentés ci-contre. Le bandeau d’entête aura une hauteur fixe de 48 px.
184 px
Dimensions du bloc photo produit : 710 x 272 px Dimensions des miniatures en dessous : 135 x 52 px
48 px
17/19
28 px
PRÉSENTATION DU SITE WEB - Présentation générale Le header devra systématiquement être bloqué en haut de la fenêtre du navigateur, de même que le footer sera bloqué en bas de page (nécessitant un scroll lorsque le contenu dépasse la hauteur de la fenêtre). Le site devra toujours être centré dans la largeur de la fenêtre. Les onglets latéraux, eux, seront collés aux extérieurs gauche et droite de la fenêtre.
18/19
DÉCLINAISONS POUR LE PRINT - Adaptation de la charte graphique web à l’univers du print Par soucis de cohérence et de reconnaissance de la marque Outfish, les visuels développés pour l’impression resteront dans la mesure du possible dans le même esprit graphique que le site web.
> Les couleurs utilisées seront rigoureusement identiques (voir page 7) et répondront aux mêmes critères : utilisation privilégiée des 2 couleurs de base uniquement (beige et marron), mais possibilité d’avoir recours à la 3e couleur définie pour créer du contraste par exemple - comme sur la plaquette présentée ici.
> Contrairement au site, pour lequel seront préférée la sobriété et la clarté induites par un fond uni, de légers effets de matière sur le fond pourront être utilisés sur les supports imprimés. (exemple ci-contre, créé à l’aide de patterns).
> Comme sur le visuel ci-contre, les 2 traits horizontaux du logo, rappelant le style du tampon encreur, pourront être réutilisés dans la composition des pages, afin de souligner certains arguments clés par exemple.
> Relativement peu employée sur le site (pour éviter de "l’alourdir"), l’utilisation de pavés contenant du texte et contrastant avec la couleur de fond (avec ou sans contour, avec ombrage ou pas) sera plus récurrente dans le développement graphique de la marque sur papier (sans toutefois constituer une obligation).
> Comme sur le site, la police de caractères Karla regular et ses déclinaisons (présentées page 8) seront utilisées de préférence pour la création des supports imprimés.
19/19