Développeurs front : Outils à votre disposition pour un meilleur workflow entre designers et développeurs

En supposant que vous développez pour un des trois principaux acteurs du marché n’hésitez donc pas à vous référez à la documentation adaptée :

– L’Apple iOS Guideline. Vous trouverez aussi une version allégée sur le site d’Ivo Mynttinen.

– La spécification Material Design de Google mise à jour récemment durant la Google I/O et qui regorge de bonnes pratiques UX.

– La Windows User Experience Guideline.

Le bénéfice de cette lecture sera immédiat : elle vous permettra d’éviter de tomber dans les pièges classiques d’une implémentation de design qui va à l’encontre de ce qui est attendu par vos utilisateurs ; et qui plus est pourrait introduire un impact conséquent sur les temps de développement en créant des composants non adaptés à la plateforme.

• un fichier unique de ressources : le designer doit placer tous les éléments de l’application dans un même fichier. A partir de ce document, le développeur devra être à même de recréer toute l’interface. Evitez les fichiers de ressources multiples qui rendent les exports fastidieux.
• l’ensemble des ressources pour l’application : idéalement le designer devra effectuer les exports des images ce qui évitera de les retoucher par la suite et d’être sujet à des erreurs de notre part dans les exports.
• un prototype illustrant les interactions : il est commun aujourd’hui d’avoir des animations et des interactions qui enrichissent l’expérience utilisateur. Votre designer doit être en mesure de créer un prototype pour ces interactions qui contiendra toutes les informations telles que la durée des animations, leur vitesse etc… Il est attendu que le designer nous fournisse ces valeurs.
• convention de nommage : n’hésitez pas à demander des règles de nommage pour garder vos éléments graphiques ordonnés. Cela simplifiera la navigation dans les fichiers de design pour vous et celle des designers.
• ressources hautes résolutions : les écrans de téléphone ont une densité de pixel variée. Assurez-vous que les images fournies par votre designer matchent toutes ces résolutions et sont correctement rendues sur des téléphones de test. Utilisez par exemple Skala ou LiveView pour dupliquer la visualisation des documents Photoshop sur ces appareils. 

Commençons par ce logiciel de conception graphique qui a bouleversé en quelques années le monde du design et de l’expérience utilisateur. A l’inverse de Photoshop un peu trop généraliste, Sketch répond au besoin très spécifique du design d’interface mobile et permet d’améliorer de façon significative le travail d’intégration entre designer et développeur.

Après avoir essayé le logiciel pendant plusieurs mois, voici les principales raisons qui, je l’espère, vous amèneront avec vos designers à utiliser principalement Sketch :

• Tout d’abord sachez que Photoshop n’a pas été conçu à l’origine pour le design d’interface mobile mais, comme son nom l’indique, pour l’édition de photo. Ainsi les outils 3D ou de filtres puissants de Photoshop sont tout simplement inutiles dans le cadre de réalisation d’interfaces mobiles. Sketch se focalise plutôt sur les besoins spécifiques d’un designer mobile et reprend les outils clefs pour la conception : on y retrouve notamment l’outil de sélection, de déplacement, de remplissage, de type et de mesure.

• Sketch excelle surtout au niveau des exports : il va permettre de gérer très facilement l’ensemble des ressources d’une application et ce en un seul clic. Oubliez donc les options fastidieuses d’export sous Photoshop où il faut définir les zones de slices, choisir le type des fichiers à exporter et utiliser l’option de sauvegarde pour Web… le tout vous obligeant à réaliser la tâche d’export slice par slice et pour chaque résolution d’écran nécessaire. Il existe des plugins vous permettant de faciliter la tâche comme Slicy et DevRocket, mais ces solutions sont payantes et devraient être intégrées de base dans Photoshop. On privilégiera l’approche de Sketch qui ne nécessite aucun add-on et dispose d’une fonctionnalité d’export tout en un pour les formats PDF, JPG, PNG, TIFF, EPF, SVG et sur tous les formats de mobiles (1x, 1.5x, 2x, 3x).

• Sketch est un logiciel 100% vectoriel. Avec la montée en popularité des écrans retina et d’appareils mobiles de tailles différentes, il est peu efficace de devoir adapter le rendu graphique pour chaque type d’écran. Sketch est beaucoup plus flexible à ce niveau : il vous suffira d’augmenter la taille en pixel d’un artboard (“Espace de travail”) pour que l’arrangement de vos éléments graphiques soit préservé sans modification de votre part des points d’édition. Le support vectoriel présente aussi tout son intérêt dans l’export des ressources graphiques puisqu’il garantit la qualité des exports quelque soit la résolution des appareils.

• La communauté autour de Sketch est très active : il existe un grand nombre de plugins développés par des personnes tierces qui vont vous permettre d’aller encore plus loin dans l’optimisation de workflow. Une liste exhaustive des plugins est actuellement disponible sur le site de BohemianCoding. Parmi les plus utiles on note ceux offrant la possibilité de générer du texte ou des images automatiquement, de documenter les designs, de générer l’ensemble des formats pour l’icône de l’app, ou bien d’exporter directement des ressources pour iOS de Sketch vers le catalogue d’XCode pour la gestion des ressources.

• Le logiciel nécessite peu de place sur le disque dur et est très performant : quelque soit la taille du fichier vous aurez peu de chance d’observer des « lags ». Le prix du logiciel reste aussi raisonnable : 110 Euros par rapport à la souscription mensuelle de Photoshop qui vous coûtera 20 euros par mois. Sachez également que toute l’équipe derrière Sketch est très réactive : il n’est pas rare par exemple de voir des bugs corrigés ainsi que de nouvelles fonctionnalités souhaitées en quelques semaines.

• Dernier point et non des moindres : le logiciel est très facile à prendre en main et ce même pour nous développeurs. De par la simplification des designs introduit par le flat design, il sera facile de sketcher rapidement quelques idées de conception en suivant les standards introduits par Apple et Google avant de nous plonger tête baissée dans du code.

A travers une interface web facile à prendre en main, InVision va vous permettre de créer des maquettes interactives qui peuvent être partagées entre tous les différents intervenants du projet : développeurs, designers, chef produit… bref, quiconque souhaitant apporter son expertise dans la définition d’un produit. Vous pouvez ensuite engager tous les membres de votre équipe à laisser des commentaires sur les écrans proposés et enclencher un processus itératif de révision des designs jusqu’à leur validation : un historique des écrans qui ont fait l’objet de modification est ensuite automatiquement généré à chaque upload de nouvel écran sur la plateforme.

Mais la force du logiciel ne s’arrête pas là, InVision offre aussi les fonctionnalités suivantes :

• La possibilité d’interagir avec le prototype directement sur votre portable ou tablette en mode hors ligne.
• La possibilité de partager les fichiers sources de votre application sans avoir besoin de passer par un outil de partage de fichier type Dropbox ou Google Drive.
• Le contrôle sur la présentation des designs pour visualiser un design dans son contexte (iPhone, iPad, téléphone ou tablette Android, Apple Watch).
• La création d’une liste de tâches temps réel : chaque commentaire sur l’interface étant répertorié comme une tâche à être traité.
• La possibilité de collaborer en temps réel sur un écran partagé pour faciliter la communication durant la revue d’un écran en conférence. Chaque collaborateur peut ainsi facilement référencer une zone de l’écran sur laquelle il souhaite discuter.

Le logiciel supporte l’import de fichiers de type Illustrator, Photoshop ou Sketch. Votre designer pourra donc uploader les designs qu’il a conçu sur son logiciel de conception préféré. Cerise sur le gâteau, en respectant une certaine syntaxe au niveau des layers, il sera même possible d’exporter facilement une partie des écrans qu’il souhaite disposer sous InVision ainsi que les assets nécessaires au développeur.

Vous l’aurez compris tout est centralisé à travers ce logiciel. Votre designer n’aura donc plus besoin d’envoyer plusieurs emails fastidieux pour obtenir la validation de ses designs et tous les intervenants du projet seront notifiés automatiquement sur l’avancement des designs.

La qualité logicielle sans compromis a toujours été le coeur de nos valeurs chez Xebia. Une bonne intégration des designs a un impact direct sur cette qualité et est le fruit d’une excellente collaboration entre designers et développeurs.

En choisissant les bons outils (Sketch, InVision et Zeplin) nous venons de voir qu’il est possible d’améliorer cette collaboration et de simplifier grandement la chaîne d’intégration des designs. Ces logiciels sont gratuits (si limités à quelques projets) alors n’hésitez pas à les tester surtout qu’ils ont déjà été adoptés par les géants du web.

Voici quelques liens supplémentaires si vous souhaitez approfondir l’usage de Sketch ou InVision :