Faut-il oublier Photoshop pour le WebDesign ?

A mes heures perdues je scrute le web, passant de blog en blog en lisant des tonnes d’articles autour de la création de site web, de WebDesign et de ressources graphiques. Beaucoup de personnes sont soulevées la question de la création de maquettes web directement en CSS, zappant alors tout bonnement la phase de création sous Photoshop (ou d’autres logiciels graphiques)... Et effectivement, cela m’est déjà arrivé de travailler de la sorte sur quelques projets pour moi ou mes clients. Mais quelles sont les différences réelles dans notre travail ?

La création d’une maquette avec Photoshop propose plusieurs avantages : la réalisation de la maquette ne se fait que sous un seul logiciel, cela va alors très vite, avec la possibilité de poser des repères, de sélectionner plusieurs calques et d’en tirer une construction riche. De plus, une harmonie des couleurs, formes et typos est rapide à créer. Et le gros avantage est surtout de travailler avec une vision globale de la page. Mais effectivement j’avoue, cela prends du temps de faire la maquette, la présenter au client pour faire ensuite les retouches graphiques et corrections de contenu avant la phase d’intégration.

A l’inverse, la création directement en CSS permet de gagner un temps important puisque la création se fait directement par le code  HTML/CSS – on a donc l’impression de gagner un temps fou car la maquette est directement prête en y présentant également la partie interactivité au client (roll-over, effets jQuery, parallaxes, …) – mais j’insiste bien : ce n’est qu’une impression. En réalité, nous passons un temps fou à tester, allant de notre page de code à notre navigateur sans arrêt pour voir les modifications et si elles fonctionnent correctement. On essaye différentes typos, différentes tailles et réglages, différentes couleurs et différentes dispositions des contenus les uns par rapport aux autres. Du coup le gain de temps en évitant la fastidieuse maquette Photoshop est immédiatement perdu avec les allers-retours entre notre éditeur et notre navigateur. De plus, Photoshop (ou tout autre logiciel de création graphique) est obligatoirement ouvert, pour y travailler la taille du logo, sa couleur de fond, les textures et images d’arrière plan... On se retrouve alors dans notre dossier de travail tout un tas de fichiers Photoshop qui ne sont que des parties de la maquette initialement zappée. Un PSD pour le logo, un autre pour le fond, l’autre pour le format des miniatures, etc.

Et lorsque le client nous demande une modification, comme le texte en plus gros, ou 4 photos au lieu de 3 sur la largeur, là on arrive à quelque chose de très compliqué : il faut alors revoir le CSS en partie, et bien souvent on a tendance à manipuler les règles CSS en les réadaptant plutôt qu’en les optimisant. Résultat des courses : une feuille de style CSS non-optimisée à force de la retoucher pour les corrections du client, une maquette la plupart du temps moins riche en terme de mise en page, une maintenance plus difficile, ...

En conclusion je ne suis pas sur que passer directement par le CSS pour nos WebDesign est un réel gain de temps. Cela peut être pratique pour nos propres sites mais dès qu’un avis extérieur (comme un client par exemple) vient discuter nos choix, on se retrouve avec une multitude de problèmes à gérer.

De plus, aujourd’hui on est obligé d’optimiser un maximum nos maquettes web avec l’optimisation des images, la génération de fichiers sprites, etc. Qui demande de prendre un certain recul avant t’attaquer la CSS !

On imagine pas une seule seconde un constructeur automobile réaliser un moteur sans avoir réaliser un plan parfait avant, pour voir si il a pensé à tout, ou bien un architecte construire une maison sans avoir fait un plan précis du bâtiment. Alors avant de vous jeter sur la feuille de style CSS, prenez du temps et un recul important en réalisant la maquette sous Photoshop, vous verrez, vous y gagnerez au final !

Et je serais prêt à parier que même le site de Google a été photoshopé avant !