Il y a eu un sacré paquet d’articles sur l’utilisation de Photoshop pour le web ces derniers mois. À l’heure où l’on est supposé épouser une diversité incroyable d’appareils, je suis convaincu que le design sous Photoshop n’a plus vraiment sa place.
Je crois que les discussions ont commencé suite à cet excellent article de Brad Frost en janvier dernier sur « L’ère post-PSD » :
Tout au long de ma carrière, j’ai vu des graphistes immensément talentueux perdre une montagne de temps à créer des maquettes complètes de ce à quoi un site web pouvait ressembler. On pousse des pixels, on sue sur des détails, les pages sont imprimées, accrochées sur des murs, et présentées à des clients. Les clients braillent leurs retours, les graphistes exécutent. Ils répètent cette danse jusqu’à ce que tout le monde soit content (ou jusqu’à ce que personne n’en ait plus rien à faire, ce qui arrive plus souvent que vous ne le croiriez). Et seulement à ce moment ces sacro-saintes maquettes sont transmises (ou plutôt balancées) aux développeurs pour les construire.
C’est un processus de plus en plus pathétique qui a de moins en moins de sens dans ce monde et cette époque multi-appareils. Je ne plaide pas pour abandonner complètement Photoshop et faire du design uniquement dans le navigateur (ils sont où déjà les modes de fusion dans les outils de développement de Chrome ?) mais plutôt pour une meilleure compréhension de comment utiliser Photoshop pour du web design moderne.
Je pense que « pathétique » est le bon mot. On vient de passer les vingt dernières années à tenter de faire du print sur le web. Il est temps que ça change.
Afin de palier aux faiblesses techniques de Photoshop, certains prêchent l’utilisation d’autres logiciels, comme Sketch par exemple. C’est déjà un bon premier pas pour s’éloigner du Bitmap de Photoshop vers du vectoriel, plus proche de la nature du web. Mais à chaque fois, la réaction d’une partie de la petite communauté de Directeurs Artistiques sur Twitter est la même : « Comment osez-vous nous imposer un logiciel pour faire du design ? Nous on ne vient pas vous dire dans quel logiciel travailler. » C’est touchant, mais c’est pourtant exactement ce qui se passe.
En travaillant sous Photoshop, vous imposez à toute votre chaîne de production d’en faire autant. Parce que le format PSD est une véritable abomination, Adobe s’assure à chaque mise à jour qu’il reste inutilisable de manière fiable sous tout autre logiciel (coucou les dossiers de calques qui sautent dans Pixelmator ou Gimp). Photoshop est aussi un outil particulièrement atroce à utiliser pour de l’intégration. Certains plugins comme CSS Hat ou Slicy (anciennement Layer Cake) tentent de rendre la tâche moins pénible, on est encore loin d’un véritable outil pensé pour de l’intégration. Et même si des logiciels comme Sketch améliorent cette situation, je ne suis pas sûr que remplacer Photoshop par un autre logiciel propriétaire ne soit la solution.
J’aime bien la vision de Ryan Singer abordée lors d’une séance Play by Play sur le prototypage d’interface : « Photoshop est juste un outil — de la même manière qu’un croquis — pour retirer le doute sur une idée. »
Que ce soit pour de l’intégration ou du design, j’utilise Photoshop ou Pixelmator comme si j’étais dans une épreuve de Fort Boyard : une fois rentré, mon but est d’en sortir le plus rapidement possible avec la réponse à ce que je suis venu chercher.
Il y a quelques années on faisait des sites complets en Flash. Aujourd’hui on maquette encore des sites complets sous Photoshop. Il est temps que ça change. Comme dans le cas des pré-processeurs, je pense que le problème n’est pas l’outil qu’on utilise, mais ce qu’on en fait. L’après Photoshop n’arrivera qu’une fois qu’on se sera débarrassé de cette vision print du web.
Nico, le
Là où je bosse, les graphistes bossent sous Illustrator, on a d’ailleurs fait des essais d’exports en SVG, et je dois reconnaître que le jour où SVG sera correctement supporté partout (autrement dit le jour où on dégage les vieux IE), ça va vraiment être sympa ! :) (eux-mêmes m’ont dit que c’était plus simple à l’export, sans compter les autres avantages : retina-ready, poids, etc.)
Typiquement, pour les maquettes, à force de discuter avec mon graphiste chéri, il sait directement ce qu’il n’a pas besoin d’exporter… au pire s’il a un doute, une discussion de 5mn suffit à le lever.
Ceci dit, je vois encore beaucoup de maquettes arriver sous Photoshop, principalement des agences de comm’ très « print » et pas très « web design ». Quand à parler responsive, là c’est une autre dimension qui leur est étrangère.
akkolad, le
« pathétique » rien que ça…
Qu’on me présente un outil qui rivalise avec la puissance de Photoshop (sur windows ou linux) ! (et pas Illustrator please !!!)
Personnellement, Photoshop et quelque plugins tels que CanLinkIt / CSS3Ps / Enigma64 / Corner Editor / dmonzon tools, et je fais ce que je veux.
Encore un article sur le design d’htumeuleu sur le « design » qui n’a pour moi aucun autre but que de troller : il n’y a aucune réponse d’apportée (hormis éventuellement utiliser Sketch = super !)
Jérôme, le
Je suis complètement d’accord avec l’ensemble de l’article.
Cependant le client a besoin de se projeter dans son projet.
Ce dernier souhaite le plus rapidement possible obtenir un visuel de son site pour avoir un rendu « définitif ». Un zoning parle à peu de personne et si on zappe l’étape de la maquette et qu’on passe directement au dev. il y a 95% de chances pour qu’un quiproquo s’installe sur les features ou autres.
Il est clair que PhotoShop n’est pas adapté pour le web, j’en souffre tout les jours (ne parlons pas de la création d’appli mobile, par pitié). Cependant il faut bien une outil pour permettre au webdesigner de faire leur travail et répondre ainsi à la demande du client.
Gaël, le
Photoshop n’est pas inadapté pour le web, et ce n’est pas l’outil privilégié pour le print non plus.
On peut travailler du vectoriel dans Photoshop ( le vrai manque est l’export SVG pour le moment ).
On peut inclure des fichiers, à l’instar d’un bon vieux include php ( http://www.kloh.fr/creer-plusieurs-pages-avec-photoshop-253 ) : sur mes maquettes j’ai un header.psd et footer.psd inclus dans le home.psd par exemple.
La seule boîte « Infos » est un gain de temps incroyable pour l’intégration.
Le problème ne vient pas de Photoshop, contrairement à ce que laisse entendre cet article. Pourtant je suis tout à fait d’accord avec ce discours, mais sur le plan des méthodologies de travail : c’est effectivement pathétique de « danser » lors d’allers-retours interminables, mais le logiciel choisi par le graphiste pour faire son travail n’a pas à être remis en question. Il fait son travail comme il l’entend.
Dans les faits – et au sein de cet article – la seule faille que j’y vois est le cas ou le graphiste ne s’occupe pas des exports et optimisations d’images, et force par la même l’intégrateur à utiliser Photoshop lui aussi. Je considère ça comme un manquement du graphiste web, qui devrait – à mon avis – livrer les visuels dans un format, un poids et des conditions corrects (et libre à l’intégrateur des les sur-optimiser avec le logiciel de son choix, par exemple).
Je suis peut-être Bambi (je suis graphiste et intégrateur, donc..) mais pour moi le problème n’est absolument pas Photoshop mais bien les workflows qui ne sont plus adaptés aux contraintes du web actuel et à venir.
Adaptez vos méthodologies de travail, les outils s’imposeront d’eux-mêmes.
Et vindiou, l’écosystème de l’intégration web ne devrait pas tenter une révolution anti-photoshop : intégrateurs, expliquez vos besoins et votre méthodo idéale dans votre boîte, et cherchez à améliorer le workflow global plutôt que changer l’outil du graphiste. Car ça aussi, c’est pathétique.
Cabaroc, le
Ce n’est pas parce qu’on utilise photoshop qu’on a une vision print du web. Photoshop à la base n’était même pas fait pour faire du graphisme papier, c’était pour retoucher les photos.
Photoshop n’est pas un bon outil pour faire du web tout simplement parce qu’il n’est pas destiné à ça. Ça n’a rien à voir avec la nature du web. Les pro s’en servent, à tort, pour faire du web parce que les processus de travail nous ont obligé à travailler avec les mêmes fichiers que tous le monde. Mais ce n’est pas en claquant des doigts qu’on va dire à sa boîte « Eh, je change de logiciel, les gars ! ». Adobe s’est adapté tant bien que mal en ajoutant toujours plus de fonctionnalités à Photoshop pour le web. Mais c’est devenu une usine à gaz dont chacun exploite les 10 % qui l’intéresse.
L’outil qui est en pensé pour le web, il existe, il s’appelle Fireworks et pourtant personne l’utilise pour les raisons citées plus haut. Résultat, il va disparaitre. Ce n’est pas qu’une question de moyen mais aussi de choix que fait la communauté pro.
benjamincrozat, le
C’est un peu radical. Étant développeur et graphiste je m’en fiche, mais arrêter Photoshop en webdesign c’est mettre au chômage pas mal de gens qui ne savent même pas ce qu’est une balise HTML. (Et y en a un paquet.)
Mathieu, le
@benjamincrozat, s’ils ne savent pas ce qu’est une balise html, ils n’ont pas vraiment leur place dans la production d’un site web non ? Qu’ils fassent du print.
Hervé, le
@Cabaroc : +1000 pour FireWorks. Dommage que les gens ne soient pas plus curieux, c’est vraiment le top (mais faut oser y passer un peu de temps et faire quelques tutoriels) pour de la maquette web (ne serait-ce qu’avec la notion de symboles reprise de Flash).
@Mathieu : bien d’accord aussi, pour faire du web, ça me semble indispensable de s’intéresser un minimum aux techniques HTML/CSS/JS, surtout compte tenu de l’évolution rapide de ces dernières.
mulk, le
@Mathieu : »…Qu’ils fassent du print. »
Un peu rude là…Je pense plutôt que cela dépend du comportement de travail de « ces personnes ». S’ils sont en plein « Dunning-Kruger » et qu’ils n’adaptent pas leur « workflow » et leur approche ouais, là je suis d’accord, qu’ils fassent du print…
Par contre, j’en connais quelques-uns, qui même s’ils ne connaissent rien au HTML, font super attention avec leurs maquettes et viennent demander conseil et validation à chaque étapes importantes de création de celles-ci.
Perso, je pense que la solution vient avec les échanges et le travail collaboratif. Avec un bon workflow basé sur ces principes, même un graphiste « print » qui fait tout sur ‘Toshop, a sa place dans un projet web. S’il est impossible de mettre en place un système d’échange, de partage de connaissance dans un projet, c’est qu’il y a problème côté gestion de projet ou management (ou alors y a des moutons noirs dans l’équipe qui ne se remettent pas en questions..).
Même si on est pas des bisounours, je crois fermement que travailler chacun dans son coin (le graphiste fait sa maquette dans ‘Toshop, le Dév monte son back-end à sa sauce, etc..) et balancer le travail à la tronche de l’autre est voué à l’échec. Genre: « tiens, c’est la maquette du site, je la veux (sic!) au pixels-près, tu te démerde pour monter ça, le client à déjà validé! »… la question est: comment cela se fait-il que l’intégrateur n’ai pas été inclus dans le processus créa’ avant la soumission du résultat au client ??
En tant qu’intégrateur (ou dév front-end, je sais plus), on est déjà des sales tronches à la base, mais reprocher aux graphistes-print-adobe-guru qu’ils ne changent pas leur outils/méthode/workflow/approches alors que l’on pourraient également arrondir les angles de notre côté… pfff, c’est nul!
Mathieu, le
Comme quoi l’on constate toujours que les points de vue les plus matures sont les points de vue les plus raisonnés. Et que balancer des accusations sous l’égide d’une pseudo-vérité ne fait absolument rien avancer. Le dernier commentaire de mulk clôt à mon sens très largement le débat : avec de la communication, de la collaboration, de l’écoute et, surtout, de la remise en question personnelle associée à une bonne dose de vraie bonne volonté, on peut abattre pas mal de murs.
mulk, le
« on peut abattre pas mal de murs. » -> ou pal mal de cons aussi ^^
gcyrillus, le
Dommage pour Fireworks !