Débat sur le process de design des pages web
20 août 2008 6 commentaires37signals 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] :
- la casquette de graphiste, lequel utilise un logiciel de création numérique type photoshop pour dessiner une maquette et la présenter à ses clients qui la valident (ou pas)
- la casquette d’intégrateur, lequel prend la maquette Photoshop et la transforme en page html bien codée, utilisable, accessible, optimisée pour le référencement et même que si vous avez affaire à un bon il vous rajoutera une couche de javascript pour lui ajouter de l’interactivité (on est sur le web quand même)
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 :
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.
- 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.
- 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
Ah, le crayon et le papier ont encore beaucoup d’avenir dans le web design : c’est pratique, on peut les transporter partout et ça occupe les mains quand les réunions s’éternisent… (oups, je l’ai pas dit 🙂 )
Trève de plaisanterie. Je partage ton avis sur l’utilisation de Photoshop, surtout le passage où tu dis que ce n’est pas un outil de gestion de projet. Parce qu’il faut voir parfois certains fichiers qui pèsent leur 500 mo de calques juste pour montrer les différents états d’un bouton 😉
Après, je pense qu’on a tous une sensibilité et des orientations graphiques différentes qui font qu’on a tendance à faire soit quelques croquis puis à travailler les éléments de la mise en page sans faire de maquette complète à découper, soit à faire de la maquette une « image » dans Photoshop que l’on va découper entièrement par la suite.
Je me situe en peu entre les deux. Après la phase de croquis, je lance volontiers Illustrator pour définir les grandes zones de contenu et chercher des pistes graphiques pour habiller ces zones. Ensuite, je retravaille tout ou partie dans Photoshop.
« 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. »
C’est vers ce process que je me dirige aussi peu à peu 😉
N’étant pas designer, je fais du html bien bourrin sans autre style dans mes fichiers css que des « float » dans mes .
Et après, quand le site tourne, j’ajoute des styles. Je suis pas capable comme vous d’imaginer la page avant qu’elle tourne. Je dois l’avoir en main et l’utiliser pour savoir quels morceaux mettre en valeur et quelles infos ont moins besoin de corps.
Et puis, je le dis souvent à Barbayellow: j’ai pas de goût alors je risque pas de trop me planter en faisant du blanc et noir 🙂
Moué, moi dans ma candeur je pensais qu’on s’occupait d’abord du contenu, un beau fichier XHTML, du php pour tout gérer et qu’après seulement on s’occupait du design. Un peu comme on fait quand on ouvre un dotclear.
Salut Grégoire,
Comme Bruno, quand on me demande ce qu’il faut pour faire un site web, je réponds : « des feuilles et un crayon ! »
Ca surprend au début, mais après un courte explication, mes interlocuteurs se rendent comptent du temps gagné à définir et concevoir le projet sur le papier.
Je te rejoins sur l’utilisation de symboles pour les zones d’interactivité, difficilement représentables sur papier, à moins de les scénariser sur une feuille à côté 😉
La question sous-jacente est de savoir si l’utilisation d’un design se justifie dans tous les cas. Si les intégrateurs de 37signals font leurs pages en html, ils ont certainement des templates ou charte graphique de référence.
D’ailleurs, leurs produits, et c’est une tendance sur le web, se caractérisent par une absence de design non fonctionnel, et une mise en avant épurée de l’information.
=> le fond est privilégié sur la forme quasi-inexistante (comme pour les agrégateurs).
Pour la plupart des projets médias / commerciaux, le design est associé à l’image de marque de l’éditeur ou de l’entreprise.
=> le fond et la forme doivent s’équilibrer.
PS : pour un cahier des charges ou des specs, une maquette / prototype en HTML fait très bien l’affaire 😉
Salut JP!
Tu n’as pas changé!
T’es le meilleur.
Comment ca va sinon?
Ici je surf au sens propre comme au figuré 🙂
++
Baptiste >> En fait ça marche comme ça. Pour faire un design efficace il faut du contenu. Car le design ce n’est jamais que mettre en valeur des contenus déjà existants. Et pour ce faire, un papier et un stylo, c’est très efficace.
Jean-Pierre >> C’est vrai qu’il faut différencier le design « à la » 37signals, lequel donne dans l’efficacité, et le design de marque, lequel doit pencher vers le « beau ». Cependant dans les 2 cas l’efficacité doit rester au centre des problématiques : à quoi servirait une boutique en ligne super jolie, super « blin bling » si l’internaute n’arrive pas à trouver le panier et à passer une commande ?
Un peu comme un président bling bling : à rien.
Lassiri >> ok !