ChartegraphiqueWEB
Dernière mise à jour : 04.02.08
Charte graphique du site internet
Ce document a pour objectif de décrire et commenter l’ensemble des règles à suivre pour construire un site Tigex® conforme à la charte graphique. Un cd est également joint à ce document avec l’ensemble des éléments nécessaires à la mise au point du site.
Outils&Méthodes
Informations techniques pour l’élaboration du site Le site Tigex a été développé et conçu par la société Visual-Link basée à Tournon-Sur-Rhône en France. Les maquettes et images sont réalisées avec les logiciels de la suite Adobe® : photoshop pour les bitmaps, illustrator pour les vectorielles. Pour le développement et l’intégration du site, Dreamweaver a été utilisé avec d’autres logiciels comme Notepad++® : la mise en page est conçue en XHTML Transitionnel 1.0 et css 2.0. Le site a été officielement validé par le W3C .
Généralités
couleurs&typographie
Logotype
Couleurs, périmètre de protection et taille minimale 1. Couleur : en print c’est le rouge rubin red qui est utilisé, pour le web les valeurs suivantes sont utilisées : • R : 226 • V:0 • B : 119 • Hexa : #e20077
2. Périmètre de protection Taille standart : 180 x 169 pixels C’est une zone d’inviolabilité du logotype, dans laquelle aucun autre élément ne doit figurer. Cet espace est proportionnel à la taille du logotype.
3. Taille minimale 93 x 87 pixels. En deça de 93 pixels (périmètre de protection inclus) ou 71 pixels (bord à bord), le logotype n’est plus lisible. Il est donc
essentiel de ne pas réduire sa taille au-delà de cette limite. 180px
Typographie
Types de caractères, tailles et interlignage typographique 1. Titrages :
2. Textes :
•
•
MetroflexUniHeavy
A B C DEFGH IJK L M N O P Q RST UVWXYZ a b c d efghijklmn o p q r stuvw 1 2 3 4567 890 Taille de base : 16 px • Format des titres h2 Taille : 38px Couleur : #E20177
• Format des sous-titres h2 Taille : 21px Couleur : #A9BC35
•
ITC Ka bel medium
A B CDEFGHIJKLMN O P QRSTUVWXYZ a b c defghijklmn o p qr s tuvw 1 2 3 4567890
Arial ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvw 1234567890 • Format de base : Taille : 12px Couleur : #726D6F Lineheight : normal Letter-spacing : normal Word-spacing : normal
• Format des titres h3 Taille : 25px font-weight:bold Couleur : #E20177 Lineheight : normal Letter-spacing : normal Word-spacing : normal
T Y P O G RA P H I E La typographie contribue à personnaliser le style graphique de TIGEX® et à le rendre unique. Tr o i s f a m i l l e s d e c a r a c t è r e s t y p o g r a p h i q u e s o n t é t é c h o isies pour le site web : • MetroflexUniHeavy : t y p o g r a p h i e i n s t i t u t i o nnelle ; son utilisation sera privilégiée. • I TC K a b e l m e d i u m : l a police est utilisée en accompagnement du logotype sur tous les s u p p o r t s d e c o m m u n ication de la société. • ARIAL : typographie H TM L . C ’ e s t l a t y p o g r aphie pour le texte en ASCII, disponible pour l’essentiel des systèmes d’exploitations. FEUILLE DE STYLES Typographies de substitution à implémenter dans la CSS : font-family:Arial, Helvetica, sans-serif.
Les couleurs
principales et secondaires 1. Couleurs principales : LES COULEURS D E S T Y P O G RA P H I E S Pour le codage html du texte en arial •
LES TITRES : #E20177
•
L E T E X T E C O U RA N T : # 726D6F
•
LES LIENS > lien classique : #e20177 > l i e n d e m e n u c o rp o r a t e s k i n t i g e x : #86ab30 > l i e n d e m e n u c o rp o r a t e s k i n e x c e ll e n c e : # c 8 6 6 d 4
Rose Tigex équivalent rubin Red #E20077
2. Couleurs secondaires
Rose secondaire utilisé en rollover sur le menu des gammes #F0409D
Vert Tigex #D0E165
Vert secondaire utilisé en bordure de certains cadres #899C1F
Violet excellence #C866D4
Violet excellence secondaire #DEA3E5
STRUCTURE
Des diffĂŠrentes pages du site
Plan du site
Ergonomie et foncionnalitĂŠs
10
La structure des sites de la marque Tigex est simple et et fonctionnelle. Le site Tigex.com regroupe l’ensemble des sites internationnaux ; à l’heure actuelle les sites français, anglais, belge, espagnol, portugais, néerlandais, italien sont en place. Une fois arrivé sur la page d’accueil de l’un des sites, le client dispose d’une palette de liens : pour une naviguation intuitive, ces liens sont regroupés en univers. De l’accueil, le visiteur peut s’orienter directement sur une gamme produit, les informations institutionnelles de la société, les nouvelles récentes, le produit du mois, la FAQ et un jeu... Les produits sont hierarchisés de la façon suivante : gamme produit / sous-gamme produit / produits. La naviguation permet de passer d’un produit à un autre de la même sous-famille grace à un système de vignettes intuitif.
11
Structure de la homePage
3 colonnes et 2 couleurs en sont les éléments majeurs Zone évènement du mois
Menu principal listant les gammes produits
Zone innovations Sélecteurs de recherche Zone produit du mois avec vignette produit
Accès à la présentation de l’entreprise
Bouton d’accès à la zone FAQ Zone corporate Menu d’accessibilité Logo groupe
Logo Visual-Link
201px
479px 984px : zone centrée sur la fenêtre
12
217px
Homepage
La page d’accueil Tigex peut être subdivisée en plusieurs espaces majeurs : •
Espace produit
Les événements
L’édito Présentation rapide de la société avec un lien vers la page de présentation
Edito
générale.
•
Zone jeux
L’espace produits Tout ce qui est directement lié aux produits de la marque est situé dans cette zone : notamment le menu principal constitué par les gammes produits. On y retrouve également un sélecteur qui permet d’effectuer une recherche en choisissant la gamme puis le produit à afficher.
•
Les services
Les événementients
rement : produit du mois, dossier du mois et innovations Tigex.
•
Les services Espace privilégié d’interaction avec le visiteur, cette zone renvoie vers les FAQ ou tout autre service proposé par le site.
•
La zone jeux Ici on peut éventuellement placer des boutons renvoyant vers les jeux Tigex : ce sont des opérations promotionnelles, soit sous forme de grattage, soit tirage au sort.
On y trouve tous les éléments modifiés réguliè-
13
La page gamme reprend essentiellement la structure de la page d’accueil : • la tétière est moins haute (326px au lieu de 358px), • les colonnes ont des dimensions légèrement différentes (cf. schéma ci-contre). • dans la colonne centrale, un texte décrit la gamme choisie, • dans la colonne droite, on trouve des miniatures représentant les sous-gammes produits. Chacune de ces vignettes renvoyant vers la sous-gamme correspondante. NB : la zone événements a changé : le visuel produit du mois a été remplacé par un encart sur les innovations Tigex.
Exemple de bouton de jeu et la page correspondante.
14
Structure d’une page gamme Reflet de la page d’accueil
Zone évènement du mois
Menu principal listant les gammes produits
Zone innovations Titre h2 de la gamme Lien vers les innovations Tigex
Sous-gamme produit
Vignettes représentatives des sous-gammes produits
Sélecteurs de recherche
Description de la gamme avec titre h3 Barre d’outils Zone corporate Menu d’accessibilité Logo groupe
Logo Visual-Link
217px
435px
270px
984px : zone centrée sur la fenêtre
15
Structure de la Page Produit
Conforme à la mise en page générale du site Zone évènement du mois Menu principal listant les gammes produits
Zone innovations Lien vers les innovations Tigex
Titre h2 de la gamme Sous-gammes produit
Titre du produit h3
Sélecteurs de recherche
Vignettes représentatives des produits de la gamme Image du produit max. 410px de large Logos des spécificités produits Description du produit
Barre d’outils
217px
435px 984px : zone centrée sur la fenêtre
16
270px
La page produit est très similaire à la page gamme. Seules les colonnes centrales et droite sont différentes : la colonne du centre contient le titre du produit (h3), une photo, la description, les logos des fonctionnalités et une description. la colonne droite contient les vignettes des produits de la sous-gamme. Par exemple pour un biberon donné, on aura tous les biberons dans la colonne de droite. Les logos des spécificités du produits sont au nombre de 13, chaque produit peut avoir de 0 à 13 de ces fonctionnalités.
Les produits de la gamme excellence Pour les produits excellence, les couleurs de la page sont modifiées afin d’identifier d’un coup d’oeil l’appartenance à la famille. Pour les produit appartenant à la famille Excellence, le violet Excellence est utilisé à la place du vert Tigex au niveau de la tétière. Le violet secondaire est utilisé pour la couleur du menu corporate dans le pied de page. Un logo spécifique est également utilisé : le logo excellence est placé en haut à droite de la photo du produit.
Quelques logos de spécificités
17
Structure de la Newsletter Informer la clientèle Tigex® En-tête de la newsletter Zone édito
Encarts
Encarts
Pied de la news
600px : zone centrée
18
La newsletter Tigex a pour objectif d’informer les clients : dernières nouveautés produits, jeux promotionnels et autres nouvelles qui concernent la marque. Constituée d’un en-tête et d’un pied de page standarts, le contenu et la mise en page de cette lettre varie beaucoup en fonction des besoins : les informations sont divisées en encarts aux fonds variés et hétérogènes. Bien entendu, l’aspect final doit respecter la charte en terme de couleurs et mise en page. La maquette de la newsletter est réalisée dans
Zoom sur des encarts de Newsletter
photoshop. Une fois cette dernière validée, la decoupe peut être réalisée : libre en choix à l’intégrateur de découper en images ou de
mettre en place des zones de texte en fontion du contexte et des contraintes techniques.
19
Contenu du cd des ressources La boĂŽte Ă outils WEB Tigex
Ici figurera la liste des contenus disponibles dans le DVD.