Anthony Ferretti, designer d'interface nous présente différentes façons d'utiliser Figma. Avec le Figma d'Osuny, nous pouvons utiliser des ensembles de composants pour fabriquer son site rapidement. https://www.figma.com/community/file/1176490763864113451 (lien externe) L'original d'Osuny est en accès libre et peut être dupliqué.
Anthony présente les wireframes haute-fidélité possible avec Osuny. Une fois le plan de site établi avec le client, nous pouvons choisir ses blocs, tester des contenus et visualiser toutes les pages avec le client, contrairement à l'interface d'administration où nous sommes directement plongés dans les contenus. L'objectif est de partager des exemples pour illustrer les possibilités d'Osuny. Nous disposons de nombreux composants dans les assets de Figma. Par exemple, avec le composant "footer", nous pouvons choisir d'afficher ou non les personnes, les adresses, une barre de recherche, etc. Notre wireframe peut être modifié rapidement. Il est également adapté au mobile et se transforme aisément pour cet affichage. L'idée est que chaque composant soit directement adapté au mobile.
Comme l'explique Arnaud Levy, il n'y a pas de hiérarchie entre les métiers. Anthony est freelance et non salarié d'Osuny. Il crée ces assets, les développeurs s'appuient sur son travail et vice versa avec Olivia et Alex. La structure est saine et les métiers s'influencent mutuellement. Il n'y a pas de position dominante : parfois le design est en avance sur le développement, et inversement. C'est vu comme un processus collaboratif.
Arnaud : "Notre but n'est pas d'être normatif, mais de fournir un fichier sain permettant à chaque designer de créer des fonctionnements spécifiques. Nous voulons normaliser le socle, pas le design. L'objectif n'est pas que tous les sites se ressemblent."
L'onboarding est un sujet important pour Anthony : "Comment prendre en main ce fichier quand on arrive dessus ?" Anthony explique qu'il y a eu des discussions à ce sujet notamment avec Yuna Orsini, Ux designeuse. Il existe plusieurs approches, avec ou sans composants. On peut par exemple prendre le footer, détacher l'instance et repartir de zéro sans utiliser de composants, mais ce n'est pas une obligation. L'idée n'est pas d'imposer une seule pratique de design, mais plutôt de documenter comme pour le développement. Diverses fonctionnalités d'aide sont mises en place. Ce fichier-ci est la source, mais il existe aussi un fichier communautaire. Un gros travail d'onboarding est nécessaire pour la prise en main du fichier.
Par exemple, dans les boutons du fichier source Osuny. Trois niveaux ont été créés : tous les composants sont prototypés à l'avance. De nombreux éléments sont déjà prêts, ce qui permet de créer facilement des prototypes haute-fidélité pour les clients et les tests.
Le travail se fait en interne côté communauté, avec des améliorations de design et diverses tâches. On peut ensuite utiliser les fichiers de la communauté pour créer son propre fichier, avec une liberté totale pour réaliser un prototype haute-fidélité. Arnaud : "C'est formidable de voir d'autres personnes utiliser Osuny, cela crée une vraie communauté."
Il est intéressant d'observer l'impact d'Osuny sur le design web. Au début, avec la logique de blocs, nous imaginions atteindre un niveau standard pour le design web. Pour les sites d'information et d'explication, nous nous en approchons. Il est devenu rare d'avoir besoin de nouveaux blocs. En termes d'usage, cela semble suffisant.
Pour Anthony : "Cela améliore l'efficacité. Beaucoup d'éléments sont déjà établis, on peut rapidement personnaliser un site et aller plus en profondeur dans les détails, c'est très agréable. Arnaud est curieux de voir comment les développeurs vont prendre en main le fichier Figma. Pour lui, il est intéressant d'observer l'alignement et le dialogue design/développement. Pour Arnaud, il s'agit d'un design paramétrique, qui est très proche du code. Il faut veiller à ce que les designers conservent leur liberté. On pourrait envisager un plugin Figma pour récupérer les variables. Il faut un dialogue pour fluidifier le processus design/développement.
Anthony nous explique la méthone VRAP qui permet de défricher des sites complexes en seulement quatre ateliers de deux heures. C'est une méthode de design stratégique : Vision, Relation, Action, Perception. Cette méthode a été développée et éprouvée avec BAM, et elle est documentée ici : https://collectifbam.fr/projets/vrap/. Les données d'entrées sont les contraintes et données du projet. La Relation, par qui et pour qui est fait le projet, avec une étude des acteurs. L'Action : comment réaliser ce projet, les contraintes. Perception : les aspects liés à la forme, l'esthétique, le sensoriel. Ensuite, nous réalisons un moodboard, un plan de site, logigramme, architecture. Pour Anthony, les petits sites nécessitent aussi une méthode et une validation étape par étape. Anthony explique qu'il existe d'autres méthodes assez connues, comme Service Design Tools, il nous montre en exemple une carte d'acteurs : https://servicedesigntools.org/tools/ecosystem-map
Pour Anthony : "L'intérêt avec Osuny, c'est son intégration dans les méthodes de design pour valider et rassurer le client. Il peut donner ses retours et se projeter facilement. C'est une vraie valeur ajoutée."
