Charte Graphique – Design


Etape 2 : Charte graphique – Design

Vous devez centrer votre design en fonction du plan de votre site créé dans l’étape 1 . Dans la rubrique Design de votre plan, vous devrez donc bien définir les couleurs que vous allez utiliser, comment remplir vos pages, comment mettre en valeur le contenu ? quelles images ajouter ? et comment l’internaute va t il naviguer ?

    Les éléments importants sont donc :

Les couleurs

– Définissez une couleur de fond, de texte , de liens. Pour le moment ne vous inquiétez pas de la technique, choisissez vos couleurs en tenant compte des principes de bases :
– Assurez vous que la couleur de votre texte ne se fonde pas ou ne colle pas avec votre couleur de fond.
– La clef est de bien gérer les contrastes: ceci pour que le visiteur se repère dans la navigation, par exemple le gris clair ne contraste pas assez avec notre fond bleu.
– La couleur de fond doit être neutre et claire.
– Ne prenez pas d’image multicolore en image de fond
– N’utilisez pas de bleu ou rouge sur un fond noir
– N’utilisez pas de jaune sur un fond blanc
– Un fond noir peut créer des soucis d’impression
– Votre fond DOIT être le même sur chaque page
– Il est également possible de créer une couleur de lien en fonction de la valeur des pages dans votre plan , le lien vers les pages principales de votre plan pourra être d’une certaine couleur et celui vers les autres pages d’une autre.

Quoique vous définissiez pour vos couleurs, complétez votre plan de départ avec ces nouveaux éléments graphiques.

La consistance

La mise en page générale doit donner un aspect de page remplie , vous devez donc garder une attention toute particulière à ce détail.
– utilisez les mêmes polices et tailles d’écriture tout au long de vos pages.
– ne mélangez pas trop les polices.
– votre couleur de fond devra être la même sur l’ensemble des pages
– votre logo doit apparaître au même emplacement sur chacune de vos pages et être de la même taille
– vos photos ne doivent pas être trop grandes
– une fois que vous maîtrisez le html, créez vous une page type que vous réutiliserez comme modèle de base.

Les Photos, dessins, illustrations

– modifiez la taille des photos pour qu’elles se chargent rapidement dans le navigateur de votre visiteur
– toutes les illustrations doivent avoir un lien direct avec le texte
– pas trop de gifs animés , il détourne le visiteur du texte et du contenu
– les formats gifs et png , sont conseillés pour les boutons, icônes, dessins, le format jpeg pour les photographies
– ajoutez des tags html « alt » à chacune de vos photos
si vous utilisez des photos qui ne vous appartiennent pas vérifiez qu’elles sont libres des droits d’auteurs.
– ajouter un favicon à votre site

Navigation

Sur chacune de vos pages, votre visiteur doit pouvoir se repérer et savoir comment naviguer dans le site , il faut donc lui fournir un menu de navigation fonctionnel. Le plus simple est de créer des liens explicites, il est également possible de créer une barre de navigation avec image ou flash…
– Quoiqu’il en soit, pour éviter la confusion :
votre système de navigation doit apparaître sur chacune de vos pages au même endroit , en haut , à droite ou à gauche ou au bas de votre page (moins conseillé).
votre menu doit donner une idée au visiteur de ce qu’il va trouvé en cliquant sur le lien
si vous utilisez des icones , conservez les conventions par exemple , une enveloppe pour le lien de contact courriel
pour les sites qui ont plus de 10 pages , il est préférable d’avoir un plan général du site

La méthode conseillée par Vitclic

Pour un webmaster débutant, nous recommandons
1- de commencer avec des pages html classiques
2- ensuite d’apprendre à coder en html
3- puis de coder à l’aide de tableau
4- ne pas utiliser de frames
5- une fois que tous cela est bien maîtrisé de se lancer dans la conception ou la rénovation de son site en utilisant le css (ce sont des feuilles de styles (en anglais « Cascading Style Sheets », abrégé CSS) elles sont un langage qui permet de gérer la présentation d’une page et de celle de tout votre site sur un seul fichier)

©VitClic.com 2007/2010 Mentions