J'aime bien 37 signals, et j'aime assez souvent leur prises de position assez radicales sur la manière de travailler un site web. Dans cet article en l'occurrence, ils expliquent qu'ils se passent totalement de maquette Photoshop lorsqu'ils designent une interface, et passent directement du crayon et de la feuille de papier au prototype HTML/CSS.
En fait je suis assez d'accord avec eux, même si leur billet peut laisser croire que le prototype HTML/CSS peut remplacer totalement l'étape Photoshop/Illustrator/... (entourez votre logiciel préféré). Ce sont à mon avis deux étapes différentes, et qui ont deux buts bien différents.
Effectivement aujourd'hui, la maquette Photoshop est bien mal utilisée. Elle sert malheureusement de référence et d'étape de validation pour des chose qu'elle ne peut pourtant pas ou mal montrer :
- Le zoning, la taille et le placement des blocs, qui sont souvent fastidieux à modifier sur Photoshop, on perd beaucoup de temps à chaque itération (et le designer s'énerve...)
- Quid de l'interaction ? Comment voir le comportement d'un lien au survol ? L'apparition d'un bloc AJAX ? Ce sont pourtant des éléments clés d'un design interactif.
- A la différence d'un travail print, le design interactif doit également prendre en compte les comportements. Par exemple le comportement d'une page lorsqu'on agrandit le texte FAIT parti de la démarche design, et Photoshop ne le montre pas non plus.
- Enfin la déclinaison de toutes les maquettes d'un site est également une étape extrêmement fastidieuse et peu valorisante. Voir 50 images jpeg avec le même site et le contenu central qui change n'a absolument aucun intérêt. Cette déclinaison pourra se faire bien plus rapidement en HTML ensuite.
Pour tout ça, un prototype HTML/CSS est un document de travail extrêmement souple pour affiner des problématique de zoning, de placement et de taille de blocs, bien plus que Photoshop. Déplacer un bloc en HTML/CSS prend environ 5 secondes, et le résultat est montrable immédiatement. Modifier un texte idem, etc...
En revanche, une maquette Photoshop pourra clairement permettre de travailler la charte graphique globale. Mais il ne sert à rien d'y consacrer trop de temps au calage au pixel près ou à au positionnement des blocs entre eux, c'est simplement long, fastidieux et inutile. Bref, amis Photoshopeurs, arrêtez de passer des heures sur des détails sans importances et concentrez-vous sur votre coeur de métier : la création graphique.
Maintenant, se passer de Photoshop conduit à mon avis à un excès inverse, c'est à dire que le code CSS se met à conduire l'ensemble de la charte graphique. Dans cette démarche, on aboutit souvent à une "pauvreté" graphique et on se surprend à faire des choix graphiques non plus en fonction d'un concept créatif mais d'un simplicité à produire tel effet en CSS rapidement. C'est sûrement quelque chose qui peut convenir à 37 Signals, qui ont des designs très "dépouillés", mais sûrement pas applicables à tous.
Bref pour résumer :
- Un prototype HTML/CSS pour valider les placements, les tailles, l'interaction et d'une manière générale ce qu'on peut appeler "l'expérience utilisateur".
- Une maquette Photoshop pour la charte graphique, les illustrations, le travail sur les couleurs, etc...
Et à chaque outil sa fonction :)