A la lecture des articles et des commentaires sur le thème du design dans le navigateur, j’ai l’impression que l’on confond deux choses pourtant bien distinctes, voire trois, si l’on ajoute au design et au graphisme, la notion de direction artistique. Si dans certains cas, il est possible de faire la direction artistique, les wireframes et les graphismes dans le navigateur, cette méthode intégrale ne saurait s’appliquer à la majorité des projets.
Brider la créativité ?
Dans un article paru sur WDFriday.com Francis Chouquet évoque l’amoindrissement de la créativité qu’entrainerait la conception dans le navigateur. Pour ma part, lorsque je parle de design dans le navigateur, je parle surtout de structure. Dans mon esprit, le concept de in-browser design s’applique avant tout à la conception des maquettes, au placement des éléments, à la hiérarchie de l’information, etc. Qu’importe le logiciel pourvu qu’on ait l’ivresse : si les outils spécialisés dans la conception des wireframes laissent la place à Notepad++ et au navigateur, c’est autant de temps gagné par la suite sur l’intégration HTML & CSS.
CSS3 vs. Photoshop ? Pfff… 🙂
Le graphisme dans le navigateur se limite au choix de la typographie avec @font-face, aux coins arrondis avec border-radius, aux dégradés avec background, aux ombres portées internes ou externes avec box-shadows, etc. C’est déjà pas mal, et l’on peut très bien s’en contenter pour faire des sites web attractifs. Et puis, un site web n’a pas forcément besoin de graphismes, n’est-ce pas ?
Toutefois, il ne faut pas oublier que les éléments CSS3 que je viens d’évoquer sont déjà largement utilisés dans les systèmes d’administration (back office) et autres applications «utilitaires». Si cette tendance se confirme — et rien ne dit que les clients voudront dépenser plus d’argent dans leurs back offices — peut-on imaginer de proposer aux clients et aux visiteurs un front qui ne se différencie pas du back, ou très peu ? Allons…
Ressources Humaines et organisation
Les réticences concernant cette méthode de travail sont liées à l’organisation et aux compétences. Dans le flux de production web on fait souvent référence à la partie graphique et à la partie développement, mais on oublie toujours la direction artistique, l’ergonomie et l’éditorialisation. C’est dommage, parce que c’est là que le design dans le navigateur prend tout son sens. Or le D.A. ou l’ergonome ne sont pas toujours férus de HTML & CSS. Du coup, toute tentative d’expliquer l’intérêt du design dans le navigateur se heurte à «C’est pas mon métier».
Flux de production web agile
Loin de moi l’idée de penser que cette solution est la meilleure, mais je trouve que ça vaut la peine d’essayer de réduire le nombre d’étapes :
- Etude des besoins du client final (pas du client qui paie) → moodboard, planche d’ambiance,
- Editorialisation des contenus et architecture de l’information → wireframe HTML & CSS (avec une pincée de Javascript si nécessaire),
- Habillage graphique (fichier Photoshop, Illustrator ou dessins aux crayons de couleur) → Intégration web dans le wireframe de l’étape précédente.
Je suis resté volontairement réducteur, notamment sur la question de l’habillage graphique qui semble la dernière roue du carrosse. Selon votre organisation personnelle ou celle de votre équipe, il est fort probable que vous ayez envie de commencer par fusionner la première avec la dernière étape et une pincée de la seconde pour terminer par l’intégration web pure et dure.
Amélioration progressive
L’intérêt de cette méthode, c’est que l’intégrateur peut commencer à intégrer les visuels au fur et à mesure de leur disponibilité. Si le logo est prêt, hop ! on l’intègre ; si le choix des couleurs et de la typograhie ont été validé, hop ! on peut déjà les tester ; idem pour tous les autres éléments du design. Plus besoin d’attendre les éternels allers-retours entre le studio graphique et le service marketing pour se mettre au travail. Votre client peut tester et faire tester le projet très tôt dans le cycle développement.