Depuis quelques années, nous guettons la convergence entre conception / design et intégration / développement front.
Avec la fin de Flash, les designers et les développeurs front ont perdu un outil commun pour concevoir et même développer des projets web dynamiques. Alors que des outils et méthodes permettent de factoriser, mutualiser et consolider le travail d’une équipe de développeurs, la phase de conception est restée artisanale.
Hélène, développeur frontend, a déjà abordé ce sujet il y a quelques mois. Elle y restituait les difficultés liées au manque de communication et aux outils non compatibles entre designers et devs front.
L’UX faisait des zonings et des wireframes sur Axure ou Balsamiq et les faisait passer au DA.
Le DA recommençait un tout nouveau projet sur Photoshop, pas du tout fait pour accueillir l’ensemble des pages, déclinaisons responsive et animations. Il livrait aux développeurs front un ou plusieurs fichiers psd plus ou moins bien organisés, dans lequel l’intégrateur devait chercher les assets et déduire ses feuilles de style.
Le chef de projet écrivait pendant ce temps les spécifications fonctionnelles sur un autre outil, Confluence d’Atlassian par exemple, et devait alors arbitrer entre des specs complètes et très verbeuses que personne ne lirait ou des specs succinctes mais pouvant être source d’interprétation, par les développeurs comme par le client.
Le responsive web design et l’adoption massive de Sketch par les designers ont changé la donne, beaucoup d’outils sont désormais à la disposition des designers pour les différentes phase de conception.
Voici un exemple de comparatif récent : https://uxtools.co/tools/design
L’enjeu aujourd’hui est de connecter ces différents métiers :
- Pour que l’UX et l’UI puissent travailler ensemble sur un outil partagé ;
- Pour que le passage de la conception aux développeurs s’opère de manière plus efficace,
- In fine, pour que la conception produise du code.
Voici un petit aperçu de ce qui se met en place et de ce que l’on peut espérer dans les années à venir.
Des outils de design conçus pour le web
Sketch, Figma, Adobe XD, Marvel et bien d’autres.
Si Sketch semble s’imposer, un grand nombre d’outils similaires ont émergé et continuent de voir le jour. Ce qu’ils ont en commun :
- ils produisent des objets vectoriels, facilement utilisables pour le web ;
- ils permettent une mutualisation d’éléments (les « symbols » de Sketch) ;
- certains proposent le partage de librairies d’objets et de composants sur plusieurs projets et utilisateurs.
Ces outils ont un avantage majeur par rapport à Photoshop : il peuvent être pris en main par le chef de projet, l’UX et le DA à différents stades du projet. Tous travaillent donc sur le même outil et peuvent faire grandir le projet sans avoir à tout re-développer après la contribution d’une autre expertise.
Adfab a choisi de rester sur Sketch pour l’instant. S’il est tentant d’aller tester d’autres outils comme XD ou Figma, Sketch a de nombreux avantages :
- il est devenu incontournable dans la profession et rassure à la fois les clients, les salariés, les freelances qui le connaissent et peuvent ainsi aisément participer à la conception avec nous ;
- il est en train de structurer un éco-système de plug-ins et d’outils complémentaires qui renforcent sa pertinence et son rôle central dans les processus de création. Craft d’InVision, par exemple, est un plug-in qui permet une synchronisation efficace entre Sketch et InVision mais qui offre d’autres fonctionnalités intéressantes, comme l’ajout de données automatisées dans les wireframes (contenu éditorial, images et mêmes connexion à des APIs) ;
- il est porté par une équipe qui maintient le projet en mouvement et ne cesse d’améliorer l’outil.
Des workflows de collaboration optimisés
Abstract, Kaktus ou encore Plant ont développé des services qui s’appuient sur un dépôt Git ou sur un principe similaire. Il est donc possible de partager un fichier de design, d’en suivre le développement, de créer une branche pour travailler sur une fonctionnalité particulière et ensuite de consolider un master commun et documenté, disponible à tous les membres actifs de la phase de conception.
Certains outils sont même 100% collaboratifs, comme Figma qui permet, un peu à la manière de Google Docs, de voir en temps réel la contribution des autres designers sur un fichier.
Des animations mieux intégrées
InVision, Principle, Origami ou même Adobe Comp CC (pour iPad Pro), Framer, Flinto, Marvel, Craft by InVision…et maintenant InVision Studio.
Avec la fin de Flash, le design web est passé par une phase de consolidation / rationalisation et par une certaine forme d’uniformisation : la généralisation du flat design et du responsive web design.
Mais depuis quelques années, un bon site web ou une bonne application mobile sont redevenus synonymes d’animations et d’interactions complexes et abouties.
S’il n’y a pas encore d’outil de conception qui produise le code correct pour ces interactions (voir plus bas), les designers ont retrouvé des interfaces de conception satisfaisantes.
La plus connue, InVision, permet des interactions simples.
D’autres comme Principle s’appuient sur des fichiers Sketch et produisent des interactions plus complexes.
Certaines, plus abouties comme FramerJS, se rapprochent du code.
Enfin, InVision nous annonce pour le tout début 2018 un nouvel outil, Studio, qui devrait lui permettre de se repositionner sur ce qui a longtemps été son principal atout : simplicité et efficacité.
Simplifier le passage du design au code
Zeplin, Avocode, InVision’s Inspect, Sympli
Ces outils n’apportent qu’assez peu de fonctionnalités par rapport à Sketch ou InVision. Ceux-ci proposent déjà de créer des assets, de créer des styles et peuvent être utilisés par les devs front pour obtenir les informations nécessaires à une bonne intégration.
Mais ils ont l’intérêt de former une frontière claire entre design et code. Zeplin permet par exemple aux designers de mettre à disposition de manière explicite des guidelines (styles, palette de couleurs), des assets et même du CSS sans que les dev front aient besoin d’ouvrir Sketch. C’est particulièrement pratique quand le développeur n’est pas sur Mac ! Mais également pour tous les autres.
Cet outil permet de clarifier le design, de formuler une grammaire simple et lisible par tous, ainsi qu’un lieu d’échange pouvant être structuré par un principe de commentaires.
Ce qu’il reste à améliorer
Pour autant, il reste beaucoup de chemin à parcourir pour que le travail entre designers et développeurs soit totalement « sans couture ».
Un design réellement responsive avec gestion fine des breakpoints.
Sketch a fait des progrès cette année dans la gestion du redimensionnement (responsive) des éléments de design, mais ne parvient pas encore à les gérer réellement comme le fait le développeur avec ses différents breakpoints.
Du code, du code, du code
Macaw l’avait promis il y 3 ans. Trop vite rachetés par InVision, ils ont disparu alors que leur outil ne parvenait pas à tenir ses promesses et produisait un code de qualité trop faible pour être utilisé.
Pourtant, le temps où le design produira directement du code utilisable par les dev fronts semble tout proche.
- C4 Studio
- UXPin
- Components (et également https://polymer-designer.appspot.com )
Adfab a la chance d’avoir des UX et des Dev Front qui travaillent main dans la main sur ces questions. Avec le Product Owner, nous avons l’opportunité dans les 2 ou 3 années à venir de changer profondément notre façon de travailler
- Le designer doit comprendre le code et les environnements de développement pour libérer une partie des tâches du dev front.
- Nous pouvons anticiper la constitution de méthodes / best practices / UX – UI kits plus aboutis que les simples fichiers sketch actuels. Des outils réellement partagés, qui contiennent des composants dynamiques et qui s’enrichiront à chaque projet.
- La production des specs fonctionnelles doit être collaborative entre le designer et le chef de projet, elle va s’appuyer sur des animations et du code plus que sur une traduction en français forcément trop verbeuse, chronophage et inadaptée.
- Le dev front pourra se consacrer à une intégration parfaite et économe en temps du design.
J’espère que cet article vous permettra de fluidifier votre relation avec les développeurs / designers. Si vous avez des astuces à partager ou des questions à poser, n’hésitez pas à commenter cet article !
