Optimiser son workflow design pour collaborer avec les développeurs

En tant que UX/UI Designer, je suis responsable des premières étapes de chaque nouveau projet ce qui fait que mes axes de réflexion et mes choix orientent les futurs développements. Il est important d’avoir une vision globale du projet et de ses fonctionnalités pour pouvoir déterminer, et fournir à l’équipe de développement (Back & Front), toutes les données nécessaires.

Un des facteurs clés de succès d'un projet ? Fournir des livrables SMART : Spécifiques, Mesurables, Acceptables, Réalisables et Temporellement définis.

Dans cet article, je vais vous présenter un extrait de notre méthodologie afin d'optimiser les relations techniques (dont les échanges de fichiers) entre l'équipe de design et de développement. Notre méthodologie a continuellement évolué depuis les débuts de l'agence, et elle continuera encore, alors n’hésitez pas à nous aider à l’améliorer.

Il est important de noter que les développeurs doivent êtres impliqués dès les premières étapes créatives, pour permettre aux designers d’avoir leurs retours et avis, et ainsi définir les limites et contraintes techniques générales.

1/ L'arborescence

L’arborescence joue un rôle essentiel durant la première phase du projet. En effet, elle définit la première image du site aux yeux de tous et permet :

• Pour les développeurs : de visualiser les fonctionnalités, les liens de navigations et le fonctionnement général du site.
• Pour les clients : de déterminer plus rapidement les différentes étapes d’itération en établissant leurs priorités.

J’utilise Ouvre une nouvelle fenêtreSketch pour la réaliser, avec 4 niveaux pour construire toutes les connexions. Cet outil me permet d’avoir une liberté graphique et de réflexion a contrario de logiciels type Ouvre une nouvelle fenêtreXMind.

2/ Wireframes

Quand vous commencez à réaliser les wireframes, vous ne devez pas être interrompu ; ce n’est pas le bon moment pour débattre sur les solutions complexes et leurs alternatives techniques. L’objectif de cette étape est d’explorer le champ des possibles pour trouver la meilleure réponse aux besoins de l’utilisateur final et non de faciliter le travail du développeur.

Tout est possible, c'est juste une question de temps.

Une sélection, basée sur la cohérence de la navigation tout au long du site, est effectuée parmi les meilleures wireframes réalisés. Elle est présentée aux parties prenantes (équipe presta & donneur d'ordre) pour valider les choix. Il est important d'intégrer des pistes alternatives pour nourrir le débat d’idées.

Le rendu sur Sketch est beaucoup plus proche du rendu web que via Photoshop, et ça change tout pour le développeur qui récupère le travail.

Conseil

Soignez l’organisation de vos fichiers, pour vos collègues qui peuvent (et doivent) avoir accès à vos fichiers. Nommez, groupez et hiérarchisez vos calques de manière propre et claire.

Ouvre une nouvelle fenêtre

3/ Prototypage

Le prototypage est une simulation de navigation entre les différents wireframes réalisés. Ouvre une nouvelle fenêtreInVision est une solution parfaite pour cela. Vous y importez vos maquettes, définissez les zones de clics, les cibles et le comportement sur chaque page, et vous obtenez votre prototype.

Il permet ensuite de communiquer avec l’équipe et le client pour avoir leurs retours et surtout avoir une première analyse in-situ sur votre travail.

Les développeurs Back pourront ainsi affiner leur compréhension des fonctionnalités alors que les Front pourront visualiser, adapter ou créer des interactions (animations, hovers, …), directement sur InVision.

4/ Maquettes + GUI

Bien évidemment, la présentation des maquettes est l’étape la plus attendue à la fois par le client qui va obtenir une vision très proche du résultat final, mais également par les développeurs qui prennent connaissance des éventuelles évolutions. Cette étape permet donc aux développeurs back d’adapter leur développement fonctionnel en conséquence, mais surtout aux front de bien vérifier la cohérence des composants web au travers du site.

Une fois les wireframes et le premier prototype réalisés, je duplique mon fichier sketch et le renomme en mockups.sketch. Les wireframes servent de modèles aux maquettes ce qui permet d'économiser beaucoup de temps car je n’ai pas besoin de recréer tous les éléments mais simplement de modifier le style des symboles en ajoutant de la couleur, des textures, des images - le tout dans Sketch.

Le G.U.I (Graphic User Interface) regroupe l'ensemble des symboles et les différents éléments de l'interface (boutons, typos, couleurs, cards, inputs ect...)

L'ultime étape concerne le développement du G.U.I sous la forme d'une interface dans laquelle les développeurs back vont pouvoir piocher les différentes briques pour construire les fonctionnalités. Cette étape est réalisé par un développeur front après validation des maquettes par le client.

5/ Inspect by invision

Pour l'intégration des maquettes nous utilisons Ouvre une nouvelle fenêtreInspect (InVision) qui permet aux développeurs de connaître les espacements entre les différents blocs, de récupérer la découpe (images, icônes). il permet aussi d'obtenir quelques lignes de CSS. Bref c'est la fonctionnalité qui vient compléter le workflow de A à Z avec uniquement deux outils pour tout faire : Sketch + InVision."

6/ Conclusion

Cette méthodologie nous a permis d'optimiser la relation entre mon travail et les différents développeurs de l’agence. Elle permet d’offrir des livrables qualitatifs tout au long du process de création, ce qui permet de provoquer la confiance avec le client et le débat d’idées autour des fonctionnalités et de leurs actions attendues.

Nous sommes toujours en veille sur les nouveaux outils qui peuvent faire évoluer ce process, aussi si vous avez des suggestions à nous faire, ce sera avec plaisir que nous les étudierons. :)