Modèle de charte graphique au format word

www.poleetic.com
CHARTE GRAPHIQUE DIGITALE
Sommaire des éléments
#01 LOGO .................................................................................................................. 2
#02 COULEURS ........................................................................................................ 3
#03 TYPOGRAPHIE .................................................................................................. 4
#04 STRUCTURE DES TEMPLATES OU MISE EN FORME DE PAGE................... 5
#05 MENUS................................................................................................................ 6
#06 BOITES ET WIDGETS ........................................................................................ 7
#07 LES TYPES D'ICÔNES / PICTOGRAMME AUTORISÉS ................................... 8
#08 LES BOUTONS D'ACTION ................................................................................. 9
#09 TABLEAUX ....................................................................................................... 10
#10 ONGLETS ......................................................................................................... 11
#11 ACCORDÉONS ................................................................................................. 12
#12 LISTES À PUCES ............................................................................................. 13
#13 LISTE D’ARTICLES .......................................................................................... 14
#14 PAGINATION .................................................................................................... 15
#15 INFOBULLES .................................................................................................... 16
#16 FORMULAIRES ................................................................................................ 17
#17 PHOTOS ........................................................................................................... 18
#18 SLIDER ET CARROUSELS .............................................................................. 19
#19 PLAYER VIDÉO ................................................................................................ 20
#20 INFOGRAPHIE .................................................................................................. 21
#21 POPIN ET POPUP ............................................................................................ 22
#22 RÉSEAUX SOCIAUX ........................................................................................ 23
#23 RESPONSIVE DESIGN..................................................................................... 24
#24 NEWSLETTERS ET EMAILS ........................................................................... 25
#25 PUBLICITÉ EN LIGNE ...................................................................................... 26
Poleetic | La charte graphique digitale | Juin 2016
1
www.poleetic.com
#01 LOGO
 Position
 Espaces et marges
 Taille minimale / maximale
 Transparence
 Version horizontale
 Version verticale
 Noir et blanc
 Défonces
 Couleurs
 Mobile et responsive
 Applications mobiles
 Logo en icone de navigateur (favicon)
 Logo en icone d’applications mobiles
 Logo retina
Poleetic | La charte graphique digitale | Juin 2016
2
www.poleetic.com
#02 COULEURS
 Aplats
 Bannières
 Filet de tableau
 Surlignage
 Zones du site
 Liens (normal, au passage de la souris, déjà visité) suivant les zones du site
 Fonds de page, éléments ou templates
Poleetic | La charte graphique digitale | Juin 2016
3
www.poleetic.com
#03 TYPOGRAPHIE
 Header
 Menu
 Titre et sous-titres (hiérarchie H1, H2, H3 etc.)
 Texte central (Rich text)
 Marge et interligne
 Footer
 Wigdets
 Liens
 Citations
 Définitions
Poleetic | La charte graphique digitale | Juin 2016
4
www.poleetic.com
#04 STRUCTURE DES TEMPLATES OU MISE EN FORME DE PAGE
 Présenter des modèles
 Pleine largeur
 ⅓
 ⅔ (ou tout autre fragmentation)
 Pleine largeur
 Avec barre de droite ou gauche
Poleetic | La charte graphique digitale | Juin 2016
5
www.poleetic.com
#05 MENUS
 Horizontal et/ou vertical
 Normal
 Survolé
 Déplié
 Rollover
 Sticky
Poleetic | La charte graphique digitale | Juin 2016
6
www.poleetic.com
#06 BOITES ET WIDGETS
 Types et contextes
 Position
 Espacements et marges
 Spécificités couleurs
 Backgrounds autorisés
 Typographie
Poleetic | La charte graphique digitale | Juin 2016
7
www.poleetic.com
#07 LES TYPES D'ICÔNES / PICTOGRAMME AUTORISÉS
 Téléchargement,
 Format de fichier
 Etc
Favoriser une banque gratuite en ligne exemple Drycons
Poleetic | La charte graphique digitale | Juin 2016
8
www.poleetic.com
#08 LES BOUTONS D'ACTION
 Forme
 Couleur
 Typographie d’action
Poleetic | La charte graphique digitale | Juin 2016
9
www.poleetic.com
#09 TABLEAUX
 Forme
 Bordure
 Aplats de couleur
 Espacements de cellule
Poleetic | La charte graphique digitale | Juin 2016
10
www.poleetic.com
#10 ONGLETS
 Forme
 Bordure
 Aplat de couleur
 Espacements des éléments
Poleetic | La charte graphique digitale | Juin 2016
11
www.poleetic.com
#11 ACCORDÉONS
 Forme
 Bordure
 Aplat de couleur
 Espacements des éléments
Poleetic | La charte graphique digitale | Juin 2016
12
www.poleetic.com
#12 LISTES À PUCES
 Ordonnée
 Non ordonnée
 Multi-niveau
Poleetic | La charte graphique digitale | Juin 2016
13
www.poleetic.com
#13 LISTE D’ARTICLES
 Éléments (date, auteur etc.)
 Couleur
 Propriété au passage de la souris
 Tries autorisés
Poleetic | La charte graphique digitale | Juin 2016
14
www.poleetic.com
#14 PAGINATION
 Règles
 Usages
 Espacements et marges
 Typographie
 Couleurs
 Background
Poleetic | La charte graphique digitale | Juin 2016
15
www.poleetic.com
#15 INFOBULLES
 Règles
 Usages
 Espacements et marges
 Typographie
 Couleurs
 Background
Poleetic | La charte graphique digitale | Juin 2016
16
www.poleetic.com
#16 FORMULAIRES
 Règles
 Usages
 Espacements et marges
 Typographie
 Couleurs
 Background
 Messages d’erreur
 Message de confirmation
Poleetic | La charte graphique digitale | Juin 2016
17
www.poleetic.com
#17 PHOTOS
 Tailles
 Positions
 Légende et source(s)
 Couleur de cadre ou filet
 Espacements et marges
 Agrandissement
Poleetic | La charte graphique digitale | Juin 2016
18
www.poleetic.com
#18 SLIDER ET CARROUSELS
 Formats
 Navigation
 Tailles
 Éléments de texte
 Éléments cliquables
 Typo couleur
Poleetic | La charte graphique digitale | Juin 2016
19
www.poleetic.com
#19 PLAYER VIDÉO
 Format
 Durée
 Taille
 Éléments de texte
 Éléments cliquables (suivant possibilité du lecteur. Exemple VidéoJS)
 Typo
 Couleur
 Splashscreen
 Écran de fin
Poleetic | La charte graphique digitale | Juin 2016
20
www.poleetic.com
#20 INFOGRAPHIE
 Format
 Éléments de chiffrage
 Éléments d’illustration
 Éléments de texte
 Typo
 Taille
 Couleur
Poleetic | La charte graphique digitale | Juin 2016
21
www.poleetic.com
#21 POPIN ET POPUP
 Règles
 Usages
 Espacements et marges
 Typographie
 Couleurs
 Backgrounds
Poleetic | La charte graphique digitale | Juin 2016
22
www.poleetic.com
#22 RÉSEAUX SOCIAUX
 Tailles
 Positions
 Jeu d'icônes disponibles et officielles
Poleetic | La charte graphique digitale | Juin 2016
23
www.poleetic.com
#23 RESPONSIVE DESIGN
(Tablette horizontale, verticale, mobile)
 Menu (hamburger ou autre)
 Recherche interne
 Formulaire
 Éléments graphiques sacrifiés pour faciliter la lisibilité
Poleetic | La charte graphique digitale | Juin 2016
24
www.poleetic.com
#24 NEWSLETTERS ET EMAILS
 Dimensions
 Versions de lecteurs d’email défini (qui définiront si le background de couleur ou gif animé possible)
 Structures
 Variante de la charte graphique desktop dans l’email
 Modèles
Poleetic | La charte graphique digitale | Juin 2016
25
www.poleetic.com
#25 PUBLICITÉ EN LIGNE
 Formats
 Dimensions
 Animations
 Éléments d’illustration
 Éléments de texte
 Position du logo
 Position des CTA (Call To Action)
 Typo
 Tailles
 Couleurs
Poleetic | La charte graphique digitale | Juin 2016
26
www.poleetic.com
Nous sommes votre Pôle d’Expertises
Poleetic est un label regroupant des experts indépendants dans le domaine des nouvelles technologies
et du marketing Digital.
Jeune Entreprise Innovante depuis 2012, Poleetic accompagne les organisations au travers du
développement de solutions nouvelles Gouvernance Digitale.




Vous avez un besoin dans l’élaboration de votre stratégie online et de votre business plan ecommerce ?
Vous souhaitez sous-traiter la rédaction du cahier des charges d’un projet web, son pilotage et
son développement ?
Vous recherchez des conseils en référencement, une synthèse et une analyse des statistiques
de votre site ?
Ou enfin, vous attendez des recommandations pour améliorer la performance de votre activité /
notoriété online ?
Les atouts de nos experts : de solides compétences, des réalisations de qualité et un seul objectif : la
réussite de vos projets.
Notre triptyque pour votre réussite



Analyser vos besoins et vous conseiller,
Vous délester lors du mode projet,
Vous accompagner dans votre réussite.
Nos principes d’action
Agilité : Notre structure est volontairement légère afin de garantir une grande agilité.
Liberté : Nous sommes attachés aux standards technologiques ouverts (open-source) et nous fixons
comme objectif de rendre nos clients autonomes (knowlegde et documents d’exploitation).
Innovation : Jeune Entreprise Innovante depuis 2012, nous investissons beaucoup dans des projets de
recherche autour de la performance et la gouvernance des dispositifs web.
Poleetic | La charte graphique digitale | Juin 2016
27