Conception d’une charte graphique pas à pas

Le processus de création d’une charte graphique devrait idéalement s’appuyer sur un contenu validé par le client et bien compris par l’équipe créative chargé du projet. Le contenu est roi, parait-il. Ce cher contenu… Le moins que l’on puisse dire, c’est que si l’exactitude est la politesse des rois, le contenu se fait souvent désirer, alors que dans le même temps le client attend sa maquette. Dans ces conditions comment « sortir » une charte qui ne soit pas seulement l’application de vieilles recettes — aussi bonnes soient-elles — ou le résultat d’une bonne pioche, fut-elle issue de la tendance Web 2.0 ?

Lorsqu’il faut rapidement mettre en place un site web « classique » (charte graphique pour la page d’accueil et déclinaison pour les rubriques, le tout finalisé dans la semaine), je m’inspire des éléments mis généreusement à ma disposition : logo, visuel, plaquette publicitaire, adresse d’un site concurrent (I want the same, but different!).

Avant de partir à la recherche de pistes graphiques, je patafixe les éléments face à moi et je rédige une note de synthèse que j’envoie au client. Je lui précise qu’il recevra sous peu une première proposition d’univers graphique (ok, je me la pète un peu), et j’en profite pour lui rappeler les modalités de notre collaboration.

Première journée phase de découverte

Une fois que j’ai dit « sous peu », la pression monte. Alors je regarde intensément les éléments avec lesquels je vais travailler : en attendant le contenu, et pendant quelques jours, ils serviront de garde-fou entre mon imagination fertile et la réalité du brief.

Comme il faut bien commencer par quelque chose, je recherche une ou deux couleurs qui s’adapteront au logo. Je fais ensuite quelques essais de placement sur la page à l’aide de quelques formes basiques : aplats de couleur, contours seuls, dégradés, etc. Et comme il faut bien s’arrêter à un moment donné : 1, 2, 3 soleil ! le logo trouve sa place : en haut, à gauche, à droite, centré ou en bas. Je place également les visuels et je mets du lorem ipsum sous forme de pavé de texte, d’encart, de liste, de titre et de sous-titre.

Je rappelle que je n’ai qu’une très vague idée du contenu. J’imagine qu’il sera composé d’une introduction et d’une description des produits ou des services. Il est donc urgent de ne pas s’enfermer dans une proposition trop marquée. Il s’agit surtout à cette étape de fournir un échantillon de ma capacité à manier Photoshop et Illustrator. C’est pourquoi ce que j’appelle la « page », n’a pas vraiment de réalité précise : pas de largeur et encore moins de hauteur ! Il s’agit d’un mini-univers graphique qui doit servir de base de discussion en attendant le contenu qui sera certainement là demain matin…

En attendant, comme souvent dans cette phase de découverte, j’en profite pour réviser.

Les couleurs :

Sans entrer dans le détail de la symbolique des couleurs, je retiens que l’on a toujours besoin d’une couleur dominante et de quelques couleurs secondaires.

J’en profite pour parler d’un outil que j’utilisais il y a quelques années : Chromoflash décline une charte pour les éléments récurrents d’une page web à partir de cinq couleurs choisies dans la palette web sécurisée (216 couleurs).

Cet outil proposait, par exemple, de choisir :

1. couleur dominante (bandeau ou logo) déclinée en 3 couleurs moins saturées et/ou plus claires pour découper la page en blocs fonctionnels.
2. couleur tonique pour les titres, déclinée en deux couleurs pour les puces, les pictos ou des textes courts,
3. troisième couleur pour les encarts, déclinée en deux couleurs pour les mises en exergue, les trait de séparation,
4. couleur typo pour le texte principal,
5. fond de page.

Bien sûr, un travail de qualité ne saurait se contenter de cinq clics pour déterminer une palette de couleurs… Néanmoins, la découverte de cet outil m’a permis en son temps de franchir le cap de la feuille blanche.

D’un point de vue didactique, Chromoflash débroussaille le terrain avec une certaine efficacité, sans compter qu’il existe d’autres outils pour le choix de la palette de couleurs.

L’idéal serait d’avoir un très beau visuel sur lequel promener la pipette pour recueillir délicatement quelques gouttes de pixels… Ne rêvons pas trop, car la réalité est souvent plus proche d’un logo conçu en fonction des contraintes de l’imprimé versus les possibilités chatoyantes de l’écran.

Le gris typographique

C’est grosso modo l’impression visuelle faite par un pavé de texte que l’on regarde de loin en plissant les yeux (‘-_-‘). En appliquant cette idée du gris typographique à l’ensemble des blocs (et au texte qu’ils contiennent), il est possible de travailler sur le rythme du site et la respiration de la page.

Rythmes

Ce sont les relations qu’entretiennent les différentes pages du site par rapport aux éléments qu’elles partagent : logo, bandeau et menu de navigation qui fédèrent par nature les pages du site. L’enchainement des liens va donner du souffle à la navigation et à l’expérience utilisateur.

Respiration

Il ne faut pas non plus que le site se transforme en machine à cliquer ; chaque page doit retenir le visiteur en offrant un espace qu’il peut identifier et situer immédiatement par rapport au reste du site. Si ce n’est pas le cas, il faut revoir la copie !

Au niveau de la page en revanche, il manque le contenu pour aller plus loin… Mais, attendez… on me souffle dans l’oreillette qu’il arrive… Ça tombe plutôt bien, non ?

Deuxième journée Travailler avec le contenu

Ce contenu est composé de textes et d’images à partir desquels il devient possible de structurer le site en parties et sous-parties. Ce qui n’augure en rien pour l’instant du nombre de pages. On peut très bien imaginer une seule page avec des ancres pointant plus bas.

Si elle parait naturelle, l’organisation en plusieurs pages doit faire l’objet d’une étude aussi sérieuse que le reste. Même si en définitive le choix se portera à 99,99% sur un site multi-pages, ne serait-ce pour donner un peu de peps en augmentant le nombre de pulsation cardiaque du site !

Save the web, save the click? Presque. Il faut toutefois doser pour que la navigation ne s’effectue pas à la rame.

Travailler avec l’équipe commerciale

Il n’est pas de design vraiment efficace qui n’ait été pensé en relation avec l’équipe marketing. Le choix du nombre d’éléments à placer sur une page est sans doute la chose la plus difficile à déterminer car plusieurs facteurs entrent en jeu. Dans le cas d’une offre commerciale, l’information sur le service ou le produit est souvent l’affaire du service marketing qui a validé le discours commercial grâce à sa connaissance du marché.

Mais ce qui fonctionne dans une plaquette imprimée, n’a pas toujours sa place dans un site web où la granularité de l’information est d’autant plus importante que le sujet est complexe. A cet égard, le site feedburner est un modèle du genre : le ratio entre l’information présente en page d’accueil et le nombre de services proposés au final est phénoménal.

L’échange d’informations avec le service impliqué dans le contenu (et pas seulement avec la personne qui a rédigé les textes) est déterminant ! Lorsque cela n’est pas possible — et c’est malheureusement souvent le cas dans ce genre de projet — je prends le maximum de renseignements sur les métiers, les produits ou les services en question.

Troisième journée Back to basics : le retour aux fondamentaux

Revenons au contenu et à la meilleure manière de l’organiser dans la page. Deux choses sont à considérer : les principes du design (dont une traduction existe sur pouipouidesign) et les éléments que ces principes doivent organiser.

Cinq principes, un milliard de possibilités :

1. Equilibre (symétrie, asymétrie),

   Les notions de base de notre physique quotidienne comme la masse, la gravité ou encore le vide restent présentes lorsque nous regardons une composition graphique. Nous attribuons un « poids visuel » aux éléments qui composent une mise en pages. Cet équilibre peut être arrangé de manière symétrique ou asymétrique.

   Dans le premier cas, la composition se répartie autour d’un axe vertical ou horizontal. Il en résulte une impression… d’équilibre, de paix, de stabilité. Dans le cas de l’asymétrie, les éléments sont organisés de manière à produire une plus grande tension visuelle par l’utilisation de plusieurs petits éléments pour équilibrer une plus grande forme, par exemple.

2. Rythme (régulier, mouvant, progressif),

   L’intervalle entre la répétition ou l’alternance d’éléments crée le sens du mouvement et définit des motifs ou des textures. Le rythme peut être régulier lorsque les intervalles ou les éléments sont similaires en taille ou en longueur, fluide avec un mouvement plus organique ou plus naturel, ou encore progressif lorsque des étapes sont suggérées.

3. Proportion (distribution des formes, échelle et relation entre les éléments),

   Il s’agit des dimensions ou de la distribution des formes, mais aussi de l’échelle entre un élément et un autre. Un petit objet à côté d’un plus important peut donner l’impression d’être plus éloigné.

4. Hiérarchique ou prédominance (quelle place pour quel élément),

   Ou comment établir la perspective d’une composition et décider de l’importance relative des éléments entre eux selon le premier-plan, le plan médian et l’arrière-plan.

5. Unité (d’après la Gestalt théorie) :

   Il s’agit de la composition vu comme un tout, où chaque élément et les liens qui l’unissent aux autres font partie d’une démarche conceptuelle qui pousse l’esprit à établir des liens, à former des catégories ou des groupes porteurs de sens.

   • Fermeture — l’esprit imagine les pièces manquantes dans une composition,
   • Continuité — l’œil continue dans une direction donnée,
   • Similarité — relation entre la forme et la fonction,
   • Proximité — relation entre les éléments et comportement induit,
   • Alignement –mise en place des objets dans l’espace pour organiser des ensembles cohérents.

Après l’échantillon, le travail commence

Armé de ces principes, et après avoir pris connaissance du matériel fourni par le client (et avant de me saisir de la souris), je dégaine ma collection de Stabilo pour baliser le contenu : cet élément servira d’accroche, celui-là d’encart, etc.

Dans les cas les plus simples, chaque partie principale devient une page web. Dans la pratique, les textes sont souvent composés de parties redondantes qu’il faut éliminer. Ce n’est pas forcément la partie la plus simple car il faut faire des coupes sombres pour éclaircir l’ensemble, sans perdre le sens… et sans oublier de défendre son point de vue avec le client !

Ensuite, je prépare un café bien chaud, et je prends mon crayon pour griffonner librement. Je noircis quelques feuilles, sans idée préconçue, ce qui me permets de digérer le travail d’analyse précédent qui finit par être un peu fastidieux à la fin. Je me défoule, sans prêter attention une seule seconde aux principes du design ou autres règles de mise en pages qui ne doivent pas se substituer à l’imaginaire. Ils viendront le moment venu mettre de l’ordre dans les idées.

Curieusement, cette phase qui est la plus productive est aussi la plus courte. Le cerveau a pris le temps d’assimiler les contraintes pour s’en servir de marche-pied, ou comme le dit plus élégamment André Gide :

L’art naît de contrainte, vit de lutte, meurt de liberté.