Passer au contenu

Le casse-tête de la charte graphique dans le design de site web

Dans la famille des métiers du web, je voudrais le graphiste (ou le designer ?)…

S’il est à mon sens une phase délicate à gérer dans le processus de création d’un site web pour un client, c’est bien la première étape : celle de la définition et de la création du design du futur site.

Car de quoi parle-t-on ?
On parle d’un pur processus créatif qui démarre à partir du brief du client, quand il y en a un.

Dans la famille des métiers du web, je voudrais le graphiste (ou le designer ?)…

S’il est à mon sens une phase délicate à gérer dans le processus de création d’un site web pour un client, c’est bien la première étape : celle de la définition et de la création du design du futur site.

Car de quoi parle-t-on ?
On parle d’un pur processus créatif qui démarre à partir du brief du client, quand il y en a un.

On parle d’un brief plus ou moins précis, plus ou moins fantaisiste ou argumenté, duquel le graphiste va devoir s’imprégner, avec lequel il va composer (au  propre comme au figuré) pour produire une première maquette.
On parle en fait de la réalisation à partir de la proverbiale feuille blanche d’une interface qui devra être le point de rencontre idéal entre le désir du client, la vision du graphiste et l’utilisateur final.
Pas facile facile…

Au fil de mon expérience, j’ai été régulièrement confronté aux deux cas de figure somme toute assez classiques :

  • le brief du client est clair, il sait ce qu’il veut et sait l’exprimer (ou nous avons posé les bonnes questions), et en général la première maquette proposée est la bonne, à quelques aménagements près. Je vous rassure tout de suite : ce n’est pas le cas le plus fréquent…
  • le brief du client n’est pas très clair, ou alors le client attend de nous des préconisations créatives (ce qui est souvent une mauvaise chose), on n’a pas saisi son univers, tout ça, et crraaaacc on va droit dans le mur (en béton armé et tapissé de tessons de bouteille) avec notre ch’tite maquette à la con.

Je le disais précédemment : le graphiste doit savoir comprendre, interpréter, s’approprier le désir du client pour coller au plus près de ses attentes. A ce titre j’en arrive à me demander si un bon webdesigner n’est pas en premier lieu un très fin… psychologue.
Car il y a du psy dans la relation qu’on peut avoir avec un client : il réfléchit interface et business, et on lui répond "art" et design.
A moins que ce soit l’inverse.

Bref, toi le barbu au fond de la salle, si t’es pas doué un minimum pour savoir comprendre, reformuler, recadrer et enfin créer, mieux vaut éviter de t’improviser graphiste.
On est là dans le subjectif, l’irrationnel, l’humain : pour un brief donné il y aura autant de maquettes différentes qu’il y aura de graphistes.
Comme il y a autant de façon d’interpréter un classique des Beatles qu’il existe de musiciens qui l’ont repris (et encore là on ne parle que de reprise, pas de création)…

Vous voyez un peu la prise de chou, et les dégâts que peut causer un brief mal compris en termes de productivité et de délai…
A tel point qu’il m’est arrivé récemment d’envoyer paître un client pour qui nous en étions à la quatrième proposition de charte graphique tellement l’incompréhension entre nous était grande et ne faisait qu’augmenter au fil de nos nouvelles propositions : j’ai tout arrêté et je lui ai gentiment suggéré de trouver un autre prestataire. Bon ok, je suis un peu caractériel, mais là de toute façon nous étions dans une impasse.
Et faut pas me chercher, des fois, surtout dans les impasses.

Tout cela m’a conduit à engager une réflexion sur la façon d’organiser un minimum le processus créatif, en essayant de mettre en place un certain nombre de normes qui évitent de rater complètement une maquette pour être passé à côté de la vision du client.
L’objectif étant de "matérialiser l’immatériel", à savoir baliser préalablement la création.

Appelez ça de la gestion de projet si vous voulez, moi j’appelle ça gagner du temps, ou éviter d’en perdre…

1. Exiger un brief clair du client, qui réponde à minima aux questions généralistes suivantes :

  • un site pourquoi ?
  • pour qui ?
  • comment ?
  • comme qui (important ça, de situer l’environnement concurrentiel avec un petit benchmark) ?
  • qui va dire quoi ?

2. Rentrer dans le détail (technique de l’entonnoir, aller des généralités et élaguer jusqu’aux points les plus précis)

  • y a-t-il déjà une charte graphique dans l’entreprise (plaquettes, logo…)
  • y a-t-il un ou des graphistes en interne (pour situer le degré d’awareness du client :-)) ?
  • le client est-il en attente de propositions créatives, est-il ouvert à vos délires, bref vous donne-t-il carte blanche (attention, ça c’est le genre casse-gueule) ?
  • ou au contraire sait-il précisément ce qu’il veut (ce qui ne garantit aucunement que sa vision soit pertinente) ?
  • a-t-il des sites de références qui le font kiffer grave (au point de se lever la nuit pour les visiter) ?
  • ou au contraire n’a-t-il qu’une culture internet proche de zéro virgule deux ?


3. Définir les balises "techniques" qui vont limiter les risques de crash (là on est dans le concret)

  • le client souhaite-t-il gérer son site de façon autonome ? (ce n’est pas neutre : si oui, installation d’un CMS donc travail sur des templates, sorte de figure imposée qui a aussi ses contraintes)
  • menu horizontal ou menu vertical ?
  • format de page paysage ou portrait ?
  • largeur fixe (et laquelle ?) ou design élastique ?
  • combien de colonnes ?
  • menu à gauche ou à droite ?
  • Flash ou pas Flash (ou pas, SVP !)

4. Définir les balises "financières" qui vous protégeront d’une éventuelle faillite

  • séparer la tarification du design et celle du développement ? (c’est juste une question/suggestion)
  • déterminer précisément le nombre de maquettes ("pistes") que vous acceptez de proposer dans le budget défini. Concrètement, une clause disant en substance qu’au delà de x maquettes refusées par le client, le contrat sera caduque et une sorte d’avenant sera conclu pour la facturation de nouvelles maquettes.
  • déterminer si vous proposez une seule piste à la fois ou si vous proposez par exemple 3 différents styles de design dès le début.
  • il serait plutôt recommandé de faire signer un bon-à-tirer au client une fois la maquette définitive acceptée et validée, cela vous évitera peut-être beaucoup de soucis par la suite…

Bien sûr je ne propose ici que quelques pistes qui méritent probablement d’être complétées, et je dois avouer que je ne les exploite encore pas complètement.

Mais je sais à la lumière de quelques cas récents (et pas forcément négatifs) que je vais m’y tenir de plus en plus scrupuleusement.
Encore dix ans d’efforts et on sera des vrais pros, je vous dis.

Et chez vous ça se passe comment la gestion de la phase design ? Vous avez une méthode différente à nous faire partager ?

📍 Pour ne manquer aucune actualité de Presse-citron, suivez-nous sur Google Actualités et WhatsApp.

Opera One - Navigateur web boosté à l’IA
Opera One - Navigateur web boosté à l’IA
Par : Opera
24 commentaires
24 commentaires
  1. Pour ma part c’est très souvent analyser ce que peut vouloir la client. Ce n’est pas simple, cela demande du temps, et effectivement une certaine sensibilité a la psychologie.
    Cela dit, je ne sais pas ce qui est le plus simple, surement suivre une charte graphique, mais ce n’est pas forcément le plus interessant.
    Se prendre des retour de pelles, cela fait aussi parti du charme de ce metiers.
    Pour ma part, chercher, analyser, pour ensuite céer proposer et expliquer le pourquoi du comment, c’est, je pense, le plus interessant.

  2. bah non, rien a rajouter, c’est un résumé de brief. une fois écrit ca prend des pages, mais ceux qui ne travaillent pas comme cela, je me demande comment ils font.

  3. Belle analyse, je m’y retrouve.

    Je rajouterai en plus :

    Beaucoup de bla-bla pour endormir les clients qui ne savent pas trop ce qu’ils veulent. Sortir lors de la présentation des petites phrases choc du style : il y a un déséquilibre, votre site est bancal si on déplace ce bloc.
    —-
    Le graphiste doit bien connaître les contraintes techniques selon la technique (flash, HTML, css etc.).
    —-
    Avec le CSS, les maquettes ont bien évolué. Perso : je fais d’abord l’architecture puis je colle le graphisme… (alors qu’avant on faisait un template et ensuite on mettait des coups de cutter dans tous les sens sur toshop et on intégrait le tout dans des tableaux).
    —-
    Il doit aussi avoir une bonne culture visuelle et générale. (Pour avoir des références et montrer les sites qui pourraient coller aux attentes du client.) Et surtout, savoir où se trouve le bon lien, car quand on a des milliers de liens dans ses bookmarks !!

    Il doit aussi être en avance sur ses clients, avoir une veille sur l’actus du web afin de les proposer (fil RSS, vidéo, click and call me…)

    Parler un minimum anglais, sinon au tél on n’a pas l’air fin, et répéter cette phrase : "i don’t understand, bye bye" 🙂 (c’est du vécu, et j’ai un peu honte 🙁 )

  4. Ahhh Psychologue le graphiste ? Non. Le bon graphiste oui. Mais j’ajouterai même que tous les membres de l’équipe doivent l’être. Savoir ce que pense le client et à coup sûr on lui rend le travail qu’il veut. Mais je pense que le plus dur dans tout ça, c’est que, même si on est persuadé d’avoir d’excellentes idées en matière de chartes graphique, d’ergonomie, tout ça tout ça, c’est de les faire accepter par le client. Donc le bon graphiste est un fin psychologue et un bon commercial. Ca fait mal à entendre pas vrai ?

  5. Pas grand chose à ajouter concernant l’approche psychologique… disons juste que ça permet d’arrondir les angles, mais ça ne transformera jamais un client avec lequel on est pas du tout sur la même longueur d’onde en client idéal. Bref, c’est plus rentable 😉

    Pour une maquette de site je mets 2 pistes dans le devis, une finalisée. Les 2 pistes plus le travail d’arbo-édito correspondant au montant de l’acompte, c’est clair pour tout le monde. Si ça ne va pas du tout, on arrête là ou facturation de nouvelles pistes (jamais arrivé mais au moins ça fixe les choses). Ca m’arrive de ne faire qu’une piste, la 2nde est en réserve au cas où (le bonheur :))

  6. Un bon "zoning" ou "wireframe" (fait avec visio ou axure par exemple) et validé par le client permet de bien définir au préalable ce qu’il attend dans ses maquettes au niveau fonctionnel (avant d’avancer avec photoshop), et donc limiter largement la casse au moment de la créa.

  7. Pour avoir bossé en agence de pub, je connais la guerre graphiste / client. Le problème est quand le contact chez le client n’est pas le décideur final. Tout le monde a son avis mais personne ne prend de décisions au risque de "mécontenter" le patron. Je pense que le design demande une prise de risque et seul le big boss, la grosse légume, le chef, le grand manitou, le capitaine peut décider de ce qu’il veut.
    Le design s’adapte très mal de compromis…

  8. Une fois, j’ai bossé sur la partie fonctionnelle d’un site pour un client, tandis que le design était sous-traité chez un graphiste.

    Le pauvre gars s’est retrouvé en relation avec trois interlocuteurs différents (dont un dont on se demande toujours ce qu’il foutait là), avec chacun des avis et des demandes contradictoires.

    Le pauvre gars à mis deux semaines à s’en remettre. Des fois, ya quand même des clients qui méritent des baffes…

  9. boris > bien d’accord concernant le wireframe, j’en fais systématiquement. Seul hic : quand le client privilégie des détails esthétiques (pour ne pas dire esthétisant) au fonctionnel. Mais c’est rare n’est-ce pas ? 😉

  10. je pense aussi qu’il faut une bonne partie de psychologie, et à mon avis ce n’est pas limité au métier de graphiste, meme les developpeurs (par forcement web) ou les ergonomes doivent faire preuve de beaucoup de psychologie, et de pédagogie. meme pour répondre au plus simple besoin du client 🙂

  11. Analyse des besoins utilisateurs "validés" avant la moindre maquette.
    Ensuite, ce qui nous interesse c’est de satisfaire l’utilisateur par le client. En résumé on lui fait comprendre gentillement que ce n’est pas lui qu’on cherche à séduire mais son client. Car c’est son client qui va lui générer du C.A pas son dir Mktg, ni sa femme non plus 😉
    Cela nécessite d’être carré dans son approche mais au final on gagne du temps (on éliminie les c…. dés le départ)

  12. "s’approprier le désir du client pour coller au plus près de ses attentes."

    Oui… et non. Je pense qu’un graphiste doit aussi "éduquer graphiquement" son client et ne pas forcément lui donner ce qu’il attend (surtout s’il n’y connait rien).

    Quant on va chez le médecin, on ne choisis pas ses médicaments ^^ (un peu extrême comme comparaison).

  13. Autre cas aussi bien prise de teston, auquel je fus confronté : nouvelle boîte, nouvelle charte graphique "générale" dans les mains d’un graphiste indépendant très bon en print mais avec une vision grapho-graphiste du Web qui ne jure que par des sites full flash qui ne font plaisir… qu’aux graphistes! Le pire est qu’il avait les pleins pouvoirs donnés par le client. Un enfer de quelques semaines terminé dans un clash violent. Le graphiste faché s’en est allé, mais au moins la charte print a pu servir de base au web, on avait pas tout perdu 😉

  14. Je me trompe quand je pense que le Webdesigner est un mélange d’ergonome et de graphiste ?

    Je n’ai pour l’instant eu que très peu de client mais quand je suis face à eux, j’écoute ce qu’ils ont à dire.
    Ils me parlent de leur projet de site, de leur société, de l’image qu’ils veulent donner, du public visé et très vite dans ma tête se construit déjà la maquette.

    Je ne parle des pistes à prendre ou à éviter que dans le cas ou le client décide de partir dans des délires qui, si ils étaient mis en place rendrait son site inutilisables et extrêmement moche…

    Le but étant que le résultat soit graphiquement beau tout en étant ergonomiquement parfait pour les utilisateurs futur.

  15. J’aime pas le bleu… Ma femme pense que ce n’est pas ça… et bien d’autres encore… Le bon graphiste est celui qui a suffisemment de talent, de savoir-faire et de conviction pour répondre non pas à la demande du client mais à sa problématique…

  16. Beaucoup de chose intéressane dans ce qui viens d’être dit.
    Le problème le plus fréquent et effectivement le distinguo entre le client de l’agence et le client du client… en l’occurence l’internaute. Malheureusement les "commerciaux/consultant" ont la facheuse tendance à privilégier les premiers au détriment des seconds. Business as usual…

  17. Bonjour,

    Je ne suis pas d’accord avec le terme "psychologue", mais je serais plus enclin à dire enquête. Cet outil touche à de nombreux domaines et est très pratique. Par exemple en ethnologie l’enquête nécessaire avant tout approfondissement nous permettra de faire une analyse plus centré (et non plus juste). Parmi les techniques d’enquêtes nous pouvons observer une suite qui peut faciliter dans vos cas, un accès plus facile à l’information. D’abord faire un entretien dit exploratoire, ensuite selon les réponses essayer de retravailler sur un questionnaire. J’aimerai mettre en pratique ce que j’ai appris en ethnologie pour les outils du webmaster. Pensez-vous que ça en vaille la peine ? Avez-vous des questions ?
    En tout cas bravo pour cet article qui permet de comprendre ce qu’est la charte graphique par rapport au vécu.
    Très beau travail d’auto-réflexion.

  18. Tout ceci est extrêmement juste, de mon point de vue… surtout sur l’approche “écoute”, “psychologie”. Si ça peut te conforter, j’en arrive à la même analyse après de longues années d’expérience en matière de chartes ecommerce sur une solution ecommerce (Rentashop) mutualisée. On a une approche “ouverte”, en gros on peut à peut près tout faire, et sans utiliser Flash (je reviens, je vais vômir… une petite seconde) mais du coup on ne peux pas “cadrer” le client dans des gabarits, donc entre l’ergonomie, l’esthétique et les désirs parfois sortis tout droit de ses rêves (“faites moi un miroir au milieu de la page”… si, si, y’en a, des comme ça) faut naviguer serré.
    L’avantage du ecommerce, c’est qu’on se doit de viser avant tout l’efficacité marchande, ça permet de recadrer le client qui part dans des considérations… comment dire… allez, on va dire “à côté de la plaque”. Et puis “j’ai un ami qui s’y connaît”, ça, c’est la mort… autant tout de suite démonter le gars (çui qui connaît) en demandant “ah ? Et quelles sont ses compétences, à votre ami ?”. Histoire de démontrer, sans en avoir l’air, que le “gars qui connaît”, soit c’est l’interlocuteur et alors là on parle, soit on l’oublie et on en parle plus… sans froisser le client, bien entendu… un vrai travail d’équilibriste.

    Réponse aux commentaires :

    “Je pense qu’un graphiste doit aussi “éduquer graphiquement” son client” :
    Bon courage…
    Là faut penser à à monter un organisme de formation plutôt. Non, plus sérieusement ce n’est pas éduquer qu’il faut, c’est faire sentir ou comprendre au client que tu connais la musique et qu’il a tout intérêt à te laisser faire les bons choix, ceux qui lui feront gagner du pognon. S’il ne comprend pas, on peut arriver au conflit, il faut donc savoir aussi en sortir, mais je conseillerai de lâcher l’affaire si tu ne sens pas le plan, mieux vaut perdre un client potentiel, qui de toutes façons va te faire chier jusqu’au bout, que perdre son temps.

    ethnoinfo :
    Je ne connais pas les méthodes, en ethnologie, mais si ça démarre comme ça, on est pas sortis de l’auberge : fais simple, évite le jargon, mets-toi à la portée de ton client. N’oublie pas que ce n’est pas un ethnologue sur-diplômé, mais bien souvent quelqu’un qui n’a qu’une vision très lointaine de ce que tu fais. Préfère l’analogie, parle lui de choses qu’il connaît : de la construction d’une maison, du châssis, du moteur, et des roues de son auto, il se sentira en domaine connu et pourra te donner des réponses, des indices, dans la mesure ou il comprendra tes questions 🙂

    Courage !

  19. A noter que bien souvent le graphiste se contente d’ajouter quelque élément graphique à un template existant. Cela dépend du prix qu’on prêt à mettre bien sûr.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *