Blog
Gagner en efficacité en utilisant les symboles Sketch dès la conception des wireframes.

Partager

Temps de lecture : 7 min


En tant que UX-UI designer chez BigInt, je constate au quotidien l’importance de la communication au sein d’une l’équipe et plus particulièrement au sein de ma propre équipe produit. Penser méthodologie, organisation et partage des fichiers sources dès le début de la conception est vraiment un gain d’efficacité et par conséquent de temps. Chacun sait où il va et comment il doit y aller. Cela vous parait logique, mais c’est loin d’être la réalité… Alors, comment gagner en efficacité en utilisant les symboles Sketch dès la conception des wireframes ?


Psst ! Je sais que le temps est compté. Alors si vous n’avez pas le temps (ou pas envie) de lire tout mon blabla, rendez-vous directement en bas pour un petit résumé.


Organisation et communication, maître mot de l’efficacité ?

Chaque équipe est différente. C’est pourquoi il est nécessaire de modeler les processus de création afin que chaque membre y trouve son compte. Cela passe alors par la communication et surtout l’écoute et le respect d’autrui qui permet finalement de trouver LE fonctionnement idéal. Et c’est justement son appropriation par chacun qui lui permettra d’être respectée et de perdurer dans le temps afin de conserver une organisation fiable et sereine 👌.

La méthodologie que nous avons adoptée chez BigInt ne s’est pas créée en un jour. Il nous a fallu des mois, des heures de communication, de nombreux logiciels, des tonnes de tests (et surtout des tests ratés) pour atteindre celle qui nous convient à tous. Elle n’est d’ailleurs pas définitive et est en perpétuelle amélioration au fil des jours.


Comment y participer au quotidien ?

Chez BigInt, les membres faisant partie du pôle produit travaillent sur un environnement Apple. Par choix et par préférence, nous utilisons le logiciel Sketch comme outil de design principal. Vous le comprendrez alors : la méthodologie exposée dans cet article est basée entièrement sur l’utilisation du logiciel Sketch (désolé pour ceux qui n’utilisent pas Sketch…).

Depuis la version 47 de Sketch, il est possible de créer des librairies de symboles à partager entre documents, et donc entre coéquipiers. Avec les améliorations des dernières mises à jour, il est maintenant possible de partager sur une même librairie, des symboles, des styles de textes et des styles de layer. Sketch a exaucé mes rêves les plus fous avec ces nouvelles fonctionnalités !
C’est réellement depuis l’apparition de ces nouvelles fonctionnalités que nous avons fait évoluer notre process de conception vers quelque chose d’efficace. Dorénavant, nous pensons efficacité dès la conception des wireframes contrairement à avant où nous la pensions qu’à partir de l’étape d’UI design.


Alors quelle est la recette magique ?

1re étape : collaborer sur de bonnes bases

Afin de collaborer comme il se doit, nous avons mis en place via Google Drive une librairie Sketch synchronisée. – Il est maintenant possible de le faire avec Sketch cloud, mais pour des questions de sécurité et de simplicité, nous avons décidé de garder le fonctionnement Google Drive — .
Pour ce genre de collaboration, les notions les plus importantes sont la communication et le partage d’une vision commune. Avec mon acolyte UI Designer, nous nous sommes alors mis d’accord sur les nomenclatures et la conception et l’organisation des symboles, des styles de texte et des styles de layer à adopter au sein de nos librairies communes.
Nous nous engageons chacune à respecter au mieux ces règles afin de permettre une compréhension et un partage rapide des assets communes. (Imaginez si nous avions chacune une façon de ranger, de nommer, de concevoir… On ne s’y retrouverait plus, et si une personne du pôle n’est pas là, c’est la débandade ! 😱



Exemple de règle :

Les librairies que nous utilisons pour nos projets se nomment obligatoirement « nomDuProjet_library_partiesSpécifiqueDuProjet.sketch ».

Par exemple pour la refonte du site général BigInt, nous aurons : « bigint_library_vitrine.sketch » et pour la refonte de l’admin BigInt nous aurons : « bigint_library_admin.sketch » dans le cas bien sûr où les librairies de la vitrine et de l’admin doivent être différentes. Sinon nous opterons pour une librairie plus générale sous le nom de « bigint_library.sketch ».




2e étape : des wireframes optimisés

Après les phases préparatoires en amont (récolte et définition des besoins, veille, benchmark) je vaque alors à mon occupation favorite : la conception des wireframes.
Durant cette conception, il m’arrive de trouver des symboles récurrents comme les boutons ou les éléments de formulaire. Au lieu de faire un simple copié-collé comme je pouvais le faire auparavant (comme je ne comptais pas réutiliser les wireframes, je ne voyais pas l’intérêt de « perdre » du temps à faire des symboles), je les envoie maintenant dans une librairie qui construira mon « UI Kit » pour mes wireframes.

En plus de nos règles de collaboration, j’utilise lors de la construction des wireframes des plugins d’automatisation comme Fluid ou Paddy. Ceux-ci me permettent de donner des propriétés dynamiques à mes éléments.
Par exemple, afin d’obtenir toujours un padding de 10 20 dans mes boutons, j’utilise Paddy qui me permet une adaptation automatique de l’élément en fonction de son contenu (oui oui, c’est vraiment pratique !).

En parallèle de mon travail, l’UI Designer construit son UI Kit (le vrai cette fois-ci avec de jolies couleurs, pas juste en nuances de gris) avec les éléments de base comme les éléments de formulaire, les boutons primaires et secondaires, les styles de texte, les icônes « basiques »... ainsi que les éléments plus « atypiques » disponibles dans ma librairie wireframes de symboles toujours en suivant nos « règles » communes.

Toutefois, une dérogation majeure doit être faite sur le nom du fichier de librairie ! Comme le travail d’UX est en cours, la librairie UI ne peut pas s’appeler comme nous l’avons défini dans nos règles « bigint_library.sketch », car cela créerait des conflits. Nous avons alors choisi d’ajouter un petit renseignement : « bigint_library_UI.sketch » pour nous aider à différencier les fichiers.



Note :
En plus de la création de l’UI kit pour les wireframes qui me simplifie la vie et me fait gagner un temps considérable, nous créons un template réutilisable et en constante amélioration pour les futurs projets.


3e étape : la magie opère

Une fois les wireframes finis, puis validés par le client, l’UI prend le relai. Je ne touche plus du tout aux wireframes. C’est à ce moment précis que toute l’organisation en amont apporte l’efficacité tant recherchée (roulement de tambour) :

  • • Nous vérifions ensemble qu’il ne manque aucun symbole entre la librairie wireframe et la librairie UI.
  • • Ensuite, si tout est OK, je supprime ma librairie wireframe « bigint_library.sketch » de Google Drive.
  • • Pour finir, ma collègue renomme sa librairie « bigint_library_UI.sketch » en « bigint_library.sketch ».

ET MAGIE ! La librairie wireframe a été remplacée par la librairie UI et tous les éléments se sont mis à jour ! Comme j’ai utilisé les plugins d’automatisation (Paddy et Fluid), les maquettes sont dynamiques et s’adaptent au nouveau design !

Cela parait tellement simple qu’on ne voudrait y croire, mais je vous assure, cela fonctionne vraiment et surtout cela fait gagner un temps réellement précieux afin de rendre rapidement heureux son client ! Et un client heureux, c’est un client qui parle de nous. 😉



Malheureusement, nous sommes actuellement en train de tester cette méthode donc je n’ai pas encore de réels retours d’expérience à vous fournir.
Dans les tests que nous avons effectués pour le moment, le changement librairie wireframes > librairie UI fonctionne correctement. Espérons que ce soit toujours le cas lors du réel passage… 🤞.
Je pense également qu’il nous faut un travail supplémentaire et plus approfondi sur la phase d’automatisation avec le plugin Paddy afin d’optimiser encore plus le passage entre les wireframes et l’UI. Actuellement, j’arrive à faire quelques trucs, mais pas encore assez poussés pour que le passage soit vraiment fluide et optimisé (mais on y travaille, promis) !

Je ne manquerai pas de vous tenir au courant des avancées et améliorations lorsque nous ferons la transition sur le projet actuel. 🙃


Si vous aussi vous utilisez des processus et méthodes pour gagner en efficacité dans vos conceptions graphiques, n’hésitez pas à les partager en commentaire, je serais ravie d’échanger avec vous sur le sujet !




Un résumé pour gagner du temps !

Comme je l’explique à travers différents points dans l’article (aller, prenez le temps, ça vaut le détour d’être lu), je pense personnellement que les qualités essentielles à l’efficacité sont la communication et l’organisation.

J’expose ici, un exemple que je rencontre au quotidien lors de la conception des wireframes et des maquettes graphiques avec le logiciel Sketch. En ajoutant un peu d’organisation, de communication et de rigueur, nous arrivons à un résultat réellement efficace.


Quelle méthodologie utilisons-nous ?

  • • Instaurer et respecter des règles pour la nomenclature, la conception et l’organisation des symboles, des styles de texte et des styles de layer
  • • Créer deux librairies communes : une pour les wireframes (« bigint_library.sketch ») et une pour l’UI finale (« bigint_library_UI.sketch ») à construire parallèlement pour gagner du temps.
  • • Une fois que les wireframes sont vraiment validés par le client et qu’aucune retouche ne doit être faite : commencer le passage wireframes > UI en supprimant la librairie utilisée pour les wireframes et en la remplaçant par la librairie UI.
  • • MAGIE ! Presque aucun travail de remplacement des symboles, styles de textes, ne style de layer de doit être fait. Il suffit « seulement » de jeter un œil et de replacer les quelques éléments qui ne conviendraient pas.

Nous sommes actuellement en train de tester cette méthodologie. Je n’ai pas encore de réels retours d’expérience à vous donner, mais je tâcherai de le faire quand nous aurons atteint ce stade du projet. 😉



comments powered by Disqus