Nouveau processus créatif

Par Boehler Frédéric le 13 septembre 2017

La perspective d'itérations rapides, d'une centralisation des assets, d'une aide à la validation le tout pour les designers ? Oui c'est possible !

J’ai récemment été impliqué dans un nouveau projet pour mon entreprise et j’ai pu profiter du calme de l’été pour essayer de mettre en place un nouveau processus de design avec des outils neufs. Je travaille avec plusieurs équipes disséminées sur le globe et outre les difficultés liées aux différents fuseaux horaires il n’est pas rare de nous perdre dans le processus de décision spécialement quand les outils ne sont pas adaptés aux nombreux échanges et aux nombreuses modifications qu’un design d’application peut nécessiter. Après quelques semaines maintenant, il n’est plus question pour moi de me passer de Sketch, de Craft et d’InVision mais voyons cela en détails.

Introduction

Jusqu’à très récemment j’en étais resté à la suite Adobe pour le design détaillé des vues et éventuellement Axure pour la création de prototypes, et malgré les inconvénients de ces outils, cette solution me convenait car j’étais le seul de mon équipe en charge du design et de l’intégration, j’étais donc rarement confronté à un rythme soutenu de modifications et d’échanges. J’ai utilisé cette formule pendant un long moment sans me rendre compte que naissaient ailleurs des alternatives beaucoup plus en adéquation avec les besoins d’une équipe de designers.

Les problèmes rencontrés

Dans le contexte du projet pour lequel j’ai initié ce mouvement, la principale friction résidait dans le maintien de nombreuses vues nécessaires au processus de décision et à la démonstration de nouvelles fonctionnalités auprès de nos clients. L’application en question est dotée d’un design complexe avec de nombreux composants riches, et nous perdions alors de nombreuses heures à répercuter les dites modifications sur tous les mockups.

Autre frein à l’agilité, le besoin de tout documenter et cela à chaque mise à jour ! Nos équipes en charge du développement n’étant pas sur place et ne manipulant que très rarement des fichiers Photoshop, il était donc nécessaire d’annoter toutes les vues d’informations utiles à l’intégration de celles-ci (couleur, fonts, dimensions). Un enfer quand on parle de 5G0 de fichiers épars, désordonnés et témoignant encore des itérations passées.

Finalement chaque cycle était fait de modifications douloureuses, d’exports de fichier, de partage par mail. Nous passions une grosse partie de notre temps à essayer de maintenir à flot une base saine de vues clefs pouvant servir de référence. A de nombreuses reprises nous empruntions des raccourcis dans ce processus nécessitant bien trop d’efforts, bien trop de rigueur et cela allongeait de fait le temps de réaction nous conduisant inexorablement vers une situation ou plusieurs copies non synchronisées circulaient nous faisant perdre le fil.

Sketch + Craft + InVision

J’ai donc profité d’un open space un peu plus calme durant les mois d’été pour m’essayer à d’autres outils de conception et je pense avoir trouvé une formule pouvant aider d’autres équipes faisant face aux mêmes difficultés. L’alliance de Sketch, de Craft et d’InVision donne de l’agilité aux designers, agilité qui s’observait principalement dans le développement avec GIT et tous les outils de suivi que l’on peut lui adosser et dont les développeurs ne peuvent se passer.

Sketch

Le premier acteur de ce trio rafraichissant est Sketch ! C’est est un éditeur de dessin vectoriel développé par Bohemian Coding, il a notamment gagné le prix “Apple Design Award” en 2012. Un des atouts de Sketch est sa façon de gérer ses plans de travail, ses vues ou encore ses artboards. Une page peut contenir ne nombreux artboards de différentes tailles permettant d’apprécier le design d’une application dans son ensemble.

Il dispose également d’une gestion de composants utile à la construction d’une librairie d’éléments réutilisables. Dans le cas d’une modification de l’un d’entre eux, c’est toutes les vues ou le composant est utilisé qui seront mise à jour. On peut y concevoir des icônes ou des images vectorielles plus ou moins complexes. Il dispose de modes de fusions pour les éléments à la façon des calques de Photoshop. Il est enfin possible de définir des zones et des formats d’exports pour les différentes assets et nous verrons qu’avec InVision cela devient particulièrement utile.

Craft

Comme tout logiciel populaire, Sketch permet aux développeurs d’étendre le jeu de fonctionnalités de base via des plugins. Craft est une suite d’outils proposé par InVision fonctionnant de concert avec leur service en ligne.

La feature principale est donc de pouvoir synchroniser des artboards avec votre projet InVision, mais il est également possible d’ajouter des transitions entre vos différents mockups. D’autre plugins sont offerts par Craft comme DATA ou DUPLICATE mais je n’ai pas vraiment pu les tester pour le moment.

InVision

La société InVision propose une application de collaboration en ligne. Il sera possible d’y créer votre projet afin de travailler en équipe. Cette plateforme permet aux designers, aux développeurs, aux product owners et enfin aux clients de partager, discuter et contribuer à l’effort de conception. Depuis Sketch et avec un simple clic votre prototype sera mise à jour en ligne, votre équipe sera notifiée des changements via Slack et les nouvelles vues seront ajoutées dans un Kanban Board afin d’être validées. Bien évidement il est possible d’y ajouter notes et discussions.

L’équipe technique ne sera pas en reste car si les clients pourront consulter le prototype ‘’fonctionnel’’, les développeurs quant à eux auront accès à un mode d’inspection pour chaque vue leur permettant d’aller chercher toutes les informations utiles à leur travail (couleurs, tailles, font etc.). Enfin toutes les ressources seront également générées et disponibles au téléchargement. InVision dispose d’une application mobile et un mode embarqué (iframe) de vos prototypes. D’autres services tiers peuvent y être adjoints comme Basecamp, Trello, HipChat, GitHub, Jira.

Les avantages

Grâce aux outils que l’on vient de voir il vous sera désormais possible de maintenir à jour de nombreux mockups sans effort. La modification du design de votre application étant simplifié il vous sera alors aisé de tester de nombreuses versions, de mettre à jour votre projet InVision et de faire rentrer toute l’équipe dans le processus créatif. Il sera encore plus facile de partager les vues validées avec votre équipe technique et de leur donner accès aux ressources nécessaires. Terminé la documentation tout cela est automatisé, terminé les exports d’assets, terminé les versions obsolètes en circulation, terminé les emails pour collecter du feedback. La liste des bénéfices est sans fin et je vous conseille de tester cette solution et d’échanger dans les commentaires. Sketch dispose d’une version d’essai, Craft est distribué gratuitement et InVision propose un plan free (un prototype) pour débuter.

Les inconvénients

Sketch n’est disponible que sur Mac ce qui peut poser problème. Certains copier/coller d’élements vectoriels depuis Illustrator peuvent vous demander quelques retouches. Il faut savoir quand s’arrêter pour concevoir une librairie de composants réutilisables car dans le processus initial de recherches cette dépense de temps supplémentaire n’est pas forcément judicieuse et peut stopper votre élan créatif. Sur de très gros prototypes le temps de génération et d’upload de toutes les ressources peut prendre du temps. Les transitions sont encore sommaires avec Craft et si votre application est riche dans ce registre il vous faudra passer par FlinTo ou Framer pour parfaire cet aspect.

Conclusions

Nous autres designers passons un temps certain à la gestion de versions, à la validation avec nos clients, à la documentation et cela ralenti un processus itératif qui, quand il est bien appliqué, permet de satisfaire d’avantage les demandes du marché. Les développeurs connaissent bien cela et ont depuis longtemps les outils requis pour leur simplifier la vie. Sketch, Craft et InVision nous ouvrent ces portes, alors prenez le temps d’essayer, je pense que certains seront surpris par l’efficacité de cette formule.