9 Creation Charte Graphique

Td n°9 - Conception d'une charte graphique
Table des matières
1- Le travail préparatoire............................................................................................................................................ 1
1.1- Les bonnes questions..................................................................................................................................... 1
1.2- Le cahier des charges ou brief.................................................................................................................... 1
2- La charte graphique................................................................................................................................................ 2
3- Choisir un thème pour Wordpress...................................................................................................................... 3
3.1- Les éléments à prendre en compte pour choisir un thème................................................................3
3.2- Les éléments à prendre en compte pour choisir des extensions.....................................................3
3.3- Des exemples.................................................................................................................................................... 4
Les sources :
• https://www.lafabriquedunet.fr/conseils/conception-site-web/charte-graphique/
• http://ergonomie-web.studiovitamine.com/charte-graphique,363,fr.html
https://blogs.lyceecfadumene.fr/informatique
Td n°9 - Conception d'une charte graphique
Définir une charte graphique est essentiel donne de la cohérence, de la crédibilité. Elle
dans l'élaboration d'un site Internet. La charte donne à l'utilisateur des repères au sein du
graphique construit l'ambiance du site, lui site et facilite ainsi sa visite.
1- Le travail préparatoire
1.1-Les bonnes questions
Il est important d’adopter une bonne certaines facettes du projet.

démarche initiale en posant les bonnes La préparation d’un projet de création de site
questions. Avant le début du développement web prend des formes différentes selon le
du site web, il y a toute une phase de contexte de chaque entreprise :
préparation, de la définition du besoin au • type de site envisagé,
choix de la solution technique qui est capitale. • compétences internes,
Durant cette phase de préparation, les • ressources budgétaires,
questions sont nombreuses, et elles • etc.
dépassent souvent le cadre du site web. Sans Il faut définir précisément le besoin pour être
une démarche de travail efficace, la en mesure de faire les meilleurs choix pour la
préparation de la création du site internet création du site.
peut durer trop longtemps ou négliger
1.2-Le cahier des charges ou brief
Vous devez demander au client de vous charges pas clair, voire inexistant, que des
fournir un cahier des charges ou brief. Ce entreprises se retrouvent déçues de l’identité
document explique l’activité de l'entreprise, graphique proposée.
les objectifs du site web et l’identité que le Rédiger un brief clair et complet n’est pas une
client souhaite pour son site. perte de temps. Si le prestataire n’a pas
À partir de ce brief vous concevrez une compris l’esprit que le client souhaite donner à
identité graphique dont les différents son site web, les premières propositions ne
éléments seront déclinés au sein des seront pas adaptées, et les deux parties
maquettes de pages. perdent du temps.
C’est souvent en raison d’un cahier des
Page 1/4 - https://blogs.lyceecfadumene.fr/informatique

Des exemples de modèles de cahier des charges :
• Le cahier des charges pour la réalisation d’un site web
• Le cahier des charges pour la réalisation d’une bannière web
2- La charte graphique
Voici les éléments de la charte graphique d’un set complet afin d’avoir une
qu'il peut être utile de pouvoir modifier : cohérence graphique entre toutes les
• Les couleurs : références RVB / icônes.
Hexadécimal des différentes couleurs • Les boutons : deux ou trois
utilisés. Généralement, il est conseillé déclinaisons du bouton sont
de ne pas dépasser deux couleurs généralement utiles : un bouton texte
principales. simple, un bouton texte + icône, voire
• La typographie : liste de toutes les un bouton spécifique pour le call-to-
polices utilisées, voire de la taille et des action de la page d’accueil.
couleurs pour chaque niveau de titre. • Les dimensions des pages et le zoning
De la même manière que pour les des différents contenus.
couleurs, il est généralement conseillé • Les principes de navigation : la
de ne pas dépasser 2 polices, une pour description des différentes zones pour
le corps du texte et une autre pour les chaque type de page, ainsi que la
titres. disposition des différents éléments. La
• Le logo : toutes les variantes du prise en compte de la règle des 3 clics,
logotype, sur fond blanc/noir, sur fond la présence d'un plan de site, des
transparent, en noir et blanc, avec les mentions légales.
références couleurs et différentes • Les différents médias utilisés : Les
tailles. types d'images, formats, dimensions,
• Les icônes : il est généralement les types de vidéos, audio, etc.
conseillé d’utiliser des icônes provenant

3- Choisir un thème pour Wordpress
Quand vous utilisez wordpress, tout l’enjeu est de personnaliser le thème que vous avez choisi
pour refléter l’identité du client.
Wordpress est particulièrement souple et les éléments clés de l'identité visuelle

permet de pouvoir modifier de nombreux avant de choisir un thème, cela vous
d’éléments graphiques du thème initial grâce aidera à choisir un thème proche de ce
aux nombreuses extensions et aux nombreux dont vous avez besoin.
widgets. • Testez toutes les possibilités de
Quelques conseils pour ce travail : personnalisation de chaque thème
• Prenez le temps de définir clairement avant de choisir.
3.1-Les éléments à prendre en compte pour choisir un thème
Pour choisir un thème, faîte une recherche sur à la taille de l'écran utilisé (smartphone,
le web pour voir si il est beaucoup utilisé et si tablette, PC),
il est mis à jour régulièrement. • la bannière est personnalisable,
Voici une liste des éléments à prendre en • le pied de page est personnalisable,
compte : • les couleurs peuvent être changées,
• le thème de base est personnalisable, • le thème est-il sur le modèle « page
• le nombre de colonnes correspond à unique » - infinite scrolling ou pas,
votre besoin, • le feuille de style CSS est
• le thème est « responsive » : il s'adapte personnalisable.
3.2-Les éléments à prendre en compte pour choisir des extensions
Vous aurez besoin de différents Voici mon choix d'extensions gratuites :

éléments pour gérer les éléments du site. Ils • diaporamas : Meta Slider
sont disponibles sous la forme de plugins. • galeries d'images : NextGEN Gallery
Pour choisir une extension, faîte une • référencement naturel : All in One SEO
recherche sur le web pour voir si elle est Pack
beaucoup utilisée et si elle est mise à jour • spams : Akismet
régulièrement. Certaines sont payantes. • galeries d'images, carrousel d'images,

publication et partage sur les réseaux • images : Advanced Image Styles
sociaux, visibilité des widgets, articles • newsletter : MailPoet Newsletters
similaires, pages et articles phares, • plan de site : WP Sitemap Page
widgets supplémentaires, statistiques, • gestion de la base de données : WP-
référencement naturel, menus, Optimize
formulaire de contact : Jetpack par • icône de site : intégrer à wordpress
WordPress.com • vidéos : intégrer à wordpress
• éditeur interne : TinyMCE Advanced • sons : intégrer à wordpress
3.3-Des exemples
• http://www.fmsh.fr/sites/default/files/FMSH-ancienne-charte-graphique.pdf
• http://download.pro.arte.tv/archives/presse/3540973.pdf

9 Creation Charte Graphique

Transféré par

Droits d'auteur :

Formats disponibles

9 Creation Charte Graphique

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

9 Creation Charte Graphique

Transféré par

Droits d'auteur :

Formats disponibles

Td n°9 - Conception d'une charte graphique

Table des matières

1.1-Les bonnes questions

Il est important d’adopter une bonne certaines facettes du projet.

1.2-Le cahier des charges ou brief

Page 1/4 - https://blogs.lyceecfadumene.fr/informatique

Page 2/4 - https://blogs.lyceecfadumene.fr/informatique

Wordpress est particulièrement souple et les éléments clés de l'identité visuelle

3.1-Les éléments à prendre en compte pour choisir un thème

3.2-Les éléments à prendre en compte pour choisir des extensions

Vous aurez besoin de différents Voici mon choix d'extensions gratuites :

Page 3/4 - https://blogs.lyceecfadumene.fr/informatique

Page 4/4 - https://blogs.lyceecfadumene.fr/informatique

Vous aimerez peut-être aussi