Un blog qui parle de webdesign, graphisme, méthodologie ...

icone rss  icone twitter  bouton de retour vers le portfolio pixenjoy

ARTICLES TROUVES

Article(s) de juin 2008 :

17.06.08
Catégories : Méthodologie
Aucun commentaire

La charte graphique

Après avoir vu le cahier des charges, un autre document requiert toute notre attention lors de la création d’un site internet : il s’agit de la charte graphique. Qui, quoi, comment ? Une fois de plus je vais tenter de répondre à ces différentes questions.

Qu’est ce qu’une charte graphique ?

Une charte graphique est un document qui décrit les caractéristiques visuelles d’un support de communication. Vous devez y trouver l’ensemble des règles d’utilisation des différents signes graphiques qui constituent l’identité graphique d’une entité (organisation, entreprise, administration, club sportif, association …)

Je ne parlerai dans cet article que du cas de la charte graphique web.

A quoi sert-elle ?

La charte graphique sert de référentiel.

Elle permet aux différents acteurs susceptibles de travailler et/ou de modifier l’aspect graphique d’un support, de garder une cohérence visuelle sur l’ensemble de ce support. Cela garantie une identité graphique claire, homogène et sans ambigüité.

Cette cohérence graphique facilite :
- la reconnaissance de l’entité par le récepteur
- l’expérience de navigation de l’utilisateur au sein des pages d’un même support

Qui doit la rédiger ?

Le rédacteur de la charte graphique est généralement un créatif. Il est logique que la personne qui ait conçue le design d’un site web, rédige également la charte graphique. En effet, c’est à priori la personne la plus au courant des choix graphiques effectués dans la mise en place du design.

Notons, que dans le cadre d’un site internet, il est possible à partir des feuilles de style CSS, de retrouver une grande partie des informations nécessaires à l’élaboration de la charte graphique.

Comment la rédiger ?

Voici une proposition de plan pour rédiger une charte graphique :

I. Univers graphique

1. Objectif(s) et contexte

Quel est brièvement l’objectif du site ?
Dans quel contexte se fait cette création ?
Si il s’agit d’une refonte, quels sont les points à améliorer ?

2. Tonalité graphique

Quel doit être l’ambiance du site ?
Quelles caractéristiques graphiques doivent se dégager ?

3. Message(s) à véhiculer

Quel message le design devra-il transmettre ?

4. Valeur(s) à transmettre

Quelles valeurs de l’entreprise le design devra-il transmettre ?

II. Organisation structurelle des écrans

Comment les grands blocs de contenu s’organisent-ils dans la mise en page ?

Cette partie peut être reprise des documents de zoning établit par les responsables d’architecture de l’information, les ergonomes et les directeurs artistiques. Les documents de zoning indiquent également les niveaux de hiérarchie des différents éléments dans la page.

III. Organisation métrique des écrans

1. Description des côtes

Il s’agit de la taille en pixel des principaux blocs d’éléments de la page.

2. Description des marges

Il s’agit de la taille en pixel des marges qui séparent les principaux blocs d’éléments de la page.

A partir des gabarits des principaux écrans du site, placer des repères visuelles et des commentaires indiquant des informations sur la taille des éléments et les marges qui les séparent. Cette description doit permettre aux intégrateurs de construire les pages en respectant les proportions, les positionnements, les blancs tournant qui caractérisent la mise en page dessinée par le graphiste. Attention, ne négligez pas les petits éléments comme les boutons, les puces, les icônes … qui doivent également être placés de manière rigoureuse et homogène sur toutes les pages.

IV. Palette chromatique

Elle décrit l’ensemble des caractéristiques chromatiques utilisés dans le site.

Indiquer également si certaines couleurs sont à proscrire ou au contraire déjà utilisées dans d’autres supports de communication et donc à réutiliser.

Ne pas oublier les différentes couleurs des liens selon leur état (visité ou non, actif, rollover …).

V. Typographie

Il s’agit de la description de tous les paramètres liés au texte et blocs de texte : police, taille, graisse, soulignement ou pas, interlignage, interlettrage …

VI. Éléments graphiques

Il s’agit du logo, des icônes, des pictogrammes, des puces, des illustrations et des photographies.

Indiquer leurs tailles, leurs couleurs, leurs zones d’exclusion (logo), leurs marges, la présence d’un cadre ou non.

Pour les pictogrammes et icônes, indiquer leur signification et leur fonction.

Sources :

Charte graphique, Wikipédia.
Elaborer un document de charte graphique pour le web, livre blanc rédigé par Benoit Drouillat.

10.06.08
Catégories : Méthodologie
Aucun commentaire

Le cahier des charges

Le cahier des charges est un document incontournable dans un projet de création de site internet. Mais à quoi sert-il ? Qui doit le rédiger ? Comment le rédiger ? Voici quelques réponses qui devraient vous aidez dans la rédaction de ce type de document.

Qu’est ce qu’un cahier des charges ?

Un cahier des charges est un document écrit, structuré, qui décrit de façon exhaustive les spécifications d’un projet correspondant à un besoin. Un cahier des charges, outre les spécifications, peut aborder les modalités d’exécution du projet ainsi que les objectifs à atteindre.

Dans cet article, je m’attacherai à parler uniquement d’un besoin de création de site internet.

A quoi sert-il ?

A formaliser et communiquer ses besoins

Un document écrit force le rédacteur à exprimer l’ensemble de ses idées et à les structurer (l’écrit structure la pensée). Ce document constitue une trace réelle de vos besoins et une preuve tangible de leur existence.

Avoir une idée des ses besoins et espérer les transmettre par oral lors d’une réunion avec un prestataire est une démarche périlleuse qui manque de professionnalisme. En effet, vous risquez d’omettre des choses importantes, votre auditoire risque d’oublier ou d’interpréter certains aspects de vos explications, la transmission de vos besoins risque d’être décousue.

Il est beaucoup plus difficile de contester une information qui a été formalisée par écrit qu’une information transmise par oral.

Un cahier des charges écrit est donc l’outil de communication le plus fiable et le plus clair pour exprimer et transmettre vos besoins.

A contractualiser un devoir d’obligation d’information générale

Le cahier des charges n’est pas un document juridique cependant il constitue un document contractuel entre un client et un prestataire recensant les attentes et les besoins concrets du client. Il répond ainsi au devoir d’obligation juridique d’information général définit par le code de la consommation ( Livre Ier, titre Ier, chapitre Ier).

En contre partie, le prestataire, si il dispose d’un cahier des charges, pourra remplir ses devoirs de renseignements, de mise en garde et de conseils auprès du client.

A sélectionner un prestataire

Le cahier des charges permet de transmettre rapidement ses besoins aux prestataires afin que ceux ci puissent les étudier et proposer des solutions. De ces différentes réponses, découlera le choix du partenaire à qui sera confié le projet.

A servir de référentiel tout au long du projet

Le cahier des charges est un outil de communication et un référentiel pour le chef de projet tout au long du processus de création d’un site web. Il lui permet de vérifier que le prestataire suit bien les recommandations et ne s’écarte pas du cap. Pour le prestataire, ce document est un guide précieux pour s’assurer qu’il remplit les objectifs définit par le client.

Qui doit le rédiger ?

Le cahier des charges doit être fournit par l’émetteur du besoin c’est à dire le client.

Qui d’autre que le client peu le mieux expliquer la nature de ses besoins et connaitre le contexte de l’entreprise ? Il est fréquent de constater que c’est le prestataire qui rédige le cahier des charges à partir des informations transmises par oral par le client. Je le répète, c’est une mauvaise chose. Si le client est mal à l’aise pour rédiger son cahier des charges, il est préférable qu’il externalise ce travail auprès d’un consultant spécialisé.

Dans les entreprises d’une certaine taille, c’est généralement le chef de projet qui rédige le cahier des charges en collaboration avec les différents services concernés par le projet (service marketing, communication, informatique …).

Comment le rédiger ?

Le cahier des charges n’a pas besoin d’être une encyclopédie. Selon le projet, un document d’une vingtaines de pages peu suffire. Il n’a pas besoin d’être verbeux ou très technique. Un vocabulaire simple est préférable. Le principal est que le besoin soit clairement définie pour permettre aux prestataires une bonne compréhension.

Voici un exemple de plan décrivant les éléments à aborder dans un cahier des charges de création de site internet :

I. Présentation

1. Présenter l’entreprise

* Son historique
* Sa taille (CA et nombre de salariés)
* Ses activités principales
* Ses produits et/ou services
* Son organigramme

2. Présenter l’existant

* Support de communication
* Existant fonctionnel
* Existant technique

II. Description des besoins

1. Les objectifs du site

* Site de vente en ligne
* Site de lancement d’un produit, d’un service
* Site vitrine
* Site éditorial
* Site d’information
* Site de fidélisation …

2. La cible du site

* Nature (entreprise, particulier, collaborateur …)
* Genre
* Tranche d’age
* Appartenance sociale
* Attentes
* Style de vie …

3. Les contenus

* Quel type de contenus allez-vous fournir (texte, sons, vidéos, illustrations, photographies, logo …)
* Sous quel format (.doc, .pdf, .mp3, .jpg …)
* Nombre de pages, photos, fichiers …

4. L’architecture du site

* Nombre de rubriques et leur libellés
* Schéma d’arborescence de la navigation

Faite un inventaire exhaustif de toutes les informations et contenus qui seront diffusés sur votre site. Faites des regroupements par thème puis hiérarchisez l’information en rubriques, sous-rubriques.

5. Les besoins fonctionnels

Besoins fonctionnels en « front office »
– Moteur de recherche
– Galerie d’images
– Formulaire d’inscription à une newsletter
– Présentation de news …
Besoins fonctionnels en « back office »
– Ajouter, effacer, modifier une news
– Ajouter, effacer, classer des images
– Gestion de la newsletter
– Gérer les profils utilisateurs …

6. Les besoins techniques

* Architecture technique
* Configuration logicielle
* Configuration matérielle
* Hébergement
* Nom de domaine
* Reprise de l’existant
* Sécurité …

7. Les besoins en référencement

* Référencement naturel
* Référencement actif
* Mots clés de positionnement
* Annuaires ciblés …

8. Les besoins de suivis

* Statistiques de fréquentation
* Suivis du référencement
* Maintenance et mise à jour des applications
* Formations
* Assistance technique …

9. Les besoins en cessions de droits d’exploitations (patrimoniaux)

Décrivez les droits que vous souhaiter acquérir sur les créations d’auteur (graphisme, vidéo, son …)

* Que souhaitez-vous comme durée de cession ?
* Sur quel(s) support(s) souhaitez-vous diffuser les visuels (nombre et nature) ?
* Etendue géographique de la diffusion ?
* Souhaitez-vous acquérir le droit de modifier les sources ?
* Souhaitez-vous rétrocéder les droits d’exploitation ou de diffusion à de multiples clients ? Combien ?
* Souhaitez-vous négocier que le nom de l’auteur ne soit pas cité en légende des visuels ?
* Souhaitez-vous négocier avec l’auteur pour qu’il ne revendique pas la paternité des visuels en public ? (préciser les supports concernés) ?

III. Prestations attendues

Quels sont les livrables que vous souhaitez obtenir du prestataire pendant et à l’issu du projet ?

* Un planning de réalisation
* Une arborescence détaillée du site
* Une expertise et des recommandations ergonomiques
* Zoning, wireframes, maquettes
* Une documentation technique …

Conclusion

Comme nous venons de le voir, le cahier des charges est un document important qu’il ne faux pas négliger. Il vous permettra d’y voir plus clair dans vos idées, de mieux communiquer vos besoins et de faciliter le choix d’un prestataire.

Lorsque le choix de votre prestataire sera effectué, la partie graphique sera abordée au cours d’un brief créatif avec le directeur artistique de l’agence web.

Sources :

Cahier des charges – Wikipédia
Message de Laurent Desmontiers sur le forum 1DCafé (questions concernant la cession des droits d’auteur)