Comment créer une charte graphique ?

Je présente ici la méthode de création de charte graphique que j’utilise mais il y a beaucoup d’autres façons de procéder qui dépendent des préférences et des connaissances de chacun.

Suivant l’inspiration, vous pouvez sauter les étapes décrites ci-dessous, ou à l’inverse, vous en inspirez pour stimuler votre créativité.

A - Les éléments de départ

1 - le sujet du site

Déterminer le domaine d’activité

ex : sports, loisirs, enfants, métallurgie, audiovisuel, institutionnel, marchand, officiel, ...

plusieurs critères sont possibles.

2 - le public visé

Quelle tranche d’âge ?

Quel niveau de connaissance du web ?

Quel domaine d’activité (littéraires, artistes, geeks ;-), passionnés,...)

A quelle fréquence de visite ils viendront sur le site ? Sont-ils obligés de venir sur le site ou pas (ex : site intranet d’entreprise avec agenda des réunions et accès aux applis...) ?

etc...

3 - les contraintes

ex : couleurs, logo, résolution d’écran, navigateur, charte institutionnelle à respecter, contraintes technologiques (selon le langage d’intégration ou le progiciel), photos...

Attention : le choix des photos peut prendre beaucoup de temps ! Si le client tient absolument à avoir des photos, je lui demande de me les fournir, je perd ainsi moins de temps à chercher LA photo qui lui conviendrait.

4 - l’ambiance du site

Faire la liste des odjectifs ou termes qui définissent l’ambiance qui se dégagera du site. Cette étape est à faire avec le client qui dirigera ainsi l’esprit créateur du graphiste

ex : humain, moderne, arrondi/carré, léger, high-tech, léger, flashy, etc...

5 - les éléments du site

Faire la liste des fonctionnalités et des éléments à placer dans l’interface (logo, liens, menus, etc...).

B - La réflexion

1 - Rechercher et visiter les sites similaires

Selon le domaine d’activités, le public, les concurrents,...

2 - Stimuler son inspiration en visionnant d’autres sites.

Pour plus d’infos :

Miss Pato.com

Privilégier les sites à forte valeur graphique... donc les gens qui me disent qu’ils veulent un site comme Yahoo ou Google, je leur installe FrontPage (ouh c’est méchant ça !) et ils le font tous seuls !

3 - Choisir les formes, les couleurs, l’ambiance générale du site.

Pour l’ambiance, on peut piocher tout ou partie des adjectifs listés à l’étape A-4. En général, y’en a beaucoup on peut pas satisfaire tout le monde...

4 - Prendre un papier et un crayon :

Dessiner différentes mises en page pour le site, préciser les couleurs, les formes retenues et placer les éléments listés à l’étape A-5. Evidemment, les étapes A-1 à 3 sont à prendre en compte à ce moment-là.

Prendre le temps d’ajuster, de laisser mijoter et de revenir dessus.

Ne dessiner que la page d’accueil. Les pages internes, à moins d’en avoir une idée précise et de ne pas vouloir l’oublier, seront créées par ordinateur le moment venu.

Pour l’instant on a toujours pas allumé notre ordinateur.

Cela vous démange ? On peut le démarrer maintenant.

C - La réalisation

Pour ma part, j’utilise Photoshop, donc je parlerais de ce logiciel.

1 - J’ouvre un nouveau document Photoshop.

Je le dimensionne selon la résolution dans laquelle je dois créer l’interface. Si l’interface doit être extensible en largeur, je prends la plus petite résolution. Il faut prendre en compte la barre des taches, les scrollbar du navigateur et l’entete du navigateur, les dimensions du document sont donc légèrement inférieurs à la résolution.

Pour du 800x600, on crée un document de 740x550.

Pour du 1024x768, on crée un document de 960x700.

Et pour les résolutions au-dessus, je sais pas, j’ai encore jamais créé de chartes pour du 1124 et plus.

Puis je laisse les autres valeurs par défaut, soit RVB et la résolution calculée par le logiciel.

2 - J’importe ensuite les éléments graphiques :

Photos, logo, zone de saisie, etc....

3 - Je place tous les textes, les liens et les boutons :

ex : Recherche, Contact, Titre de la news, Accueil,...

4 - Je définis les grandes zones :

ex : bandeau supérieur, menu de gauche

en faisant de grands applats de couleurs.

A cette étape, je ne choisis pas les couleurs avec beaucoup de précision, j’ajusterais par la suite les couleurs quand tous les éléments seront en place.

5 - Je fais les montages photos :

Si besoin, ou les effets nécessaires à l’interface dans le bandeau, le menu et je crée les différents éléments de la charte (puces, titres, encadrements,...) qui donneront son style à l’interface.

6 - j’ajustes, j’adaptes, je fais plusieurs tests :

de photos, de couleurs, j’inverse des éléments, etc...

7 - Une fois la page d’accueil stabilisée, je décline une page interne.

En effet, la navigation n’apparait pas toujours très développée, voire pas du tout, sur la page d’accueil.

Je met en page également un exemple de contenu, généralement du texte avec une photo, un titre et un sous-titre. Je vais chercher le fameux 'lorem ipsum' dans Google pour donner un aspect plus réel au texte.

J’insère des icônes de fonctionnalités (Imprimer, Envoyer à un ami...), le browse path (accueil > rubrique 1 > sous-rubrique1 > texte1) et le menu déroulé sur la bonne page avec les onglets activés s’il y en a.

Voila, on a maintenant une page d’accueil et une page interne avec différentes variantes de couleurs et/ou de photos.

Les étapes proposées ci-dessus sont celles que j’utilise pour créer une charte graphique. Elles ne sont en aucun cas obligatoires. Je propose ces étapes pour aider à démarrer, mais d’autres méthodes de création sont également possibles et aussi efficaces. Vous vous créerez au fil du temps votre propre méthode de création de charte graphique.

ATLAS INFORMATIQUE