5 - QUELQUES CONSEILS DE RÉALISATION
5.2 - Si vous avez un graphiste sous la main
5.2 - Si vous avez un
graphiste
sous la main
sous la main
Puisque vous connaissez maintenant la différence, cherchez donc un graphiste, pas un illustrateur ! Le mieux est qu'il s'agisse bien sûr d'une personne ayant déjà travaillé pour le web : elle sera sensible à l'importance du poids des images, saura les convertir aux formats GIF ou JPEG (17), selon la nature de l'illustration, et en obtenant le meilleur ratio qualité/poids. Elle pensera aussi à prendre en compte la taille de l'écran, ou, lors du choix des teintes d'accompagnement, les cartes vidéo qui ne proposent que 256 couleurs, enfin toutes les indications techniques que vous lui donnerez. Si vous avez un graphiste attitré, déjà responsable de la création et de la réalisation de votre identité visuelle, proposez-lui de collaborer au site web, l'expérience devrait le séduire (18).
Voyons de plus près le cas d'un graphiste professionnel extérieur à l'association, et prêt à collaborer. Vous attendez de lui qu'il mette son talent au service d'une personnalisation de votre site. Pour bien travailler, il a besoin d'informations : prenez le temps de les préparer et d'y réfléchir, avant de le voir. Vous lui brosserez, à grands traits, le message que vous voulez faire passer, le type d'ambiance (19) que vous désirez : "nous sommes des gens sérieux, et nous occupons de choses tristes et importantes", ou bien "on veut mettre un peu de punch et de vie dans la rue, et dans le web". En ce sens, les conclusions aux questions du par. 3.1 - Quelles informations pour quel public, et en général toute votre réflexion sur l'architecture, lui seront très utiles, ainsi que les précisions sur le lectorat visé (plutôt jeunes, ou bien chercheurs, ou encore tout public...).
Indiquez-lui aussi les éléments de la charte graphique, si votre association en a une : logo, couleurs ou typographie fréquemment utilisées. Si cette image graphique est bien connue du public (pensez au stylo d'Amnesty International, par exemple), et que vous vouliez la transmettre à votre site web, prêtez au graphiste une série de vos publications, journaux, papier à lettre, affiches, etc. Si vous avez une version numérisée dudit logo, c'est parfait !
En ce qui concerne le contenu, le graphiste a besoin, pour préparer ses propositions de gabarit graphique pour les pages intérieures, de la liste de tous les éléments que vous comptez y placer :
- en-tête (logo, nom de l'association, etc.),
- pied de page : nom de l'association (ou/et son logo), l'URL de la page, l'adresse e-mail de l'association, la date de la dernière mise à jour, etc.,
- navigation générique, navigation texte seul, navigation par rubrique, navigation locale,
- identification de la rubrique ou sous-rubrique (par un titre) dans la zone de lecture,
- prévoir aussi le petit "picto" qui permettra, tout au long du texte, de revenir immédiatement en haut de la page.
Donnez-lui une idée de la longueur des textes, et précisez-lui si certaines des pages auront en plus une photo ou une illustration, intégrée au texte. Précisez si vous avez besoin de pages de niveaux différents.
Bien sûr, si vous avez déniché sur le web certains sites particulièrement agréables à l'œil ou dont le style vous agrée, montrez-les lui, en lui précisant ce que vous appréciez. Pas d'inquiétude : un graphiste ne copie pas, il s'inspire...
Quelques précisions techniques, maintenant. La rapidité de chargement est peut-être un élément fondamental pour votre site (si vous communiquez en direction des pays du Sud, par exemple, où les connections sont de mauvaise qualité et très chères) : tâchez de réfréner votre graphiste dans l'usage des images. Si l'impression des pages doit être efficace (vous mettez en ligne des textes à lire au lit), proposez-lui de composer son gabarit à partir d'une table de largeur fixe, n'excédant pas 21 cm. S'il connaît le web, il voudra peut-être vous proposer quelque astuces techniques pour le site (comme par exemple une navigation en menu déroulant, utilisant du code javascript) : voyez si vos lecteurs auront l'infrastructure pour y accéder, et si votre équipe de mise à jour possèdera les connaissances suffisantes pour la réaliser ou la modifier.
A partir de ces indications, il va travailler un gabarit visuel, ou plusieurs. Il vous présentera sans doute ses essais sur Photoshop (ou Gimp, s'il travaille sur logiciel libre), car ces logiciels offrent la possibilité de placer les éléments de la composition sur des "calques" séparés, de manière à pouvoir les visualiser ou les cacher, les modifier ou les déplacer indépendamment les uns des autres. Charge à vous de mettre en pratique ses idées graphiques en code HTML, s'il ne sait pas faire.
Lorsque vous en discuterez avec lui, écoutez ses arguments, à propos de ses projets : il saura vous expliquer ses choix, selon les indications d'ambiance et de contenu que vous lui avez données. Et c'est ainsi que vous pourrez juger s'il a réussi ou non, et choisir parmi ses propositions : mettez-vous alors à la place du public visé et faites confiance à votre sensibilité. Le dialogue doit être possible : si votre graphiste ne sait pas argumenter ses choix, méfiez-vous. S'il vous impose la sensation d'être un béotien incapable de comprendre ses œuvres, trouvez un autre graphiste.
Ce respect doit cependant fonctionner dans les deux sens : lorsque vous avez approuvé un principe graphique pour votre site, ne "pinaillez" pas pour modifier un orange pas assez orange à votre goût, un dessin que vous placeriez en haut à gauche plutôt qu'au milieu, et autres détails... Le graphiste sait ce qu'il fait, son art consiste en traduire des sentiments en images et en organiser celles-ci dans un espace plan et coloré, à l'équilibre harmonieux. Changer un détail ne satisfait que votre oeil, et peut remettre en cause l'équilibre général. D'autre part, des modifications qui vous paraissent de détail représentent parfois un long effort et pas mal d'heures de travail, que la part de votre budget consacrée au graphisme ne récompense peut être pas. Bref, votre rôle est d'approuver un principe, s'il vous convient, et d'en confier la réalisation et les détails au spécialiste et à son savoir-faire.
Dans le style choisi, le graphiste va vous proposer une page d'accueil, pour laquelle vous avez également préparé la liste des éléments devant y figurer. Pensez encore et toujours à la rapidité de chargement : si vous tenez à montrer une photo importante mais encombrante, c'est le plus mauvais endroit, proposez-la plutôt dans une page intérieure.
Un principe visuel pour les pages intérieures peut éventuellement se "décliner", c'est-à-dire qu'on crée d'autres pages légèrement différentes, mais dans le même esprit. Vous avez peut-être envie de discerner les pages de têtes de rubriques des pages de sous-rubriques, ou les rubriques les unes des autres, ou les pages de navigation des pages d'information. A vous d'en discuter avec le graphiste...
Lorsque l'équipe de conception et le graphiste se sont mis d'accord sur un gabarit visuel, c'est peut-être vous qui créerez le gabarit HTML (voir par. suivant), ou bien les autres pages. Pensez à demander au graphiste toutes les données dont vous allez avoir besoin : couleurs utilisées (code RVB ou hexadécimal), nom du caractère utilisé dans les images à texte, dimensions de ces images, méthode pour les créer... Ces indications rejoindront le document de réalisation. S'il ne vous a livré qu'une image Photoshop, et que vous avez réalisé vous-même le code HTML, montrez-lui quelques pages d'exemple, pour vérification.
Si vous-même n'êtes pas équipé, vous aurez peut-être recours à son aide dans le temps, pour réaliser les images nécessaires à la création d'une rubrique. Restez donc en contact, et ne manquez pas de le prévenir du lancement du site. Proposez-lui bien sûr de faire apparaître son nom (et l'URL de son site, s'il en a un) dans les remerciements. Si vous vous débrouillez en Photoshop, demandez-lui les fichiers originaux des images utiles à la navigation et à la charte graphique : au format .PSD (à retravailler avec Photoshop), et avec tous les calques utiles. Une bonne précaution : s'il vous les envoie par courrier électronique, qu'il les compresse tout d'abord, afin que les images ne soient pas endommagées par le logiciel de courrier.
Complétez cette section :
- Pour donner au graphiste toutes les indications qui lui seront nécessaires, revoyez le par. 3.1 - Quelles informations pour quel public.
- Quelques mises en garde sur les techniques à la mode (menus déroulants, javascripts, etc.) : voir par. 2.2 - Accès universel.
- Pour la création du gabarit HTML, et la liste des éléments du gabarit-contenu, voyez le par. 5.3 - Gabarits.
- Vus ne savez plus pourquoi vous avez besoin de pages de niveaux différents ? Voyez le par. 5.1.3 - La hiérarchie et 5.1.6 - Les éléments à définir
- Des exemples de picto permettant de revenir en haut de la page sont donnés au par. 3.3.6 - Oups, quel pavé cette page !
- La taille convenable pour que votre site puisse être imprimé est indiquée au par. 5.3.1 - Pour une impression efficace.
- La liste des éléments pouvant figurer en page d'acceuil est donnée au par. 3.4 - Une page d'accueil... accueillante.
- Le document de réalisation est traité en détail au par. 6.2 - Cahier de conception, cahier de réalisation et de suivi.
Notes
(17) Voir en bibliographie : Contenu > Traitement des images pour le Web.
(18) S'il n'a pas d'expérience dans le web, il lira avec profit l'ouvrage de Lynda Weinman, Conception graphique des sites web (voir en bibliographie : Contenu > Conception graphique).
(19) Eprouvez par vous-même ce que l'on peut ressentir par une ambiance graphique juste, en allant visiter le très émouvant site de Nagasaki :
http://www.exploratorium.edu/nagasaki/mainn.html