Dans un précédent article, je vous parlais de la relation entre designers et développeurs frontend, de leurs métiers respectifs, ainsi que des possibles frictions que pouvaient rencontrer ces deux métiers au quotidien. Dans cette deuxième partie, je vais vous présenter quelques outils que j’utilise au quotidien pour faciliter les échanges avec les designers.
Boîte à outils
Le premier petit outil que j’utilise pour chaque projet est un plugin chrome :
Cette extension m’aide à développer avec une précision au pixel près ! En effet, elle va me permettre de mettre une image en superposition semi-transparentes sur mon site et ainsi effectuer une comparaison entre ce que je développe et la maquette.
↓
✏ InVision
Un autre outil que les designer utilisent et/ou devraient utiliser :
Cette application permet de transformer les écrans statiques en prototypes interactifs cliquables en reproduisant les animations des gestes et des transitions.
C’est un très bon moyen pour bien faire comprendre l’UX du site, aux clients d’une part, mais aussi aux développeurs. On ne peut pas avoir une idée concrète de ce que le designer veut en terme d’interactions et d’animations. Et en général, les specs techniques ne suffisent pas forcément. C’est donc un très bon moyen de se rendre compte du rendu souhaité.
De plus, des feuilles de styles et des morceaux de code peuvent être générés depuis l’application et ainsi permettre de gagner un temps fou ! Alors certes, Photoshop offre la possibilité d’extraire le CSS d’un élément mais on se retrouve souvent avec ça :
.Rectangle_99_copie { background-color: rgb(0, 170, 20); position: absolute; left: 433px; top: 2564px; width: 158px; height: 51px; z-index: 89; }
.Discover_ { font-size: 13px; font-family: "Gotham"; color: rgb(255, 255, 255); font-weight: bold; text-transform: uppercase; line-height: 1.385; -moz-transform: matrix( 1.00054542161371,0,0,1.00366806012633,0,0); -webkit-transform: matrix( 1.00054542161371,0,0,1.00366806012633,0,0); -ms-transform: matrix( 1.00054542161371,0,0,1.00366806012633,0,0); position: absolute; left: 191.283px; top: 2579.531px; z-index: 88; }
Il y a tout de même un peu de ménage à faire…
✏ Autres outils
Sur Sketch en revanche l’extraction du code CSS est déjà beaucoup plus pertinente. Non seulement chaque élément du design est vectorisé et exportable d’un simple clic en différentes tailles, mais le flux de travail est nettement plus rapide et efficace ! La fonctionnalité « Copier les attributs CSS » génère tout ce dont on a besoin et beaucoup mieux que Photoshop : bordures, couleurs, dégradés, fonts. Sketch est davantage orienté vers la création d’interfaces web : tout ce qui est faisable sur ce logiciel est faisable en CSS. Pas de joujou avec les textures, les options d’éclairage, les masques d’écrêtage, etc…
C’est bien dommage que les designers (ou les agences peut-être) ne soient pas plus nombreux à être passés sur Sketch en agence car c’est un gain de temps phénoménal pour les développeurs front. Mais Sketch VS Photoshop est encore un autre débat…
L’app n’existe aujourd’hui que pour Mac mais il y a d’autres applications, comme Zeplin, qui a vu le jour en 2015 et qui se révèle être aussi très intéressant autant pour les designer que pour les développeurs.
✏ Conclusion
Quand la communication n’est pas possible entre design et développement front, on peut toujours trouver des solutions qui permettent de combler un minimum ce gap. Même si le développeur fontend est habitué à improviser et à s’adapter à la conception qu’il reçoit, qu’il peut trouver des outils pour l’aider à coder au mieux les maquettes, il est tout de même plus efficace quand il travaille avec des PSD bien faits, comportant des prototypes et/ou des exemples, et lorsque les erreurs de conception ou d’interprétation sont anticipées.
