Vers une pénurie de (bons) UI Designers ?
“oui ce monde est mal foutu, mais rendons le beau”
Les UX designer
On dirait que depuis quelques années, tout le monde se rend compte, que tout est mal foutu autour de nous. Que les portes ne s’ouvrent pas dans le bon sens, que l’eau coule trop près du rebord du lavabo, qu’on devrait changer ceci et cela pour rendre notre vie plus agréable. (Train, avion, queue au Monop Linkedin devient un cahier de doléances inépuisable pour un UX)
Bref tout le monde veut améliorer notre quotidien et le rendre plus agréable, dénué de ces petites frictions qui nous gâchent la vie. Et nous avons donc, depuis quelques temps un nombre important et croissant de User Experience designer — UX — sur le marché du travail (et c’est super !).
Et puis nous avons les UI
L’UI est une discipline entièrement à part de l’UX.
Vous allez me dire il n’y à pas d’UI sans UX ce n’est pas faux (quoique🤔), et tout comme nous observons une hyper spécialisation des métier UX, il en va de même pour la UI. Néanmoins le métier est plus dépendant de la technologie et des supports, les lignes bougent moins vite, il est plus technique et attire moins de candidats aux rares (et bonnes) formations existantes.
UX/UI la faute de l’école ?
Soyons francs, 80% des élèves dans les nouveaux cursus UX/UI sont plus intéressés par l’UX qui est vue (à tort) comme la discipline noble vs l’UI.
Le traitement de L’UI est insuffisant dans ces filières (à part dans une ou deux écoles vraiment portées sur les arts) on retrouve souvent des introductions à la User Interface, des initiations à Sketch, XD, Figma ? Mais en revanche, aucun enseignement sur la culture graphique, un poil de technique (bitmap/vectoriel au moins …). À l’inverse les “vraie” écoles d’art forment peu aux outils numériques appliqués au web. C’est un peu le serpent qui se mord la queue …
Premier constat: L’UI à besoin de sa propre filière de formation dédiée ! Arrêtons avec le couteau suisse l’UX/UI.
UX/UI le mythe du couteau suisse
Les “couteaux suisses” ces profils Full Stack ont connu leur heure de gloire il y a quelques années. Compétents en design web, développement front-end, un peu de back et gestion de serveurs, ils rendaient aisément service à des petits clients en faisant un peu de tout. Ils ont aujourd’hui quasiment disparus à cause de la spécialisation des métiers.(Framework js pour le dev, formations UX/UI pour les designer et responsable de l’expérience utilisateur)
En fait un bon UI c’est quoi ?
Si nous devions lister l’ensemble des compétences que doit acquérir un User Interface Designer la liste donnerait le tournis (ce qui justifie mon point 1 sur la formation).Je vais néanmoins (tenter) de citer les grandes catégories avec les différentes courbes d’apprentissage sur une dizaine d’années, de junior à senior.
Dans cette logique je pense que 10 ans passés à pratiquer de la UI vous aura également appris sur la gestion de projet, l’entreprise et son monde impitoyable, et les gens (ne les oublions pas). Votre curiosité naturelle vous aura poussé à découvrir d’autres métiers et si passé la trentaine, vous n’avez pas décidé de tout quitter pour aller faire du fromage de chèvre dans la Drôme, il est normal qu’un UI alors senior, évolue vers des fonction moins “éxé” et devienne le manager le plus cool de la boîte (car c’est un peu l’artiste 😁), ou bien décide de voler de ses propres ailes en freelance, les débouchés potentiels sont nombreux …
Les compétences d’un UI Designer
Il ne s’agit que d’exemples de progression ! Il est bien sûr impossible de citer l’ensemble des connaissances puisqu’elles sont sans fin ! En revanche la curiosité est une des première composante d’un bon UI qui s’intéressera aussi volontiers, à la réalisation, à l’édition, à la peinture, l’histoire de l’art etc etc …
La photo
Primordiale dans le design d’interface, savoir retoucher une photo, l’exporter dans les bons formats, demande des bases théoriques surtout si vous êtes un jour amenés à créer vous mêmes vos images ! Nul besoin d’être un expert sur photoshop qui est une usine à gaz mais acquérir peu à peu une solide maîtrise des outils de colorimétrie, des subtilités du tampon de duplication et des ses modes de diffusion, savoir détourer proprement avec les bonnes techniques vous rendra grandement service !
️⭐️
- Les bases de la photos et des règles de photographie (cadrage, plans, choix des objectifs …)
- notions de retouches basiques.
⭐️⭐️
- Colorimétrie, chromie, effets et styles de calques. (Teinte, saturation, luminosité, balance des blancs …)
- Mise en situation de mockup pour présentation.
- Composition sur photoshop.
- Connaissance des outils de retouche et remplacement.
⭐️⭐️⭐️
- Bonne connaissance de la retouche photo (outils, lumières, Pinceau, textures…)
- Production rapide de contenu déclinable
- Automatisation des tâches via des scripts.
Typographie
La base et le secret d’un design réussi ! L’apprentissage de la typographie est un parcours long et sinueux. Branche complètement indépendante du design au sens large, des femmes et des hommes y consacrent leurs vies depuis des siècles tâchons de leur rendre honneur dans nos interfaces ! Notre but n’est pas de devenir typographe mais de savoir retranscrire une identité via nos choix de typos.
️⭐️
- Connaître les principales familles de typographies (Serif, sans-serif …)
- Savoir distinguer les plus connues (Arial, Helvetica, Futura, Didot, Avenir, Comic Sans MS …)
- Apprendre le vocabulaire de la typographie (Graisse, chasse, oeil …)
- Connaître les Google Fonts. (bientôt vos meilleures amies)
️⭐️️⭐️
- Maîtriser le “Font Pairing” l’art de lier les typos entres elles.
- Être à l’aise sur le vocabulaire afin de savoir transmettre ses idées.
- Savoir reconnaître les typos les plus utilisées à l’oeil nu.
️⭐️️⭐️️⭐️
- Savoir retranscrire une idée un branding via la typographie,
- Retoucher une font pour un design ou un Logo.
- Savoir rythmer un design en jouant sur la typographie.
Les couleurs
Couleur et typo sont le duo gagnant d’une UI réussie. Non pas que le reste ne compte pas mais souvenez-vous, les premières Interfaces utilisateurs, n’étaient que typo et couleurs. Les couleurs jouent un rôle primordial dans l’identité graphique d’un marque, identité qui doit transparaître dans la UI.
️⭐️
- Connaître la psychologie des couleurs.
- Savoir utiliser les modes colorimétriques (CMJN/RVB)
- Créer des palettes cohérentes, et savoir limiter ses choix de couleurs.
- Ne Jamais utiliser de noir 100% 🙂
️⭐️️⭐️
- Hiérarchiser l’information grâce à la couleur.
- Maîtriser les modes avancés tels que HSL et créer des palettes basées dessus.
- Maîtriser les notions de contrastes.
⭐️⭐️⭐️
- Créer des systems de palettes de couleurs pour des applications multi-usage.
- Maîtriser la création et la gestion avancée de palettes sur logiciel.
- Connaître et maîtriser les outils pour créer des palettes de couleur.
et “Last but not Least”
Les logiciels
Citons le trio gagnant, Sketch, XD, Figma semblent mener la course, d’autres logiciels font une petite percée en entreprise, parmi eux, les très bon Protopie, Framer X, Principle et mon préféré Origami Studio (nous y reviendrons, et non je ne citerais pas invision studio !)
Autour de ces logiciels gravitent tout un tas de solutions tierces, hébergement des design, Hand-Off, Versioning, Test en ligne etc etc. C’est un milieu qui bouge très vite, et il est parfois dur de suivre toutes les nouveaux plugins/solutions qui sortent chaque semaine !
️⭐️
- Connaître les bases des 3 logiciels majeurs et leurs spécificités
- Savoir suivre une grille et les règles d’un layout (negative space, columns, alignement …)
- Travailler proprement, nommer ses calques et artboard(pitié 🙏). -
- Commencer à stocker des pack d’icons, illustration, faire sa culture graphique !
- Se créer un compte Pinterest !
️⭐️️⭐️
- Maîtriser les raccourcis claviers des logiciels (pitié 🙏) pour travailler vite.
- savoir optimiser son espace de travail selon ses habitudes et les besoins de production.
- Choisir le bon logiciel suivant le projet.
- Maîtriser les librairies et symboles (l’atomic Design) ainsi que le prototypage.
- S’intéresser à d’autres logiciels UI plus avancés ou proposant une autre logique !
- Maîtriser les plugin et savoir y recourir au bon moment pour optimiser sa productivité.
- Créer des UI Kit Basiques et réutilisables.
️⭐️️⭐️️️⭐️️️
- Grande aisance sur logiciel de création.
- maîtrise de la conception vectorielle dédiée à l’animation.
- Si possible connaissance de After Affects (dans les limites de ce qui est nécéssaire à la UI ) et d’un logiciel avancé tel que Origami.
- Savoir manipuler de la data et du .json pour travailler avec de vraie données dans les logiciels.
- Créer et maintenir des Design System.
Et la compétence qu’on oublie tout le temps …
Le code !
Si nous ne devrions plus utiliser le terme UX/UI c’est parce qu’au final un UI est bien plus à même de travailler avec des front-end developers, qu’avec des User Experience Designer.
Car lorsqu’il s’agit de préparer une animation sur After Effect puis de l’exporter sur votre site web, votre UI designer passera plus de temps à côté du développeur, à parler ease-in et ease-out, qu’à parler conception, et heuristique de Bastien et Scapin avec l’UX.
N’oublions pas que lorsqu’un UI travaille, il prépare des fichiers qui sont voués à la production. C’est à dire qu’il doit penser développement et c’est là ou le bat blesse.
Les UI designers ne connaissent pas le code 😱
On dit souvent qu’il faut un langage commun aux équipes et il se trouve que le UI et les front-end en partage un sans le savoir …
Quel est le langage commun des front-end et des UI Designer ?
Le code front-end, le HTML, le CSS (aujourd’hui le SASS) le javascript.
Un UI doit créer ses interfaces en pensant H1,H2,H3, en se disant qu’un Hero Paragrah nécessite plus de line-height, en analysant les zones, et en repérant les patterns pour pouvoir identifier la navigation qu’il présentera au développeur.
Il parlera de nav-bar, de off-canvas, de margin et de padding. Il parlera de state hover, focus … De path .svg et d’export retina X2, et saura penser ses layout pour du multi-devices.
D’expérience, la qualité la plus appréciée d’un bon UI au delà de la “beauté” de ses design et du respect des règles, c’est sa capacité à livrer des fichiers propres et guider les développeurs front, dans le processus d’intégration. De plus, il est toujours appréciable de suivre la mise en production de ses design afin de s’assurer qu’ils soient bien intégrés par les artistes du code.
Il y aussi, une idée de crédibilité derrière. On ne vous demande pas de savoir coder, j’ai évoqué plus haut la complexité des framework aujourd’hui, mais de comprendre comment ils marchent !
Car en étudiant la manière dont travaillent les front-end developers, vous vous apercevrez qu’elle est très similaire à la votre sur certains points. Comme le fait de penser en composants, de les diviser en states, de faire appel à des fonctions qui en appellent d’autres, comme nous UI Designer travaillons avec des librairies qui impactent tous nos composants, des occurrences de symboles, et des styles réutilisables…
Mais est-ce vraiment l’avenir ?
Certains pensent que l’avenir est au Design to Code, c’est à dire la reconnaissance par un service/plugin des composants d’un design afin de générer automatiquement le HTML + CSS. Honnêtement je trouve que ce système à largement montré ses limites depuis très longtemps, je crois bien plus aux solutions tierces, le plug-in Sketch to React est assez prometteur dans ce sens. À la limite …
L’avenir de la UI est-il le Visual Coding ?
Des solutions comme l’excellent Webfow permettent au Designer UI de s’exprimer pleinement. Webflow est un exemple appliqué aux sites web, mais il permet déjà de réaliser de très belles choses avec des connaissances basiques en front-end (On est loin de l’arrachage de cheveux des wordpress builder).
Mais il manque à Webflow une couche de logique et de nombreux designers se plaignent des limites du prototypage sur logiciel (XD et son auto anim étant ce que l’on fait de mieux). Pour cela il y a des logiciels complexes, le plus complet étant Origami Studio avec son système de patch et de conditions qui s’approche vraiment d’une “logique de développeur”.
Je ne pense pas que l’animation “Timeline” ne représente un quelconque interêt sur un projet complet. En tout cas pas dans sa forme actuelle. C’est très bien pour en mettre pleins les yeux sur Dribbble mais ce n’est absolument pas gérable sur une application complète, que ce soit en terme d’usabilité et de performances.
Pourquoi une pénurie ?
Parce que le métier se dirige vers une complexité de plus en plus grande, et que nous allons avoir besoin de spécialistes qui au delà de penser UI pensent logique, cohérence et optimisation des workflow UI jusqu’au Hand-Off (Livraison aux développeurs).
Parce que la UI va s’automatiser d’une certaine manière, en s’appuyant sur un système de “framework” et qui dit framework dit élément préconçus et réutilisables (animations, composants, icons …) et de nouvelles choses à penser/créer.
Parce que les UI/UX négligent à voir ce côté de leur métier qui est pourtant pour eux l’aboutissement final de leur travail (sans dev pas de produit fini !)
Parce que si tous les éléments que j’ai cité depuis le début de l’article ne nécessitent pas 3 à 5 ans d’études ou des longues heures d’apprentissage en autodidacte, et des heures et des heures de pratique je jette l’éponge 😑
Ne mélangez plus UX et UI très bientôt les User Interface designers seront votre meilleur secours lorsque vous aurez besoin d’un prototype 100% réaliste et fonctionnel pour que votre client ait un “effet wahou” à la prez client😛
Merci de m’avoir lu jusqu’ici, la semaine prochaine, nous parlerons du futur de la UI et nous creuserons un peu cette histoire de code et de logique. Nous parlerons aussi des nouveaux supports sur lesquels les UI interviendront
🙌 Restons en contact !
Retrouvez-nous sur Linkedin et Twitter.
Forme-toi à Figma et à la UI avec The Cacatoès Theory !
Vous voulez travailler avec nous ?
➡️ Visitez notre site https://www.thecacatoestheory.com/
