Quelques notes sur la conception d'une charte graphique

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Quelques notes sur la conception d'une charte graphique

Quelques notes sur la conception d'une charte graphique ? 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).

  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 : je vous en fais profiter okazou ;)

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 sur 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 actives 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é.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



21 commentaires pour “Quelques notes sur la conception d'une charte graphique”

  1. br1o dit :

    Très bon soft, je viens d’installer ColorPix, et je le trouve très intéressant. Notamment la fonction magnifier avec le zoom à 2800% !

    Je rajouterai le lien dans un ancien billet consacré aux outils permettant de créer une palette de couleurs.

  2. loïc m. dit :

    un petit site pour les schémas de couleurs: http://www.colorschemer.com/

  3. Cyril dit :

    Excellent ce billet ! Merci, j’en ai appris des choses !

  4. Nico dit :

    On en apprend tout le temps des choses sur le blog de Bruno. :)

  5. br1o dit :

    Cyril et Nico > Merci à vous deux pour ces encouragements dont ce billet avait bien besoin ;)

  6. Rémi dit :

    Article très interessant, comme souvent ici je confirme ;).

    Par contre, c’est très long ! Cet article est resté plusieurs jours ouvert dans un onglet firefox en attendant d’être lu petit à petit. Ceci dit, ce n’est pas forçément une critique, au contraire ;)

  7. Bonjour,

    Ton article synthétise l’essentiel du processus créatif et reflète ton interprétation dans ce domaine. Il peut être modulé en fonction de la nature de l’annonceur, son mode organisationnel, ainsi que de nombreux autres critères. Ca devait être dit :-)

    Pour infos il existe de nombreuses ressources sur les processus de production web. L’association des designers interactifs en récence quelques unes dans son wiki. ici : designersinteractifs.jot….

    Bonne continuation

  8. br1o dit :

    Rémi > Merci pour tes encouragements ;) Concernant la longueur des billets, je fais le maximum pour faire court, mais des fois c’est facile, et des fois… pas facile !

    Laurent DEMONTIERS > Tu as raison : ce qui va sans dire, va mieux en le disant. Ces quelques notes ne reflètent qu’une démarche personnelle concernant certains types de projets.

    J’ai réécrit plusieurs fois le billet pour en faire quelque chose de plus générique, mais au final ça donnait des km de if else…

    Merci aussi pour les liens : le wiki et ton site qui semblent très intéressants au regard de la conception web :)

    • Caroline dit :

      Très chouette article Bruno. Je ne le trouve pas trop long pour ma part, difficile je pense de faire court sur un tel sujet et puis ici on n’est pas là pour lire 140 caractères ;-)

  9. Site web : créer une charte graphique en 3 jours Coup d’oeil sur CSS4design, le blog de Bruno, intégrateur xhtml & css. La semaine dernière ce dernier nous faisait partager son expérience en nous livrant ses quelques notes sur la conception d’une charte graphique, un billet vraiment instructif…

  10. Cap° dit :

    J’avais pas vu ce post symphatique sur la conception de charte graphique… C’est limite un article pour moi cela, alors bon dans l’absolu c’est exactement comme cela que tout doit se passer… Et !!!! Dans la pratique ben c’est tout l’inverse :D !!!!

  11. br1o dit :

    Salut Cap°, content de te revoir ici ;) On s’appelle et on se mange une tartine ?

  12. jisee dit :

    Merci pour cet article fort intéressant et passionnant :)

  13. DaGhostProd dit :

    Très bon article pour partir sur des bases solides, une bonne synthèse quoi ;) Applicable et variable selon le type de projet (print ou web) mais l’essentiel est là !

  14. Sneferu dit :

    Super article… Tu devrais écrire un livre, très très bonne lecture, plein de concepts clé et de trucs pratiques. Je bookmark

  15. Matthieu dit :

    Très intéressant et très bien écrit. Merci pour cet article.

  16. Nathanael dit :

    Exellent billet, merci, j’en avais bien besoin!

  17. Julien Jolly dit :

    Super article, comme souvent. A quand un livre ?

  18. Créer un logo dit :

    Merci pour votre site de qualité et pour toutes ces sources d’inspirations.

    Amicalement

  19. Merci pour votre site de qualité et pour toutes ces sources d’inspirations.

    Amicalement



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site