Débat sur le process de design des pages web

Je reviens sur la refonte de ZDNet Produits une dernière fois suite à un débat très intéressant chez Bruno (de css4design) sur le process de design des pages web. Bruno lance le débat avec la traduction d’un article de 37signals, une agence web réputée, à l’origine entre autre de l’application de projets en ligne basecamp, laquelle annonce dans un article de son blog (que je vous conseille d’ailleurs) qu’elle va désormais se passer de Photoshop dans le process de design pages web.

Je reviens sur la refonte de ZDNet Produits une dernière fois suite à un débat très intéressant chez Bruno de css4design sur le process de design des pages web [1]. Bruno (de css4design) lance le débat avec la traduction d’un article de 37signals, une agence web réputée, à l’origine entre autre de l’application de projets en ligne basecamp, laquelle annonce dans un article de son blog (que je vous conseille d’ailleurs) qu’elle va désormais se passer de Photoshop dans le process de design pages web.

37signals ne substitue même pas un autre logiciel graphique à Photoshop type The Gimp ou Fireworks. Non. Ils zappent purement et simplement la phase de maquettage Photoshop pour passer directement à l’intégration html.

Pour ceux à qui les mots intégration et maquettage ne parlent pas, sachez juste que dans le fabuleux métier de webdesigner, il y a 2 casquettes [2] :

Zapper Photoshop ?

Dans la phase de conception d’un site, je ne m’imagine pas zapper la casquette de graphiste pour enfiler directement celle d’intégrateur. Évidemment, il existe des raccourcis pour accélérer le travail et passer moins de temps dans Photoshop pour délivrer une maquette très vite. Mais comme je l’explique dans mon commentaire chez Bruno, je m’imagine difficilement zapper la phase de graphisme pure pour attaquer le code billes en tête :

Mouiais… Je pense qu’il est difficile de se passer de Photoshop si on veut faire une maquette riche graphiquement. Comme le dit très bien gou : Photoshop met l’accent sur la production, pas sur la productivité. Photoshop sert à construire quelque chose qui doit “paraitre”, pas quelque chose qu’on peut utiliser. Photoshop sert pour le “paraître” : si on veut faire un site qui claque un peu, il faut bien passer du temps à faire de la recherche graphique afin de trouver des éléments qui vont donner sa personnalité au site. Et ça, à mon avis, on ne peut pas le faire autrement que dans Photoshop.

Cceci dit, il est vrai que arrivé au stade du tu pourrais pas changer la police ? Et la couleur de fond ? Et décaler ce truc etc etc… alors là, Photoshop devient contre productif (et là – digression – je loue feu Fireworks qui permettait de faire un rechercher / remplacer des polices ou des couleurs directement dans la maquette graphique)

Depuis quelques mois j’ai adopté un autre process de production : – je réalisé une ou 2 maquette dans photoshop, – je découpe les éléments graphiques récurrents – et je fais tout le reste de mes templates en html / css.

Et quand on me dit : tu pourrais pas changer la police ? Et la couleur de fond ? Et décaler ce truc etc etc…, là, je prends mon éditeur préféré (texmate pour moi :), je modifie une ligne de ma css et zou, les 15 templates sont impactés par la modification.

Ne pas utiliser Photoshop comme un outil de gestion de projets

Ce qu’il y a de bien dans les débats, c’est que parfois, il s’élargit. C’est ce qui s’est passé chez Bruno : d’un débat sur la suppression de la phase de maquettage, on est passé dans les commentaires à un débat sur le process de design lui même. Là, je raccroche les wagons et je vous parle de la refonte de ZDNet.

Pour ce projet, il fallait aller vite. Et paradoxalement, pour aller vite, nous avons décidé de prendre le temps. En effet, c’est la phase de maquettage qui prend toujours le plus de temps. Car comme je l’écris dans le commentaire sus-cité, si le client final n’a pas pris le temps de réfléchir un peu à son projet, aux objectifs qu’il souhaite atteindre et à la façon dont cela peut se refléter sur une page web, la phase de maquettage peut devenir véritablement un calvaire sans fin. Car décider de l’architecture de ses pages et de la navigation entre celles-ci sur la base de maquettes Photoshop, c’est tout simplement contre-productif, car, et je suppose que c’est l’une des raison de l’abandon de photoshop par 37signals, si Photoshop est un superbe outil de retouche d’image, ce n’est absolument pas un outil de gestion de projets. Et on ne doit jamais l’utiliser comme tel. A moins d’avoir énormément de temps et un graphiste aux nerfs d’acier.

L’indispensable phase de Zoning

Nous avons pris le temps donc. Nous avons pris le temps de nous installer autour d’une table, avec un vieux paperboard et des sièges en cuir, et nous avons griffonné sur de grandes et larges feuilles blanches chacune des pages du site en détaillant chaque zone de contenu tout en sirotant un bon vieux daïquiri au bord de la piscine (oui on est bien traités chez CNET et il y a une piscine dans les salles de réunion).

En gros, j’explique le processus dans un deuxième commentaire, toujours chez Bruno :

Concernant la phase d’architecturation de l’information : Tout à fait d’accord avec toi : celle-ci doit se faire en amont de l’utilisation de Photoshop. Pour ma part j’utilise un outil très ancien mais qui a su prouver son efficacité : un papier et un crayon. On se réunit à plusieurs, on prend un paperboard et on dessine ce que nous souhaitons voir apparaitre sur les différents gabarits de page. C’est plutôt efficace et cela fait gagner pas mal de temps. Il me serait impensable aujourd’hui de faire cette phase là directement dans Photoshop.

Malgré cette étape préalable de zoning, je garde toujours une certaine souplesse au cours du processus de réalisation des maquettes car malheureusement, aussi efficace que puisse être l’outil papier, celui-ci ne permet pas de représenter correctement les éléments interactifs dans une maquette (menu déroulant, éléments de formulaires, javascripts…).

Et au final, de ça :

On est arrivés à ça :

ZDNet produits

Et de tous les projets auxquels j’ai participé chez cnet la refonte produits de ZDNet est celui qui s’est déroulé le plus vite et qui a été le mieux géré. Je parle pour ma partie, c’est-à-dire dans la phase de design. Cependant il me semble que mes collègues développeurs n’ont pas eu trop à se plaindre non plus ? Je me trompe les gôrs ?

Comme quoi, pendre le temps parfois, ça a du bon.

  1. Je parle de design et non pas de création car le débat ne concerne que la partie front – ce que voient les utilisateurs – et pas la partie back – la manière dont sont générées les pages côté serveur.
  2. je dis 2 casquettes, mais on peut évidemment lui en trouver plus : référenceur, développeur, éditeur… et mêmes pour certains, joueur de baby