31/10/2018 4 Minutes read Design, Tech

Rapprocher designers, développeurs et client

Les designers et développeurs sont les principaux exécutants d’un projet web. Ils ont pour responsabilité la réalisation d’un livrable répondant à un besoin client. Cependant, beaucoup de projets souffrent d’un dialogue trop tardif entre ces différents acteurs. Les équipes sont souvent séparées et le dialogue trop occasionnel. Alors, comment faciliter le dialogue entre les différents rôles ? Quels outils utiliser pour bien se comprendre ?

L’amélioration continue avec un cycle itératif

Le processus de refonte du site web de la compagnie aérienne Virgin Airlines a été présenté durant la conférence ngEurope 2014 à Paris(1). La qualité du résultat produit par l’agence New Yorkaise “Work & co” a été saluée sur Twitter.

L’un des facteur clé de cette réussite est certainement le modèle de fonctionnement itératif utilisé pour faire collaborer client, développeur et designer durant les phases de conception et de réalisation.

« There wasn’t a design phase and a development phase – it was designers and developers working together » (« Il n’y avait pas une période de design et une période de développement, les designers et développeurs ont travaillé ensemble »).
Joe Stewart, Designer

La phase de prototypage est primordiale, surtout quand il s’agit de réaliser un site responsive cross-platform. L’approche de l’agence est agile et est composée de quatre étapes :

Design : Les UX et UI réalisent les maquettes.
Prototype : Les développeurs créent des maquettes responsive.
Test : Le client fait ses retours, regarde les prototypes sur différents supports.
Itérations : On prend en compte les remarques de chacun et on recommence.

Le client, les designers et les développeurs sont dans un même bureau. Les itérations sont rapides et la collaboration améliorée.

Ainsi, avant même que le développement ait commencé :

Le développeur identifie les éléments complexes de l’interface et peut proposer au designer des solutions alternatives moins complexes et moins coûteuses.

Le designer peut très rapidement voir des maquettes montées et corriger des détails qu’il n’aurait pas anticipé.

Le client est impliqué et peut affiner son besoin au fil du temps.

Voici quelques exemples d’avantages lié à ce mode de fonctionnement :

Le développeur peut alerter le designer à temps sur la nécessité d’utiliser au maximum les polices natives et disponibles sur un grand nombre de terminaux. Le choix des polices n’est alors plus qu’un choix graphique, c’est aussi un choix technique avec des contraintes de performance et de lisibilité.

Le développeur et le designer peuvent définir ensemble les breakpoints qui correspondent au mieux à l’application. Le designer a alors pleinement conscience de la fluidité qu’il doit donner à ses éléments.

Les animations qui composent l’application résultent d’un dialogue entre les deux rôles et peuvent être facilement et régulièrement améliorées.

Des outils pour améliorer la communication entre développeurs et designers

La réussite de la mise en place d’une telle méthode repose également sur l’utilisation d’outils efficaces qui vont permettre aux uns et aux autres de s’y retrouver et de se comprendre.

Approche modulaire et utilisation de préprocesseurs

Avec des cycles de développement itératifs dans lesquels les changements sont fréquents et parfois radicaux, il est impératif de bien segmenter les composants et de s’imposer une logique modulaire.

L’utilisation de préprocesseurs (Sass(2), LESS, stylus…), le respect de certaines approches modulaires (SMACSS(3), OOCSS(4), Atomic design(5), DoCSSa(6)…) et l’utilisation d’une syntaxe évitant les conflits potentiels et les confusions (BEM(7)…) est fortement conseillée pour les développeurs.

Guide de style autogénéré (UI Kit ou styleguide)

Développer rapidement, c’est bien. Savoir ce que les autres ont fait et ne pas faire plusieurs fois la même chose, c’est mieux.

Il faut une solution de documentation efficace, facile à consulter et, surtout, qui nécessite très peu d’efforts de maintenance. Cet outil doit permettre de référencer les éléments de base : couleurs, polices, styles par défaut, modules implémentés… Tous les acteurs du projet doivent savoir quels composants ont été réalisés et pouvoir les visualiser unitairement afin de ne pas réinventer la roue à chaque itération.

Pour ne citer qu’eux, KSS(8) et StyleDocco(9) vont permettre d’intégrer aux feuilles de style de l’application des commentaires interprétés. Grâce à une commande Gulp(10) ou Grunt(11), on va générer automatiquement des fichiers HTML avec une documentation complète qui va parfaitement refléter l’existant.

Un système de grille partagé

Utiliser une grille responsive est devenu assez commun chez les développeurs front end ainsi que chez les designers. Il faut cependant s’appliquer à utiliser des grilles avec les mêmes ratios (même nombre de colonnes, mêmes proportions de gouttières, …) que ce soit pour les repères Photoshop ou bien pour la grille CSS.

Prendre le temps de bien calibrer les systèmes de grille entre designers et développeurs en amont va permettre d’assurer des délais d’intégration HTML/CSS plus courts et une meilleure cohérence entre la maquette et le rendu final.

Il existe de nombreuses librairies de grille (Bourbon Neat(12), Susy(13), Profound(14), …). On distingue celles qui sont dites “sémantiques” des grilles déclaratives.

Grilles sémantiques : On définit ses propres classes pour les conteneurs et avec un préprocesseur, on attribue un style de grille à celle ci.
Grilles déclaratives : On utilise directement des classes pré-générées (col-2, one-half, …) définissant la taille de la colonne.

Pour résumer, la communication et l’utilisation de bons outils sont la clé de la réussite d’un projet web. Plus les échanges se font en amont entre les acteurs d’un projet, plus chacun peut comprendre les problématiques des autres. L’utilisation d’outils adaptés et compris par tous, le dialogue entre les acteurs et l’amélioration continue sont des solutions qui vont permettre de mener un projet à bien et en minimisant les risques.