Dans des projets complexes, qu'ils soient web ou mobiles, il arrive un moment où gérer les écrans ainsi que les éléments graphiques qui les composent devient un véritable casse-tête pour le designer d'interface et le codeur. En effet, dans les projets dits "agiles", les adaptations de composants visuels peuvent être fréquentes. Conserver un historique propre et compréhensible pour les développeurs peut s'avérer extrêmement difficile.

Le risque est de créer un décalage important entre la version graphique d'un projet et sa version "codée". Nous avons mis en place un certain nombre d'outils que nous allons partager dans le cadre de cet article.

1. Les outils de design

Il y a quelques années déjà nous avons fait le choix de développer la majorité de nos interfaces sur l'outil de conception graphique Sketch. Bien que d'autres solutions aient vu le jour depuis, comme Adobe XD, Sketch reste une solution extrêmement puissante pour le design d'interface web et mobile.

En effet, il offre un nombre d'outils importants, comme la création de composants fluides et dynamiques qui permettent de répliquer facilement des éléments visuels, mais surtout de simuler "facilement" plusieurs tailles d'écran. Ces variations en fonction de la résolution d'écran constituent très souvent un cauchemar pour la plupart des designers et développeurs. Heureusement, Sketch apporte une série de réponses à ces défis et permets de manière très ergonomique de créer des design sur mesure complexe et riche tout en respectant les fondamentaux de l'expérience utilisateur (UX).

Sketch a toutefois ses limites et la plus grande d'entre elles est sa compatibilité. En effet, le logiciel n'est disponible que sur Mac OS, ce qui n'est pas idéal quand certains de nos développeurs travaillent sur Windows.

2. Une solution de partage et de dialogue

Lorsque nos développeurs (et encore moins nos clients) n'ont pas Sketch à disposition, il convient d'évaluer d'autres options quand il s'agit de partager et de discuter d'un design.

Au départ, nous aurions pu partir sur des PDF annotés. Mais ceux-ci ont vite leur limite quand de longues discussions ont lieu. C'est pourquoi nous avons investi depuis plusieurs années dans la solution cloud Invision. Cette plateforme permet de visualiser des design web et mobile directement depuis son navigateur. De plus, il offre un outil de prise de commentaires extrêmement performant avec une approche « Kanban » bien pratique pour la validation de modifications. 

Amener le designer et le développeur à partager un langage commun a permis de créer énormément de valeur au sein de Talk to me

Cerise sur le gâteau, cette solution s'intègre idéalement avec Sketch au travers d'un plugin qui permet l'export direct des écrans depuis notre logiciel préféré. Un gain de temps indéniable pour nous, mais aussi pour nos clients qui peuvent voir nos design comme s'ils étaient codés.

Ces solutions, bien que très matures, sont toutefois mises à l'épreuve depuis quelque temps par la suite Adobe et plus particulièrement Adobe XD. Celle-ci intègre d'une part un outil de design, mais d'autre part des outils de partage intéressants. Toutefois, chez Talk to me, Sketch + Invision restent nos favoris!

3. Une librairie de composants à disposition des développeurs

Une fois les interfaces validées, le défi réside dès lors dans la gestion de la publication et du versionnage des composants visuels, afin que ceux-ci soient codés au plus proche de leur design d'origine. Pour ce faire, nous mettons en place ce que nous appelons des librairies de composants qui vont servir de dictionnaire visuel pour le développeur.

Nous avons fait le choix de travailler avec la plateforme Zeplin.io. Celle-ci s'intègre également parfaitement à Sketch à l'aide d'un plugin qui permet en un click d'exporter les composants ou symboles vers un cloud sécurisé.

Chaque composant est ensuite listé dans la librairie sous une forme visuelle, mais également sous la forme de code CSS ou SCSS voir en React Native selon les besoins. C'est un gain de temps indéniable pour notre équipe. De plus cette librairie sert alors de référence pour tous les développements futurs. Elle liste non seulement les écrans et les composants, mais également les styles de texte et les codes couleurs. 

Un processus qui remet le design et l'expérience utilisateur au centre

Nous sommes passionnés par le design d'interface (UI) et l'expérience utilisateur (UX). La mise en place de ces outils nous a permis de toujours mettre l'UI et l'UX au centre de notre processus de développement et nous a donné l'agilité nécessaire pour aborder des projets importants avec sérénité et qualité.

Si vous souhaitez en savoir plus, n'hésitez pas à nous contacter à l'adresse lets@talk-to-me.ch. Nous serions heureux de pouvoir discuter de votre projet avec vous.