NumeriCité a de multiples visages. L’un d’entre eux, c’est l’édition de solutions numériques. C’est pourquoi cette semaine, nous allons parler technique et plus exactement design UX/UI. Pour la mise en page des plateformes web que nous développons pour nos clients, nous utilisons des logiciels dédiés. Voici un comparatif d’Adobe XD et Figma, deux solutions dominantes du marché possédant chacune ses points forts.
Il conviendra, dans un premier temps, de définir les termes d’UX et UI et d’expliciter le processus auxquels est soumis notre designer, auteur de cette étude. L’UX, c’est l’ensemble de l’expérience de navigation et d’utilisation de la plateforme : très concrètement, c’est la définition de l’emplacement des fonctionnalités et des éléments d’information. L’UX est représentée par le wireframe, ou maquette de fil de fer : il s’agit de positionner chaque élément sous forme de bloc.
Idéalement, c’est une étape qui résulte d’une réflexion en consultation avec des utilisateurs potentiels, à travers des études, des focus groupes ou encore des questionnaires.
C’est à partir du wireframe que l’on va pouvoir constuire l’UI, l’interface utilisateur. Les blocs sont remplacés par des éléments graphiques, c’est ainsi qu’est façonnée la maquette qui va donner un aperçu esthétique du produit fini. Pour transformer un wireframe en maquette, il faut au préalable avoir construit une charte graphique, un aspect que nous élaborons dans cet article avec l’exemple de TextStyles.
Enfin, la troisième étape, c’est le prototypage, c’est-à-dire la construction d’une application démo avec les fonctionnalités principales. On y expérimente le parcours de l’utilisateur et l’apparence des différentes étapes de son expérience. C’est la dernière étape de validation avant le démarrage du développement de l’application en elle-même.
Des solutions existent, donc, pour accompagner toutes ces étapes du processus de construction d’un outil numérique.
Adobe XD, une valeur sûre
Adobe tire sa force de son expansion réussie sur le marché de la création multimédia. Sa gamme de produits est large et répandue que tous les designers du monde ont déjà manipulé une interface Adobe au moins une fois. Aussi, ses principes de fonctionnement (navigation, raccourcis…) sont familiers de tous. Sobre et ergonomique, Adobe XD offre une expérience fluide. L’aspect prototypage est particulièrement réussi, permettant de prototyper des interfaces en quelques heures.
La force d’Adobe XD lui porte aussi préjudice. Dans le milieu du design, le logiciel est vu comme peu professionnel du fait de son accessibilité. Mais les mises à jour fréquentes apportent à la fois des fonctionnalités innovantes mais aussi inspirées de la concurrence. Parmi elles, les fonctions de collaborations, qui ne sont pas encore au point, contrairement à celles de Figma, l’un de ses concurrents.
Figma, au service de la collaboration
Figma est tout simplement LA référence en terme de travail collaboratif. Un simple lien HTML permet de partager des éléments à n’importe qui et chacun peut y apposer ses commentaires. Idéal pour partager la conception et la validation d’un projet entre différents métiers.
Son interface est en revanche plus complexe que celle de son rival d’Adobe. Pour un novice, l’outil est plus difficile à prendre en main. La notion de composant est moins compréhensible sur Figma. Elle est cependant plus complète et permet, une fois maîtrisée, de réaliser des gains de temps. Par exemple, il est possible de ranger ses composants par type pour les retrouver plus facilement. De manière générale, les plug-ins de Figma sont également plus complets et performants. L’outil s’adresse donc aux utilisateurs expérimentés.
Son plus gros défaut ? L’impossibilité de travailler hors ligne. Figma nécessite une connexion pour mettre à jour les documents. Aussi, pour un projet personnel où la collaboration n’est pas requise, Figma n’est peut-être pas l’outil le mieux adapté.
EN 
FR