Des maquettes difficilement intégrables… wait, what ?

La semaine dernière, Maxime (chef de projet/développeur) a relancé le débat sur les problèmes de communication entre graphistes et intégrateurs à travers son article intitulé « Des maquettes facilement intégrables svp… wait, what ? ». L’article dénonce les intégrateurs fainéants qui se plaignent de maquettes difficilement intégrables, qui ne font pas leur boulot, qui voudraient que les graphistes connaissent les contraintes du web, et qui ne mettent aucun coeur dans leur travail. Comme la dernière fois, en tant qu’intégrateur, je suis choqué qu’on puisse tenir un tel discours et j’avais envie de rectifier quelques points sur le webdesign et l’intégration.

Le design n’est pas la finalité d’une page web.

Quand je lis des articles de non-intégrateurs qui parlent d’intégration, j’ai souvent l’impression qu’ils considèrent le design comme la finalité d’une page web.

Le graphisme d’un site internet doit laisser transparaître une stratégie de communication définie et adaptée aux objectifs, et doit susciter une émotion chez l’internaute.

La maquette doit regorger de surprises et de dynamisme, peu importe s’il faudra du CSS3, des positions absolutes dans tous les sens. Chef de projet, développeurs, intégrateurs, arrêtez de râler et faîtes votre boulot !

C’est probablement la pire idée pré-conçue qu’on puisse avoir de la conception web. Alors répétez après moi : le design n’est pas la finalité d’une page web. Une page web, c’est :

  • Une idée, une volonté (émise par le client)
  • Un cahier des charges (défini par le chef de projet)
  • Un rédactionnel (réalisé par un rédacteur web)
  • Des préconisations de référencement (émises par un référenceur)
  • Une charte graphique (définie par le webdesigner)
  • Un développement (codé par le développeur)
  • Une intégration (conçue par l’intégrateur)
  • Un hébergement (géré par un administrateur réseau)

Afin qu’un projet réussisse, chaque intervenant doit faire son travail du mieux possible en tenant en compte du travail de tous les autres. Un rédacteur web peut pourrir le travail du référenceur en bourrant ses textes de mots clés peu pertinents. L’administrateur réseau peut saccager le travail de tous les autres en hébergeant le site sur sa vieille bécane qui traîne au fond du grenier. L’intégrateur peut détruire le travail du webdesigner en ne respectant pas les bonnes polices, les mêmes marges, etc. Et quand un webdesigner propose une charte graphique compliquée à intégrer, avec des concepts techniques sans intérêts qui vont prendre des jours à intégrer, il mets en péril le déroulement du projet, le planning fixé par le chef de projet.

Les webdesigners doivent savoir coder.

Le point fort de l’article initial, c’est la prétention qu’un webdesigner ne doit pas savoir coder pour bien faire son travail.

Beaucoup de concepteurs web utilisent des grilles prédéfinies, par exemple la plus connue : 960 Grid System. […] En respectant ces contraines, cela ne choque personne ? Comment pouvoir fournir un design innovant si avant même de commencer la création le graphiste possède déjà des règles auxquelles obéir ?

Le graphiste doit savoir ce qui est faisable [est] un argument tout simplement anti-innovation. Si l’on connaît les limites, on ne saura pas les dépasser, on essaiera même pas.

C’est sûrement la pire ineptie que j’ai jamais lu. Dis donc, webdesigner, si une grille limite ta créativité, alors est-ce que les 16 777 216 de couleurs d’un écran moderne limitent également ta créativité ? Du coup, tu fais tes maquettes à la main sur papier, afin de ne pas être limité. Est-ce que les polices existantes et les plus courantes sur le web limitent ta créativité ? Du coup, tu t’assures de travailler à la main sur une typographie complète pour chaque projet, comme ça ta créativité n’est pas limitée.

Ce serait totalement absurde de se prétendre peintre si on ne sait pas utiliser un pinceau, et qu’on a aucune notion de mélanges de couleurs. Ce serait tout aussi absurde de se prétendre photographe si on a pas la moindre idée de ce qu’est un appareil photo. Sur le web, la matière première d’une page web, c’est HTML et CSS. Pas Photoshop.

Déjà en juin 2008, David Heinemeier Hansson de 37Signals écrivait un article intitulait Les webdesigners devraient faire leur propre HTML/CSS.

Le web est un monde de contraintes, les matériaux de HTML et CSS se mélangent et donnent lieux à des moyens qui encouragent certains styles. Et être capable de comprendre et se fondre dans ce périmètre est ce qui fait qu’un design semble natif. Les designers qui travaillent directement avec les matériaux plutôt qu’à travers un environnement simulé comme Photoshop ont un avantage distinct pour faire en sorte que ça arrive.

Si vous travaillez sur un jeu Flash ou une campagne media pour présenter une nouvelle montre, vous pouvez vous permettre de mépriser cet avantage. C’est lorsque la prouesse graphique d’une toile totalement vierge, l’approche « le ciel est la limite », est exactement ce que vous souhaitez. Vous voulez des lumières et des paillettes. Faire quelque chose qui soit natif au web n’a pas d’importance.

Mais à l’exception de cette niche, faire du design pour le web revient beaucoup moins à faire quelque chose qui brille, et beaucoup plus à faire quelque chose qui marche. Les décisions du design qui comptent touchent directement aux contraintes des matériaux. Quels éléments de formulaires utiliser. Quelles polices utiliser. Quelle mise en page. Quel déroulement. Ces décisions sont faites pauvrement quand on fait son design à part.

Quand on me demande des exemples de bons designs web, je pense à FacebookLe Bon Coin, ou encore Reddit. Ce sont des bons exemples, car chacun de ces sites remplit parfaitement sa tâche. Mais je suis sûr que si vous présentiez des maquettes Photoshop proches de ces sites à vos clients, on vous rirait au nez. Par contre, si vous avez une version HTML fonctionnelle, où l’on peut cliquer sur les boutons, enchaîner la navigation, vous n’aurez aucun mal à convaincre du bien fondé de vos maquettes., et de la pertinence de votre charte graphique.

Travailler sous Photoshop incite à passer du temps sur des détails visuels, souvent sans importance. En maquettant en HTML, dans un navigateur, on se rends compte immédiatement de problèmes d’utilisation, d’ergonomie, et même de rédaction (désolé, mais personne ne lit sur une maquette JPG). Maxime pense « qu’intégrer ses propres maquettes amène un nivellement par le bas ». Mais qu’est-ce qui est nivelé par le bas ? La partie purement graphique (« les lumières », « les paillettes ») ? La facture faite au client ? Ou l’expérience utilisateur ?

On ne travaille pas pour le client.

A travers son article, Maxime (également entrepreneur) insiste lourdement sur le fait de travailler pour satisfaire son client.

Mais la plupart des choses sont tout de même réalisables, sans non plus passer 3 jours sur une maquette. Il faut simplement avoir un respect du travail, un souci du détail, un souci du client, et un peu de courage bon sang ! […]

Quand le couple graphiste-intégrateur se connaît bien, la séparation entre les deux métiers peuvent même être avantageuse. Cela m’arrive souvent avec Thomas, notre directeur artistique ; il sait que je vais intégrer sa création au pixel près, que je vais harmoniser moi-même les incohérences qu’il a pu laisser, et que je vais me débrouiller pour concrétiser en intégration ses idées créatives et farfelues sans dévaluer la chose par souci de rapidité ou de simplicité. Le résultat ? Des clients heureux.

Voilà encore une idée saugrenue. Si je voulais me contenter de rendre mes clients heureux, je les écouterais et je mettrais de la musique en fond des sites que j’intègre. On ne fait pas un site web pour le client. On fait un site web pour un utilisateur. Un utilisateur est une vraie personne. Un utilisateur a son terminal (ordinateur, smartphone, télévision, …), son entrée (clavier/souris, tactile, …), sa sortie (écran 16/9, 4/3, 72 dpi, 326 ppi, …), sa connexion internet (56k, ADSL, Fibre, Edge, 3G, …). Un terminal à son système d’exploitation (Windows, Mac OS, iOS, Android, …), son processeur, sa carte graphique, … En pratique, vous aurez quasiment autant de configurations possibles que de visiteurs. Quand vous travaillez pour le client, vous rendez 1 personne heureuse. Quand vous travaillez pour l’utilisateur, vous rendez des milliers voire des millions de personnes heureuses.

  1. Paté, le

    +1000

  2. Kerweb, le

    Je suis entière d’accord avec toi. Tu aurais même pu te limiter à ta dernière phrase, elle résume parfaitement tout ;)

  3. Julien C., le

    Excellent article, tout simplement.

  4. ptiswitz, le

    Très bon article.

    Ton approche est pertinente sur le fait qu’un crea doit connaitre les limites liés au support qu’est la page web.

    J’ajouterais également qu’il faut garder en tête que « l’intégration » HTML doit être confié à des développeurs car cela demande de réfléchir à une architecture sémantique au niveau des balises ainsi que métier (interaction javascript). C’est un ensemble de compétences difficilement séparable du pôle développement.

    D’ailleurs, on le remarque de plus en plus avec la disparation de l’intégrateur html au profit du développeur frontend qui couvre un plus large spectre que celui de la construction de maquette html statique.

    En tout cas, il est clair que ces deux métiers/personnes doivent travailler en collaboration. Je dirais même qu’un dev front devrait toujours participer au processus crea en s’assurant de la faisabilité des interfaces produites.

  5. Nukleo, le

    Je suis entièremment d’accord sur le fait qu’un webdesigner doit savoir un minimum coder une maquette OU au moins suffisamment connaître les problèmatiques liées à l’intégration pour ne pas faire une bouillie qui sera un cauchemard pour l’intégrateur. Merci pour l’article :)

  6. Gabriel C, le

    Contenu intéressant et pertinent, mais l’intérêt de l’article est à mon sens terni par des phrases un brin radicales et irritantes du style « des détails visuels, souvent sans importance » ou  » personne ne lit sur une maquette JPG ».

    C’est dommage, ça nuit au plaisir qu’on a d’échanger sainement sur ces problématiques.

  7. anthony, le

    c’est trop ça !
    merci pour cet article qui est plus que clair !

  8. TheGuit, le

    Je trouve cet article autant à coté de la plaque que celui qu’il prétend critiqué.

    Quand tu arrive a dire des choses comme on ne travail pas pour le client, ça révèle bien tout l’état du truc …. Bien sur que si qu’on travail pour le client, même mieux on travail avec. On est la pour écouté ses attentes, le conseiller et répondre au attentes !

    Enfin je reste convaincu qu’un bon web designer n’a pas besoin de savoir coder, de la même manière qu’un design n’a pas besoin d’être dicté par la technique. C’est tout l’art de l’intégrateur de réussir à faire une production technique intéressante qui respecte le travail du designer et d’apporter des solutions nouvelles au problématique de chaque design. Cela dit le design ne doit pas pour autant être une dictature, et l’important du design est le plus ergonomique apporté a l’utilisateur.

  9. Nicooprat, le

    On ne peut qu’approuver, très bon article.

    J’écrivais il y a quelques mois un article sur les avantages du design in-browser… J’aurai dû ajouter « ça forcerait les graphistes (souvent venus du monde du print) à respecter et prendre en compte les contraintes du web dans leurs délires créatifs » :)

  10. Thomas, le

    Ton article est très juste.
    Satisfaire un client, c’est pour moi avant tout le conseiller pour que son site soit le plus réussi en terme de design, de contenu etc …. et ce pour les utilisateurs. Satisfaire un client ce n’est en aucun cas répondre à tout ces exigence.

  11. Cabaroc, le

    Assez d’accord avec Gariel C, à force de vous renvoyer la balle entre graphistes et intégrateurs, ont a juste l’impression que vous faites des critiques en prenant des situations qui vous arrangent. Ton article n’est pas entièrement à jeter mais quand j’arrive à des phrases du genre  » Et quand un webdesigner propose une charte graphique compliquée à intégrer, avec des concepts techniques sans intérêts qui vont prendre des jours à intégrer… » là tu perds toute crédibilité à mes yeux. Je me dis mais c’est quoi ce jugement de valeur ?! C’est comme si je disais « Et quand un intégrateur saccage un design qui répond à la demande de l’utilisateur et du client parce qu’il est feignant… », c’est absurde, si le boulot est mauvais il est mauvais, mais ça n’a rien à voir avec le débat. Tu devrais plutôt partir d’un constat comme celui-ci : Un design pertinent, qui répond à la demande du client (car répondre à la demande du client ce n’est pas dire « oui » à toutes ces requêtes mais bien savoir l’orienter sur les bons choix, là encore tu faisais semblant de ne pas comprendre… enfin bon) et de l’utilisateur mais qui pourtant est plus complexe à intégrer que la moyenne, et là tu pourras essayer de réfléchir aux vrais thème de ce débat.

  12. Cabaroc, le

    Et désolé pour les fautes…

  13. Ced, le

    troll en vue :D

    Complètement d’accord, cela va sans dire, mais surtout très satisfait de :
    « Dis donc, webdesigner, si une grille limite ta créativité, alors est-ce que les 16 777 216 de couleurs d’un écran moderne limitent également ta créativité ? »

    Sans même aller jusque là, si tu veux pas te limiter à tes 960px de ta grille, fais toi plaisir ami graphiste, mais ne vient pas pleurer car 95% des gens ne voit pas ton background de la mort qui tue à 3Mo en 2200 par 1400… On verra combien de clients/employeurs reviendront vers toi à la fin.
    Même en continuant à faire plaisir au client, à la fin, celui-la se rendra bien compte que ça ne sert à rien de le caresser dans le sens du poil si ça ne satisfait pas ses visiteurs…

  14. Le fameux Maxime, le

    Bonjour :) Sympa d’avoir répondu à mon article, même si nous sommes vraisemblablement en désaccord, je trouve l’échange intéressant.

    Une première chose à clarifier tout de même : « des clients heureux » désignent les utilisateurs finaux, les clients de notre client. Après avoir relu ma phrase, j’avoue que, malgré l’utilisation du pluriel, c’était confusant. J’ai d’ailleurs rajouté un EDIT dans mon article pour éviter cette confusion aux prochains lecteurs. Nous sommes tous les deux d’accord que l’objectif, c’est bel et bien l’utilisateur.

    « Quand je lis des articles de non-intégrateurs qui parlent d’intégration »
    Pour info, je suis intégrateur, c’est bien pour ça que j’ai un avis sur la question.

    Tu affirmes que « le design n’est pas la finalité d’une page web ». Je vais peut-être te surprendre en te disant que je suis tout à fait d’accord avec toi. Ceci dit, ce n’est pas pour cela que le fonctionnel doit être moche ! Tu remarqueras que je dénonce les maquettes trop faciles, je ne dis pour autant qu’il en faut de difficile. Le but est simplement de créer quelque chose d’un peu innovant, qui fera plaisir à voir et qui sera rafraîchissant. Il n’y a pas besoin de faire des choses difficiles, mais il faut quand même un certain travail, sinon on se fond dans la masse.

    Tu vois les choses d’une manière un peu trop manichéenne. Si ce n’est pas facile, c’est difficile. Si le graphiste ne sait pas coder, il ne connaît pas son support. La réalité est bien plus colorée.

    « Est-ce que les polices existantes et les plus courantes sur le web limitent ta créativité ? » Oui, clairement. Si tous les sites étaient uniquement en Verdana, bonjour l’indigestion ! Mais bon si tu pense que Le Bon Coin ou Reddit sont de bons designs web, je comprends mieux. Ces sites rencontrent le succès, ALORS ils sont bien designés ? Quel raccourci étonnant ! Je dirais plutôt qu’ils ont rencontré le succès MALGRE le fait que leur design puisse être amélioré. Si leboncoin marche, ce n’est pas parce qu’il est moche, mais parce qu’il est ergonomique et simple. Grosse nuance.

    Le nivellement par le bas est clair, si le graphiste sait qu’il va intégrer derrière, il a tendance à faire quelque chose de pas trop compliqué, au détriment d’une recherche graphique ou ergonomique plus poussée. Si tu penses que le graphisme, c’est des lumières et des paillettes, c’est sûr qu’on va pas aller bien loin. Et côté facture, je pense que c’est l’inverse. On vend un site, et on passe direct en HTML/CSS le plus rapidement possible, avec un design le plus rapide à intégrer, pour être toujours plus rentable. Très peu pour moi.

    Quant à l’article de 37signals, société que j’admire beaucoup d’ailleurs, ils évoquent la vision à l’américaine, le fonctionnel avant le graphisme. C’est un point de vue, mais cela ne veut pas dire que c’est le meilleur. Il suffit de voir le premier commentaire déposé. En fait, ce que je trouve aberrant dans toutes les critiques que tu as formulé sur mon article, c’est qu’on dirait que l’on doit choisir entre fonctionnel et graphisme. Désolé, mais je prends les deux.

    Après voilà, chacun sa vision du métier. Moi je préfère passer un peu plus de temps sur un site pour vraiment créer une expérience pour le visiteur. D’autres veulent juste délivrer du contenu. Cela varie aussi beaucoup en fonction des objectifs qu’on se fixe ; un blog perso et un e-commerce n’auront pas les mêmes enjeux.

  15. Gabriel C, le

    Bonne réponse de maxime … on a trop tendance à opposer et antagoniser les aspects fonctionnels et esthétique d’un site, c’est un biais dogmatique et néfaste. Il est évident qu’un designer qui sait coder (ou tout du moins connaît les bases et rudiments du HTML/CSS) a de plus fortes chances d’être efficace et compétent dans son écosystème de travail, mais ce n’est absolument pas une nécessité.
    Quand Nicooprat parle de « délire créatif » sur un ton péjoratif, ça me gêne car un tel délire peut être la différence entre un design honnête et un site génial qui rafflera des awards.
    Et à force de s’enfermer dans la technique (cf le design-in-browser qui consiste à se couper sciemment d’une tonne d’outil favorisant la qualité visuelle) on oublie l’étincelle esthétique.

  16. sacripant, le

    Éternel débat.
    Deux visions pour un même objet.

    Attention caricature :

    Le designer voit souvent un site comme un support de communication pour son client (au singulier), une plaquette en ligne. Cette communication implique quelques contraintes graphiques : être à l’image du client, plaire à la/les cible(s), réussir à faire ressortir les particularités de son client par rapport à sa concurrence, etc.

    L’intégrateur va aborder un site sur son aspect ‘efficacité’ : efficacité au niveau de l’expérience utilisateur, optimisation du code (c’est koi ce background de 1mo ??) etc. je ne détail pas, l’article le fait très bien et se limite à cela.

    Du coup, ça clash. et ça va continuer un moment. Je crois que le terme de ‘concept graphique’ parait pur ‘masturbation intellectuelle’ pour certains intégrateurs.

    Pour faire monter les stats de votre blog, faites un article sur les intégrateurs fainéants qui refusent de respecter une création originale, ou sur ces imbéciles de (web)designer qui refusent de comprendre que le web n’a pas les mêmes contraintes que le print. À tous les coups on gagne.

    Je suis pas sur d’avoir bien suivi le coup de la grille 960 ? Si j’ai bien compris, dans c’t’histoire c’est l’intégrateur qui veut imposé sa grille au designer ?
    Mon point de vue :
    – les grilles c’est très bien, indispensable dans beaucoup de cas.
    – Mais c’est du concept graphique que découle la grille. La grille est une résultante. Elle n’a pas forcement a être là en amont.
    – Donc c’est au designer de livrer la grille à utiliser à l’intégrateur.
    – écrire son grind.css, ça prend max 30min (parfois 5). je ne vois pas pourquoi un intégrateur imposerait sa grille ?

    J’suis designer ET intégrateur, comme ça je rigole bien quand je vous lis.

  17. spyesx, le

    Super article et merci à Maxime d’être venu commenter. Je suis dev-front aussi et je dois avouer qu’un graphiste qui connait un peu de HTML/CSS évite de concevoir une page web comme une affiche print. Je ne pense pas qu’un graphiste qui connait quelques limitations techniques sera bridé bien au contraire. D’ailleurs il me semble qu’une des meilleures techniques de création c’est justement se fixer des contraintes.

    Sinon si comme Maxime on se retrouve avec des graphistes qui font des choses « trop simples »… je suis désolé mais ça ne vient pas des contraintes ça vient simplement d’un peu de fainéantise ou pire l’approche créative et production (Temps de réalisation, esthétique…) qui sont dirigées par le client…

    Je bosse avec pas mal de graphistes qui connaissent peu le HTML mais c’est bien pour ça que le métier de concepteur existe. Enfin je crois…

  18. Sublimeo, le

    Ca fait plaisir de lire ce type d’article : tous les designs sont intégrables par une équipe compétente et qui travaille en synergie !

    Après, je différencie graphiste et webdesigner qui sont 2 métiers différents, notamment par le fait que le webdesigner prend en compte les notions d’ergonomie et d’expérience utilisateur.

  19. charleslp, le

    J’étais assez étonné que tu twittes l’article initial il y a quelques jours sans le commenter… :D

    Personnellement comme exemple de bonne maquette (c’est dur d’entendre parler de « design » comme d’une chose) je n’aurais pas choisi Facebook. Peut-être Twitter à la limite ? Pas évident.

  20. morphine, le

    Je suis intégrateur. Ce n’est pas tout à fait le débat, mais moi je trouve que les graphistes se limitent justement !!! Actuellement pas mal de site sont « plein écran » ou du moins avec une « mise en page fluide ». (possible aussi de définir en javascript, sans trop ce prendre la tête une taille maximum). Très peu le fond et tous ce limitent à 960px, parcequ’ils ont cette habitude, et ne veulent pas réfléchir 10 secondes de ce qu’il se passe quand çà s’agrandit ou diminue.

    Cependant les exemples que tu donnent sont de la provocation… c’est archi-naze et même si je me sert du « leboncoin » chaque fois que j’y vais, je me dis que c’est vraiment exagéré. Oui on s’y retrouve, oui çà se lance vite, oui l’intégrateur y a passé 1 journée. Mais c’est laid et pas agréable !!! Quand à Facebook, c’est nul, j’ai jamais compris pourquoi des liens avec le même intitulé envoyé des pages différentes. Twitter est nettement plus logique et simple.

    Aussi pas d’accord avec ce point : « On ne travaille pas pour le client » ; c’est un doux rêve loin des réalités. Quelque fois (rarement) ma société a dû faire une charte avant l’acception définitive. Franchement, même en proposant un site genre « leboncoin » entièrement finit, cela m’étonnerais que le client nous choisisse. Cela me fait penser au film « P.R.O.F.S. » où à la fin, Bruel se met à rêver d’une école sans élèves. Attention, je ne dis pas, moi aussi j’aimerais faire des sites pour moi…

  21. Kaelig, le

    Graphistes web, au lieu d’apprendre à coder vos designs, apprenez déjà les rudiments de la psychologie cognitive, de l’ergonomie et de l’architecture d’information. Savoir ce que permet le code est important mais de là à savoir s’en servir… C’est un métier.

    L’architecte connait les contraintes de résistance des matériaux et a des bases en sismologie. Ce n’est pas pour ça qu’il a besoin d’apprendre le métier de maçon.

  22. Rémi, le

    Merci à tous pour vos réactions et commentaires. Je m’attendais à voir des réponses, mais je suis surpris d’avoir autant de réponses positives. Du coup, je vais répondre plutôt à mes contradicteurs.

    @Gabriel C : Désolé pour les petites piques qui traînent dans l’article. Mais quand je dis que “personne ne lit sur une maquette JPG”, c’est que personne ne lit sur une maquette JPG. Je ne pense pas être le seul à corriger des tonnes de fautes d’orthographe en intégrant des pages. Ou alors à signaler au chef de projet/graphiste que les libellés des boutons n’ont aucun sens. Ce genre de détails, on s’en rends compte dans un navigateur, quand on a une page “vivante” entre les mains. Pas sous Photoshop. Pas sur un JPG.
    Ensuite, dans ton deuxième commentaire tu parles de “la différence entre un design honnête et un site génial qui rafflera des awards”. Si tu travailles avec en tête de “raffler des awards”, on n’a vraiment pas la même philosophie du métier. Je conchie les FWA, AWWWARDS, et autres galeries élitistes-branlettes, qui ne font que s’attarder sur un design graphique, et contribuent à ce milieu nombriliste du webdesign.

    @TheGuit : Le web est suffisamment grand pour tout le monde. En 2011, il y a encore des gens qui intègrent des sites en tableaux ou qui mettent des gifs animés qui clignotent partout. Dans 10 ans, il y aura encore des gens pour faire des sites en full flash, et il y aura encore des designers qui ne sauront pas coder.

    @Maxime : Merci d’avoir pris le temps de répondre ici ! Je suis content de voir qu’on est d’accord sur certains points (la notion d’utilisateur notamment). Par contre, je réagis encore fortement par rapport à certains points.

    Tu sembles obsédé par la recherche d’un design “innovant”, qui ne se “fonde pas dans la masse”, et pourtant tu sembles avoir énormément de mal à reconnaître la valeur de chartes graphiques de sites comme LeBonCoin ou Reddit. Fais un test : prends 100 sites, en miniature de 100×100, et essaie de reconnaître LeBonCoin. Il y a des chances que tu le retrouves très facilement et très rapidement. Maintenant fais le même test avec le site de ton agence (désolé, ça n’a rien de personnel).

    J’aime beaucoup mes exemples de sites dont je trouve le design réussi, car je les trouve à la fois fortement identitaires, engageants, et impactants. Je suis totalement en désaccord avec toi quand tu dis que ces sites ont connu le succès “MALGRE le fait que leur design puisse être amélioré”. Le cas de Reddit est particulièrement intéressant puisque le site permets à chaque communauté d’appliquer ses propres styles. Je t’invite à comparer par exemple /r/apple, /r/firefly et le thème par défaut. Trois “sites” au contenu et fonctionnement similaires, mais avec une approche graphique différentes. Je suis quasiment sûr que tu préfères la version Apple, et qu’en lui proposant les 3 versions, un client ferait le même choix. Pourtant, c’est la version la moins fonctionnelle, et la plus difficile à utiliser (le moins de contraste et de couleurs y étant pour beaucoup).

    Ensuite, je pense que tu as une mauvaise vision du travail de design en HTML/CSS (peut-être faute d’avoir déjà essayé ?). En travaillant ainsi, on ne gagne pas de temps (ou très peu). Mais le temps qu’on laissait à un webdesigner uniquement sous Photoshop, on le lui laisse sous son navigateur. Le but n’est donc pas de gagner en rentabilité, mais en qualité. Et encore une fois, il ne s’agit pas d’une qualité graphique (qui sera relativement égale à celle passée uniquement sous Photoshop), mais bien en qualité globale (ergonomie, expérience utilisateur). Tu dis “préfèrer passer un peu plus de temps sur un site pour vraiment créer une expérience pour le visiteur”, mais je ne pense pas que ça arrive sous Photoshop. On ne peut pas parler d’expérience utilisateur pour un site web avant d’avoir une page fonctionnelle dans un navigateur. Le moindre chargement, le moindre reflow du navigateur va largement influer sur la perception. Tout ceci est extrêmement subtil, et on rentre dans de la psychologie cognitive. Mais une chose est sûre, l’expérience utilisateur ne se crée pas sous Photoshop.

    Enfin je pense que tu as une visions très naïve de ton métier quand tu dis “qu’on dirait que l’on doit choisir entre fonctionnel et graphisme. Désolé, mais je prends les deux.”. Désolé, mais, tu rêves. Le design web est une histoire de balance entre tous les métiers concernés (cf mon article). Quand tu mises plus sur une tâche, tu perds plus sur une autre. Quand tu choisis de négliger l’intégration au profit du graphisme, tu perds en expérience utilisateur.

  23. Pauland, le

    Tu as oublier de ponctuer ta réponse de « Et des bisous dans ton coeur bien sûr » ! :D

    Et sinon les liens sont foireux ;-)

  24. Gabriel C, le

    @ Rémi
    Encore une fois, le fond de ton discours est intéressant mais je regrette vraiment le mode d’expression généralisant, simpliste et radical qui l’entoure.

    Tu fais le choix d’écarter sciemment et totalement la problématique du design en la réduisant à la seule ergonomie et architecture de l’information, c’est ton choix. Il est respectable.
    D’autres, comme Maxime (que je rejoins totalement), n’ont pas cette vision des choses et cherchent à être performants dans les deux domaines. C’est une attitude louable, ouverte et exigeante, qui ne mérite pas d’être balayée par un condescendant « tu rêves », comme tu l’as fait plus haut.
    C’est entièrement et extrêmement faisable, et les sites d’awards (que tu vomis avec le sens de la mesure qui semble caractériser tes écrits :)) contiennent parmi leur listes des sites qui allient ces deux compétences. Juste parce que tu ne veux pas le faire, ne veut pas dire que c’est impossible.

    Parmi les sites que tu montres en exemples, Leboncoin.fr est une horreur aussi bien d’un point de vue charte graphique et design que navigation et ergonomie (j’ai déjà vendu des trucs dessus, c’est un cauchemard). Sa charte n’est reconnue que parce que c’est un site gratuit avec un marché très porteur et populaire, c’est tout. Les gens reconnaissent dans leboncoin.fr le « site gratuit pratique pour vendre », pas « le super site trop beau ».
    Je suis un peu triste de voir que des gens voient dans cette plateforme (aussi confortable et engageante qu’une porte de prison) le futur de web, son essence et son salut.

    Conclusion : je respecte ta vision du web et de son industrie, mais je regrette sincèrement les raccourcis que tu prends à longueur de post ainsi que les déclarations à l’emporte-pièce sur tout et son contraire. Ce n’est pas comme ça que tu sensibiliseras les gens, designers ou non, à l’importance de l’ergonomie par rapport au design.

    PS : je dois vivre dans un monde parallèle, car ça m’est arrivé plus que de raison de corriger des fautes directement sur un jpeg ;)

    Gabriel

  25. flo, le

    …Ce débat ne finira donc jamais…

    Evidemment cet article me fait réagir également…

    « Une page web, c’est :
    Une idée, une volonté (émise par le client)
    Un cahier des charges (défini par le chef de projet)
    Un rédactionnel (réalisé par un rédacteur web)
    Des préconisations de référencement (émises par un référenceur)
    Une charte graphique (définie par le webdesigner)
    Un développement (codé par le développeur)
    Une intégration (conçue par l’intégrateur)
    Un hébergement (géré par un administrateur réseau) »

    Si à chaque site que vous créez vous avez tous ces intervenants rangés dans chaque case… eh bien ça fait un site tout plat, voire sans âme…

    La création d’un site DOIT générer un travail d’équipe. Lors de l’établissement du cahier des charges, fort heureusement, le chef de projet n’est pas seul : le WD et la technique (et rédacteur si le client en a les moyens) interviennent dès cette étape pour définir et évaluer le rapport concept/faisabilités techniques.

    Sans savoir coder, un BON WD grâce aux échanges avec intégrateurs et dèv saura ce qu’il faut ou ne pas faire dans sa maquette.

    La communication contribue à ce que chacun fasse de nouvelles prouesses conceptuelles ou techniques, et donc à la création d’un site cohérent, efficace, et dont le positionnement visuel est adapté…

    Après c’est visiblement mon côté « bisounours » qui ressort…

  26. STPo, le

    J’arrive après la bataille, comme Cabaroc (et même si j’aurais à redire sur plusieurs de tes positions) je pense que ton article n’est pas dénué d’arguments pertinents sur ce débat (usé jusqu’à la corde au passage), cependant je te conseille à mon tour d’éviter les sentences péremptoires qui ruinent totalement ton argumentaire telles que :

    > Je conchie les FWA, AWWWARDS, et autres galeries élitistes-branlettes, qui ne font
    > que s’attarder sur un design graphique, et contribuent à ce milieu nombriliste du
    > webdesign.

    Les awards ne sont pas un but pour 99% des designers je te rassure, ils ne font que sanctionner a posteriori un travail soigné. La façon que tu as de caricaturer systématiquement un milieu que visiblement tu connais mal est assez dommageable pour la crédibilité du reste de ton propos, et je le regrette.

    Bref, les intégrateurs parlent aux intégrateurs du fond de leurs bunkers, circulez rien n’a changé.

  27. PowerMugen, le

    Juste pour rebondir (parce que j’aime le trampoline) :  » la disparation de l’intégrateur html au profit du développeur frontend » cette phrase me fait rare car en vérité c’est deux termes qui désignent le même métier hein.
    Sinon je trouve le débat inintéressant, je suis intégrateur et ce que j’aime dans ce métier c’est pouvoir discuter avec les graphistes et les devs (backend ahah) pour réaliser un site de manière optimale.

  28. david, le

    « Sur le web, la matière première d’une page web, c’est HTML et CSS. Pas Photoshop. »

    Bien dit !

  29. Katia, le

    Bonjour,

    Personnellement je suis à la fois graphiste ET intégrateur.
    Je ne pense pas que tout le monde devrait maitriser à 100% les 2 métiers car ils sont très différents.

    Cependant un site internet est un travail d’équipe et il me semble nécessaire de connaitre les bases des corps de métier avec lequels on travaille.
    On ne donne pas un fichier 72 dpi rvb à son imprimeur en lui disant de se débrouiller!

    Connaitre les bases du travail du programmeur pour le graphiste et inversement, permet de doser créativité et ergonomie pour l’utilisateur final.
    Mettre la priorité à 100% sur l’un des 2 aspects me semble une hérésie car effectivement, on y perd en qualité de l’autre côté.

    Le tout est de savoir équilibrer les deux! C’est ça (+ l’équilibre des autres aspects que vous avez tous évoqués) qui fait un site réussi!

  30. Gabriel C, le

    « Dans l’architecture, la matière première d’un bâtiment, c’est la brique et le ciment. Pas les plans ». Faut-il pour autant se passer de plans ;) ?

    [Oui je sais, l’analogie architecture/design fait débat :D]

  31. david, le

    @ Maxime

    « Le graphiste doit savoir ce qui est faisable. Un argument tout simplement anti-innovation »

    Il y a un dicton qui dit :  » il faut connaître les règles pour mieux les transgresser. »

    exemple : la règle des tiers en photographie. Tout photographe la connait et pourtant il est important de ne pas toujours s’y cantonner.

  32. MrRayures, le

    Maintenant que c’est plus calme je viens donner mon avis sur la question ^^).

    En tant que webdesigner/intégrateur j’avoue me brider parce que je connais la finalité et ce qu’il est possible de faire donc forcement on prend des chemins connus.
    De la rien ne me choque a dire qu’un créatif (Attention pas Webdesigner, pour moi lui doit avoir une connaissance de son environnement de travail plus pointu sans pour autant savoir intégrer) n’a pas à savoir intégrer, même si il va pondre un truc complétement tordu c’est à moi derrière de trouver les solutions afin de l’intégrer dans les standard du web. J’aime ça, c’est mon métier et j’ai pas envie qu’on me mâche le travail. Sans créatif on va se retrouver avec un web standard tout fade.

    Bon je vous vois venir avec vos « oui mais… ».
    Pour tout site il y a une demande à la base et suivant cette demande des compétences sont mises à profit pour y répondre. C’est là qu’il faut bien choisir le chemin que l’on va prendre :
    Certaines demandes n’auront pas besoin d’une DA poussée et on pourra directement passer par le Webdesigner, l’intégrateur… Pour d’autres il s’agira de créer la surprise et là la créa prend une place prédominante mais n’empêche pas au DA, Webdesigner , intégrateur… de travailler ensemble

    En fait en, écrivant ceci j’ai l’impression qu’il s’agit avant tout d’un manque de communication entre les différent pôle de créations. L’intégrateur se sent floué d’être en milieu de chaine sans savoir ce qui se passe en amont et reproche a ceux en début de chaine de ne pas faire appel à lui plus tôt.
    On reproche aux créatifs de n’avoir rien à faire de se qui se passe en bout de chaine mais quand on lit ceci :

    > « Travailler sous Photoshop incite à passer du temps sur des détails visuels, souvent sans importance »

    je me dit que c’est pareil du point de vu de l’intégrateur.

    Pour moi au final c’est plus une problématique de communication que de untel doit savoir faire ceci…

  33. Nico, le

    La vision est intéressante, toutefois, elle fonctionne parfaitement quand le client est raisonnable et écoute ce qu’on lui dit : l’important n’est pas de lui faire plaisir à lui, mais à ses clients. Ce que je ne discute pas d’ailleurs, c’est le bon sens absolu !

    Mode cynique activé :

    Toutefois, si je peux me permettre un bon trait de cynisme : quand tu te coltines un client chiant, qui ne veut pas écouter, que tu lui répètes 20 fois que (par exemple) son idée de mettre du texte en marquee n’est PAS une bonne idée, et qu’il insiste encore, à la fin, je ne vois pas l’intérêt de lutter contre quelqu’un de borné.

    C’est méchant, mais si le client veut de la m…. à tout prix en dépit du bon sens… quand tu sais que le client ne va pas céder et que tu vas perdre 3 H pour rien, à la fin, tu ne discutes plus, tu gagnes 3H.
    Le plus dur étant d’expliquer pourquoi son site ne figure pas dans tes réalisations.

    Ok, les clients comme ça sont heureusement une minorité.

    > Quand vous travaillez pour le client, vous rendez 1 personne heureuse. Quand vous travaillez pour l’utilisateur, vous rendez des milliers voire des millions de personnes heureuses.

    Tu oublies un point : tu travailles avant tout pour celui qui paie.

    Fin mode cynique activé.

  34. Maxime, le

    Comme dit flo : « Sans savoir coder, un BON WD grâce aux échanges avec intégrateurs et dèv saura ce qu’il faut ou ne pas faire dans sa maquette. »

    C’est tout à fait ce que je pense et ce que j’ai voulu transcrire dans mon article. On ne demande pas au chef de projet de savoir coder, pourtant c’est lui qui rédige les specs fonctionnelles. Il ne sait pas coder, mais il possède tout de même une connaissance globale, sur laquelle il peut demander des précisions à son développeur lorsque nécessaire. Pour moi, c’est pareil entre un graphiste et son intégrateur.

    La fusion entre l’intégrateur et le graphiste web, c’est la tendance. Mais ce n’est pas parce que cela que c’est une bonne chose. On en parle ici, de 35’38’ jusqu’à la fin de la vidéo : http://www.paris-web.fr/2010/programme/css3-photoshop-avenir-web-designer.php

    Comme dirait Mark Twain « Whenever you find yourself on the side of the majority, it is time to reform (or pause and reflect). »

  35. pascal weber, le

    En qualité de graphiste/intégrateur j’approuve à 100%. Le design n’a jamais consisté à faire de l’art. Lorsqu’on dessine une chaise, on est contraint par les matériaux, les procédés de fabrication (et les coûts liés à tout ça) etc et surtout par l’usage final : on est censé pouvoir s’assoir sur la chaise ! Il en va de même pour le design web…

  36. Gabriel C, le

    Entre « design = art » et « design = parasite dégueulasse qui souille nos belles intégrations », on peut trouver un juste milieu, non ?

  37. pascal weber, le

    @gabriel C : Je n’ai jamais écarté le design. Pour moi le graphisme d’un site est aussi important que la validité du code, l’accessibilité etc. C’est un tout. Je rappelle simplement que le design c’est pas de l’art, c’est une réponse visuelle à un certain nombre de contraintes : ergonomie, lisibilité, architecture de l’info, accessibilité etc… ET graphisme et image de marque. La première fonction du design est de servir l’utilisateur et de mettre l’information en valeur.

    Je suis d’autant plus convaincu qu’un site doit être beau et avoir une personnalité graphique que je suis graphiste avant tout et que j’en suis venu à l’intégration par la force de choses. Donc mon propos n’est pas celui d’un intégrateur qui jette le graphisme mais celui d’un graphiste qui reste à sa place : artisan au service d’un projet et non artiste.

    Ceci dit le support web est un espace de création génial et rien n’empêche d’imaginer des « concept sites » magnifiques (le Moma a d’ailleurs créé à juste titre une section consacrée au web en tant qu’espace de création artistique !). L’innovation et l’avant-gardisme ont leur place sur certain projets, mais pas tous… Et même sur un projet blindé de contraintes ou la part « créative » est limitée, il reste toujours un espace où les idées du designer vont faire la différence, un détail ici ou là : le rythme vertical du texte, les blancs tournants, le choix des typos, la proportion des blocs, etc. Tout cela participe de l’attractivité d’un site, du plaisir et de la facilité qu’éprouve l’utilisateur.

    Je lisais plus haut un commentaire qui disait aux designers de s’intéresser un peu à l’ergonomie, l’architecture de l’information. Je crois que l’auteur de ce commentaire se trompe de cible : tout cela est au coeur du design ! C’est ce qui fait la différence entre par exemple un produit Apple (conçu par de « vrais » designers) et certains produits concurrents qui passent à côté de l’objet essentiel du design : l’utilisation. Rappelons que l’exercice de base du designer consiste à prendre un objet usuel et à se poser un simple question : « comment améliorer l’utilisation de cet objet ? »

    Un avion doit voler, un bateau doit fendre des tonnes d’eau, un iPod doit pouvoir s’utiliser d’un doigt : la fonction est le design. Les webdesigners que tout le monde s’arrache ne sont pas ceux qui font de jolis bandeaux mais bien ceux qui conçoivent des interfaces graphiques évidentes. Et l’évidence, c’est pas si …évident !

    ;-)

  38. yop, le

    Quand je compare les resultats obtenus aux maquettes, j’ai juste de la peine pour les internautes…
    Ce n’est pourtant pas sorcier d’admettre que la technique est au service du fonctionnel et de la créa. Quand les dev et les integrateurs auront franchis ce pas l’internet aura fait un pas en avant.