Publié par

Il y a 4 années -

Temps de lecture 12 minutes

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

INTRODUCTION

Logo Sketchll est difficile aujourd’hui d’envisager le développement d’une application mobile de qualité sans considérer son ergonomie. Il suffit d’examiner les applications aux palmarès des stores pour voir qu’elles offrent toutes une ergonomie irréprochable capable de répondre au mieux aux besoins des utilisateurs et de tirer le meilleur parti du support utilisé.

Malheureusement, en tant que développeurs, nous effectuons souvent une intégration tardive du travail des designers qui ne sollicitent pas notre expertise. Ce fonctionnement, très en silo, nous contraint à prendre en compte des recommandations qui ne respectent pas les chartes graphiques imposées par le support, à ne pas accéder aux bonnes ressources graphiques ou, pire, à devoir implémenter des designs qui font abstraction des contraintes techniques.

Vous l’aurez compris, une étroite collaboration entre designers et développeurs dès le premier jour d’un projet est donc primordiale. Elle permettra d’optimiser tout le flux de travail entre les deux corps de métier et d’être en mesure d’implémenter des designs de qualité en temps voulu. Nous verrons à travers cet article qu’en définissant correctement nos besoins et en choisissant les bons outils il est possible d’améliorer cette collaboration et de faciliter notre tâche d’intégration des designs.

First things first: les chartes graphiques

Rappelons-le (si ce n’est pas une évidence) : il est de notre devoir d’étudier au minimum les chartes graphiques recommandées par la plateforme sur laquelle nous développons. Ces documents ne s’adressent pas uniquement aux designers et sont là avant tout pour nous aider à définir une expérience cohérente pour les utilisateurs de nos applications. On y trouve typiquement quelques principes fondamentaux en design, des stratégies de design liées à l’OS ainsi qu’une description détaillée des éléments graphiques fournies nativement.

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.
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.

Qu’attendons-nous des designers ?

La communication entre développeurs et designers doit aller bien au delà d’un simple échange de fichiers Photoshop. Un projet où le designer et le développeur travaillent chacun dans son coin sans aucune consultation préalable est souvent de faible qualité. En effet, à travers cette approche les designers prennent le risque de voir leur designs implémentés tardivement et d’une façon complètement différente de leur vision.

Préférez donc l’approche où les développeurs sont impliqués très tôt dans le processus de création et où les designers restent impliqués tardivement dans le processus de développement : dans les deux cas le travail de chacun sera valorisé. Ensuite, prévoyez d’avoir toutes les ressources à portée de main avant l’implémentation des designs. En communiquant vos besoins aux designers vous pourrez ainsi réaliser votre travail plus efficacement et vous assurer que vous prenez en compte toutes les recommandations des designers.

Assurez-vous donc que votre designer vous fournit :

  • 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.

Les outils pour optimiser la chaine de production UI/UX vers du développement

Si nous venons de voir quelques bonnes pratiques pour mieux collaborer avec les designers, il serait dommage de passer à côté de certains outils qui vont grandement nous simplifier la vie entre la phase de design et celle d’implémentation.

Sketch: export like a boss

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.

Testez donc sans plus attendre Sketch qui est disponible gratuitement en version d’essai. Vous pourrez ainsi vous faire votre propre opinion sur l’impact qu’il aura sur votre workflow. Je recommande à ce sujet l’article de Timur Nurtidinitovsur l’organisation de Sketch pour le développement sous iOS.

Sketch
Interface Sketch

InVision pour mieux prototyper et collaborer :

InVision fait partie des meilleursoutils de prototypage et de productivité actuellement sur le marché. L’outil a d’ailleurs fait ses preuves parmi ces sociétés qui ont misé leur succès sur une excellente expérience utilisateur dans leur produits. Parmi les plus connus notons Netflix, Twitter, Airbnb, MailChimp, Evernote, Spotify mais aussi la start-up Française BlaBlaCar.

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.
InVision

Interface InVision

Zeplin :

Petit nouveau parmi les outils de collaboration, Zeplin va simplifier la tâche des développeurs et permettre d’économiser du temps pour les designers. En important le fichier design que l’on souhaite inspecter, le logiciel va convertir le contenu en un document de spécifications. Il est ensuite très simple pour le développeur d’avoir accès directement à l’ensemble des spécifications nécessaires pour le développement de l’application : palette de couleurs de l’application, fonts et surtout dimensions exprimées en fonction du support. Vous aurez ainsi directement accès aux dimensions en dp ou en points en fonction de la plateforme sur laquelle vous souhaiterez développer.

Le logiciel supporte pour le moment l’import de fichier Sketch mais il est également prévu de supporter l’import de fichier Photoshop. Aucune raison une fois de plus de ne pas tester ce logiciel.

Zeplin

Interface Zeplin

CONCLUSION

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 :

Publié par

Commentaire

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

  1. Publié par , Il y a 4 années

    Autre chose de complémentaire qui mérite d’être regardée :
    http://www.thymeleaf.org/

    Bilan après plusieurs retours d’expériences :
    – Maquettes directement réutilisables par les développeurs back
    – coût et délai pour les phases de design/développement/intégration (avec la couche back) optimisés
    – Comme cela ne nécessite pas une webapp pour exécuter l’IHM, les tests automatisés ainsi que le debug et la maintenance sont grandement facilités

    Point de vigilance :
    – QUID de la pérennité ?
    – Performance pour le moment un peu moins bonnes qu’avec les technologies classiques JSP/JSTL

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Nous recrutons

Être un Xebian, c'est faire partie d'un groupe de passionnés ; C'est l'opportunité de travailler et de partager avec des pairs parmi les plus talentueux.