Comment devenir UI Designer : paroles d’une experte du design d'interface

Vous êtes passionné de design ? Vous aimez donner du sens par le visuel ? Vous êtes minutieux et organisé ?  Alors il y a de fortes chances pour que l’UI vous permette d’exprimer vos talents.

Christelle Lézé, intervenante à GOBELINS, revient sur son très riche parcours professionnel, sur ce qui fait une bonne UI aujourd’hui et sur la question qui nous anime toutes et tous : quelle est la différence entre l’UI et l’UX ?

Avec près de 20 ans d’expérience, comment êtes-vous devenue UI Designer ?

J’ai débuté en suivant des études de communication visuelle, bien avant que le web ne devienne un canal majeur.

À cette époque, j’étais également en alternance dans une petite agence parisienne où l’on travaillait essentiellement sur de la communication print (plaquettes, fiches produits, brochures, annonces presse…).

Par la suite, je suis devenue directrice artistique. Et parce qu’une petite structure implique de toucher un peu à tout, j’ai démarré dans la création de sites web avec la conception de maquettes sous Photoshop.

Nous n’avions pas du tout les mêmes contraintes qu’aujourd’hui (compatibilité mobile, tactile…) ni les mêmes possibilités techniques. Créer des sites Internet demandait un travail moins conséquent.

Par la suite, j’ai rejoint une autre agence qui a fermé ses portes car nous n’y faisions que du print.

Mes années d'expérience m'ayant ouvert des droits à la formation, j'ai donc suivi un cursus professionnel de webdesigner intégratrice. J’y ai découvert la conception d’interfaces graphiques pour le web, l’intégration en HTML et CSS ainsi que Wordpress.

Début 2012, je me suis lancée en freelance avec un projet de refonte pour un client dans l’événementiel. J’ai réalisé mon premier site du design jusqu’à l’intégration et je n’ai pas arrêté depuis.

Actuellement, je travaille à 95 % sur des projets web, souvent pour des PME dans des secteurs aussi variés que l'événementiel, la santé, la presse ou  la culture. 

Je suis également formatrice UI à GOBELINS où j’enseigne le logiciel Sketch notamment.

Découvrez la formation pro au prototypage

Qu’est-ce que l’UI Design et quelle est la différence avec l’UX ?

Pour moi, ce sont 2 disciplines différentes mais complémentaires. Même si j’ai été formée à l’UX au sein de GOBELINS, je me considère UI Designer et non UX Designer par exemple.

L’UX (ou User Experience) a pour objectif de rendre l’expérience d’un produit ou d’un service aussi efficace et agréable que possible.

Elle s’attache à ce que les besoins, attentes et capacités des utilisateurs soient prises en compte et respectées dès la conception.

À cette étape, il n’y a donc pas de création graphique mais plutôt une réflexion sur les solutions possibles par l’intermédiaire d’ateliers ou de recherches utilisateurs, pour ensuite sélectionner et affiner la meilleure réponse au problème posé. L’UI (ou User Interface) intervient dans un second temps sur la conception des interfaces.

On se réapproprie la charte graphique du client (s’il en possède une) pour chercher à donner du sens par la structure, l’apparence et le comportement d’un site ou d’une application.

On travaille avec des composants graphiques tels que des cards, des boutons ou des formulaires que l’on va reprendre sur l’ensemble du projet en tenant bien évidemment compte des terminaux auxquels l’interface se destine. Pendant un temps, certaines personnes se présentaient sur le marché de l'emploi comme étant à la fois UX et UI. C’est de plus en plus rare car les disciplines se spécialisent.

En tant qu’UI Designers, nous avons par exemple bien plus de points communs avec les développeurs front-end qu’avec les UX Designers.

Les développeurs transposent nos designs par le code. Nous parlons le même langage (padding, margin, statut hover…), travaillons avec des composants et des librairies…

Avez-vous un process UI Design type ? Quels sont les outils que vous utilisez le plus dans votre métier ?

Mon périmètre d’action dépend de l’ampleur du projet.

Pour des projets aux ressources limitées, mes missions sont plus conséquentes puisqu’il n’y a ni UX Designer ni développeur impliqués.

Je démarre ainsi toujours par un cadrage de la mission pour préciser les objectifs et les enjeux du projet grâce à un questionnaire. Je clarifie le besoin, le budget ou encore les délais.

Puis je travaille sur l’arborescence et la hiérarchisation du contenu en listant l’existant, en identifiant les éléments manquants et en organisant les contenus par grandes thématiques grâce à la méthode du tri de cartes.

Je réalise ensuite un zoning (généralement sur papier) pour définir la composition de chaque page et vérifier qu’il n’y a pas d’oubli. Lorsque le client souhaite être pleinement impliqué, je propose aussi des wireframes détaillant les aspects fonctionnels et ergonomiques sur desktop et mobile.

Une fois les wireframes validés, je débute la réalisation des maquettes en élaborant un style guide en parallèle.

Le style guide rassemble les éléments d’interface récurrents : les barres de recherche, la navigation, le footer, les styles de texte, les couleurs, l’iconographie… Il permet à l’équipe en charge d’utiliser les mêmes principes graphiques sur l'ensemble du site ou de l'application.

Après avoir validé le design, je me concentre enfin sur l’intégration de ma maquette au sein d’un thème Wordpress sur-mesure.

Pour les plus gros projets, j’interviens après l’UX Designer qui me transfère les wireframes et l’arborescence. Je me concentre sur l'UI, la création d'un style guide et l'export des composants.

Ces clients recourent plus rarement à Wordpress car ils ont des besoins plus spécifiques. Je partage alors mes maquettes avec l'équipe de développeurs que je dois guider durant le processus d’intégration.

Je peux ainsi suivre leur mise en production et vérifier qu'elles sont parfaitement intégrées.

Il n’existe pas de User Interface idéale mais à quels critères une très bonne UI doit répondre ?

Une interface que l’on qualifie de “bonne” UI doit effectivement répondre à plusieurs exigences : 

• Elle doit être claire, simple et efficace, sans éléments graphiques superflus. L’utilisateur doit trouver ce qu’il cherche le plus rapidement possible,
• Elle doit présenter un design cohérent sur l’ensemble des écrans pour refléter l’identité de l’entreprise et conserver l’attention de l’utilisateur,
• Elle doit être responsive et utilisable en tactile. Aujourd’hui, on recommande le plus souvent de démarrer la conception par la version mobile (le fameux "Mobile first"),
• Elle doit s’adapter aux habitudes de l’utilisateur, et non l’inverse. Des conventions telles que le logo en haut à gauche, le panier en haut à droite ou les mentions légales dans le footer existent. Il faut en tenir compte.

Dans des styles très différents, j’aime ainsi beaucoup le site Expodcast du Centre de musique baroque de Versailles et celui de Cann Social Tonics, un soda au cannabis.

Le site Expodcast du CMBV est un très bon exemple de design à la fois simple et dans l’air du temps tout en respectant les codes propres au baroque. Le rendu est très efficace et les effets d’animation au clic très subtils.

Cann Social Tonics propose une toute autre expérience, riche en animations et où la typographie et les couleurs vives occupent une très grande place. L’adaptation de ces animations au format mobile est particulièrement remarquable.

Qu’est-ce qui fait un bon UI Designer aujourd’hui ? Quelles compétences faut-il pour se démarquer sur le marché de l’emploi ?

La qualité principale est la curiosité je pense. Il faut être en veille permanente, se tenir informé des tendances car le milieu évolue TRÈS vite et apprendre en continu.

Il n’est pas possible de penser que l’on pourra utiliser le même outil pendant 20 ans. D’ailleurs, il n’existe pas une mais des solutions leaders aujourd’hui et nous n’avons aucune certitude que les logiciels que l’on utilise actuellement existeront toujours dans quatre ou cinq ans.

Il faut donc maîtriser a minima Sketch, Figma et Adobe XD et s’intéresser de près aux outils qui permettent de concevoir des animations tels que Principle, Framer X ou After Effects.

La rigueur est également de mise. Il faut savoir :  

• Appliquer les principes de base du graphisme,
• Maîtriser la sémantique de la couleur et de la typographie,
• Être familier avec les grands systèmes de conception (Material Design de Google, Human Interface Guidelines d’Apple…),
• Ordonner et nommer ses fichiers pour que les développeurs puissent les réutiliser,
• Argumenter ses choix graphiques.

Et bien sûr, s'intéresser à d'autres disciplines, telles que le print, la photo ou encore la peinture…

Quels conseils donnés à un futur UI Designer ?

Je recommande vraiment aux débutants de démarrer leur carrière en agence afin d’être en contact avec d’autres UI et UX Designers ainsi que des développeurs car c’est très formateur.

Il ne faut pas hésiter non plus à sortir de sa zone de confort en pratiquant d’autres logiciels car, comme je le disais plus haut, tout va très vite.

D'après les sondages du site UX Tools, si Sketch était encore l’outil le plus utilisé en 2019, Figma l’a devancé en 2020 notamment grâce à ses fonctionnalités cloud et collaboratives, très utiles dans le cadre de la crise sanitaire et de la mise en place du distanciel !

Comment rester à l'écoute des tendances ?

D’un point de vue professionnel, certains sites sont absolument incontournables pour s’inspirer lorsque l’on est UI Designer. 

Ils regorgent d’exemples tous plus inspirants les uns que les autres et je pense notamment à : 

• Awwwards,
• CSS Design Awards,
• Behance,
• Dribbble,
• Medium,
• UX Republic,
• ...

Plus personnellement, je suis passionnée par le letterpress, une technique d’impression sur du papier très épais qui permet de donner un effet de relief. Pour moi, c’est la Rolls-Royce de l’impression.

Depuis plus de 15 ans, je suis par exemple le travail de Fabien Barral (plus connu sous le pseudo de Mr Cup), un designer graphique très talentueux, connu entre autres pour ses magnifiques calendriers en letterpress qu'il édite chaque année en collaboration avec d'autres designers.

Ses créations occupent une place de choix dans mon bureau !