Formation continue

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

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.

Cette semaine, nous recevons Christelle Lézé, une professionnelle du User Interface Design et (comme de coutume) intervenante à GOBELINS.

Avec elle, nous reviendrons 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 ?

Portrait de Christelle Lézé

 

Tu as près de 20 ans d’expérience.
Comment es-tu 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écouvrir notre formation pro à Sketch

 
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…

 

As-tu un process UI Design type ?
Quels sont les outils que tu utilises le plus dans ton 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.

wireframe du site ex nihilo

Wireframe réalisé pour le site Ex Nihilo

 

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

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. 
 

 

Homepage du site du Expodcast du centre de musique baroque de versailles

Site internet du Expodcast du centre de musique baroque de versailles

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.

 

Homepage du site cann social tonics

Homepage du site cann social tonics

 

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 à 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…

style guide de Psychologies Magazine

 

 
styleguide de Psychologies Magazine

Styleguide réalisé pour Psychologies Magazine

 

Tu interviens à GOBELINS notamment dans le cadre d’une formation professionnelle à Sketch.
Peux-tu nous en dire plus sur son déroulement et ses objectifs ?

La formation professionnelle à Sketch que j’anime à Gobelins dure deux jours et j'interviens après les deux premiers jours du cours sur l’UI.

Connaître Photoshop et Illustrator est un prérequis. C’est pourquoi nous avons beaucoup de stagiaires graphistes, évoluant souvent dans le print et désirant se former au web, ou bien des webdesigners souhaitant découvrir ce logiciel.

Nous démarrons toujours la formation avec une explication des cas d’usage de Sketch pour ensuite découvrir l’interface.

Bien que Sketch soit aujourd’hui entièrement en anglais, l’outil est assez simple à prendre en main. Les raccourcis par exemple sont relativement proches de ceux de la suite Adobe.

La découverte des outils de dessin vectoriel permettant de dessiner des blocs ou des pictos rassurent aussi les apprenants puisque des fonctionnalités très similaires existent dans Illustrator.

Par la pratique, ils apprennent ainsi les styles de texte, le placement, la manipulation et l’export des images, l'optimisation des symboles, le nommage des calques ou encore la préparation des fichiers.

L’objectif final est d’être capable de réaliser des maquettes graphiques responsives et de savoir préparer et optimiser les différents éléments (images, textes…) pour l'intégration.

Découvrir nos formations continues UI et UX Design

 

Quelles sont les forces de Sketch aujourd’hui ?
Comment a-t-il réussi à s’imposer auprès des UI Designers ? 

Auparavant, on avait l’habitude de concevoir des projets web sur Photoshop par exemple, mais c’était un processus long et fastidieux.

Le logiciel était victime de sa polyvalence et il était difficile pour les clients d’avoir une idée concrète du rendu de notre travail sur leurs écrans. Tant et si bien que certains imprimaient les maquettes sur papier, souvent dans des formats hasardeux, et nous les retournaient agrémentés de commentaires au crayon !

Sketch a changé la donne car c’est un outil pensé pour le web et pour le design d’interfaces.

Il est par exemple facile d’adapter son travail aux différentes résolutions d’écran et lorsque l’on conçoit un écran sur le logiciel, on sait que tout sera effectivement réalisable au moment de l’intégration.

Mais l’aspect le plus intéressant est probablement l’usage des “symboles”. En enregistrant un élément graphique tel qu’un bouton dans sa bibliothèque et en le convertissant en “symbole”, toute modification (de couleur, de typo, d'aspect graphique…) sur ce symbole pourra être répercutée en un clic sur l’ensemble des maquettes.

C’est une des fonctionnalités qui change la vie et fait gagner aux UI Designers un temps considérable.

Sketch est également beaucoup plus collaboratif et facilite le partage d’éléments aux clients ou aux développeurs.

L’équipe en charge du logiciel est vraiment à l’écoute de ses utilisateurs et réalise des mises à jour régulières suivant les demandes. La littérature en ligne est aussi très abondante avec de nombreux exemples d’applications, des UI Kits…

 

homepage de ylio retail

Homepage du site YllioRetail

 

Si tu avais un conseil à donner à 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 !

Malgré tout, Sketch reste l'outil préféré pour l'élaboration des Design Systems et le plus demandé dans les offres d'emploi à l’heure actuelle.

 

As-tu des ressources ou des artistes à nous partager ?
Comment restes-tu à 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 !

travail en letterpress par mr cup

Exemple d’ouvrage en letterpress printing par Mr Cup. Source : Mr Cup

 

Un grand merci à Christelle Lézé de nous avoir partagé sa passion et sa très riche expérience. Vous pouvez retrouver son parcours complet et la contacter sur son profil LinkedIn.

 

 


 

VOS CONTACTS À GOBELINS POUR LA FORMATION CONTINUE :

  • Design interactif : Lucette Berbinan - 01 40 31 41 33
  • Design graphique : Michèle Barber - 01 40 31 41 58
  • Photographie : Gwenaëlle Thomas - 01 40 79 92 74
  • Vidéo : Véronique Da Silva - 01 40 79 92 34
  • Intra (sur-mesure) : Laetitia Denoyelle-Beuque - 01 40 79 92 25
  • ​​Demande d'infos par mail

 

Publié le 6 avril 2021

Retour aux actualités

Actualités similaires

Formation continue

DUIK Bassel : tout sur ce logiciel par un professionnel de l'animation

Qu’est-ce le logiciel DUIK Basse ? l’animation 2D ? le Rigging et l’Inversed Kinematics. ? Christophe Fleury, Professionnel de l'animation, apporte les réponses sur ce logiciel qui fait des merveilles et dont les fondements sont résolument engagés. Pas de panique, son article est accessible même aux débutants !

Formation continue

WEBINAR : tout savoir sur le CPF

Qu’est-ce que le CPF ? Qui peut en bénéficier ? A quoi ça sert ? Comment créer et consulter son compte CPF ? GOBELINS répond à toutes vos questions !

Formation continue

Design Thinking et facilitation : 11 questions à une experte

3 mots : "Innover" pour "se démarquer" : le Design Thinking ("Esprit Design") peut apporter la solution avec cette méthodologie et stratégie d'innovation en s'appropriant les outils du Design pour concevoir des projets de façons moins linéaire et classique et ce, dans tous les domaines même ceux éloignés du Design.

Formation continue

5 témoignages de stagiaires pour la Formation professionnelle à GOBELINS :

Que sont-ils devenus ? 5 anciens stagiaires de la formation continue témoignent dans un article entièrement dédié à leur avis et ressenti en post formation.

Voir toutes les actualités
Revenir en haut de page