UI design : définition, exemples d'interfaces et outils en 2026

L'UI design, ou design d'interface utilisateur, consiste à concevoir la couche visible et cliquable d'un produit numérique : les couleurs, la typographie, la hiérarchie des informations et les composants avec lesquels l'utilisateur agit. C'est la partie du produit que l'on voit et que l'on touche, par opposition à l'UX qui organise le parcours derrière.

Cet article donne la définition, la différence avec l'UX, cinq exemples d'interfaces qui fonctionnent, les principes à appliquer dès la prochaine maquette, l'état des obligations d'accessibilité en France, les outils utilisés en 2026 et ce que recouvre vraiment le métier sur le marché français.

Qu'est-ce que l'UI design ?

L'UI design est la discipline qui conçoit les points de contact visuels et interactifs entre une personne et un produit numérique. Son objectif n'est pas de rendre un écran joli : c'est de rendre l'action suivante évidente. Une interface réussie se traduit par un utilisateur qui trouve le bouton sans le chercher.

Le sigle UI vient de l'anglais user interface. En français, on parle de design d'interface ou de conception d'interface utilisateur. La discipline est exclusivement numérique : elle s'applique à un site, une application mobile, un logiciel métier, une borne ou un écran embarqué, jamais à un objet physique.

Les quatre briques d'une interface

Quel que soit le produit, toute interface repose sur les mêmes quatre familles d'éléments. Les maîtriser couvre l'essentiel du travail.

• La couleur : une palette restreinte, une couleur d'action unique réservée aux boutons principaux, des teintes neutres pour le reste. Trois couleurs d'accent différentes sur un même écran annulent l'effet de chacune.
• La typographie : une ou deux familles au maximum, et une échelle de tailles fixe. Le corps de texte descend rarement sous 16 pixels sur le web, sous peine de rendre la lecture pénible sur mobile.
• La hiérarchie visuelle : la taille, le contraste et l'espace blanc indiquent quoi lire en premier. Si tout est en gras, plus rien ne ressort.
• Les composants interactifs : boutons, champs, menus, onglets, interrupteurs, messages d'erreur. Chacun doit exister dans tous ses états, pas seulement au repos.

Le dernier point est celui que les maquettes oublient le plus souvent. Un bouton se dessine au repos, au survol, à l'appui, désactivé et en cours de chargement. Un champ de formulaire se dessine vide, rempli, en erreur et verrouillé. Une maquette qui ne montre qu'un seul état laisse le développeur inventer les autres, et l'interface livrée ne ressemble plus à ce qui a été validé.

UI et UX : la différence en une phrase

L'UX définit le parcours, l'UI habille les écrans de ce parcours. Les deux sont indispensables, et aucun des deux ne rattrape l'absence de l'autre.

L'image de la voiture reste la plus claire. L'UX, c'est le confort des sièges, la position de conduite, la sensation de sécurité et la logique générale du véhicule. L'UI, c'est le tableau de bord : la disposition des compteurs, la forme du volant, l'emplacement des commandes. Un tableau de bord magnifique sur une voiture inconduisible ne sert à rien, et une voiture bien conçue avec des compteurs illisibles reste dangereuse.

• L'UX designer mène la recherche utilisateur, définit les personas, construit l'architecture de l'information et produit les wireframes.
• L'UI designer reprend ces wireframes, applique la marque, définit les composants et livre des maquettes prêtes à intégrer.
• Le product designer cumule les deux rôles, configuration la plus courante dans les startups françaises de moins de trente personnes.

Nous détaillons le processus complet dans notre article sur la conception UX/UI, et le rôle du wireframe dans la construction d'une interface y est traité à part.

Cinq interfaces qui fonctionnent, et pourquoi

Les exemples d'UI design servent mieux que les principes abstraits. Voici cinq écrans que nous produisons régulièrement, avec ce qui sépare une version qui passe d'une version qui coince.

Une page de connexion

Un seul champ visible à la fois quand c'est possible, un bouton d'action large, et le lien de mot de passe oublié placé sous le champ de mot de passe, pas en bas de page. Le message d'erreur se place sous le champ concerné et dit ce qui ne va pas, pas simplement que quelque chose ne va pas. La page de connexion est le premier écran du produit pour un utilisateur qui revient : elle mérite autant d'attention que la page d'accueil.

Un tableau de bord SaaS

La règle qui sauve le plus de tableaux de bord : un chiffre principal par bloc, et une comparaison à côté. Un tableau de bord qui affiche douze indicateurs de même taille ne dit rien. L'état vide compte autant que l'état plein : un nouveau client ouvre son tableau de bord sans données, et c'est cet écran qui décide de sa première impression. Nous traitons ce cas dans notre guide sur le design UI/UX d'une plateforme SaaS.

Un formulaire de commande

Le nombre de champs pèse plus que leur apparence. Chaque champ retiré augmente mécaniquement le taux de soumission. Les champs se regroupent par sens, les intitulés se placent au-dessus et non à l'intérieur, et le clavier mobile s'adapte au type de donnée attendue. Un champ de téléphone qui ouvre un clavier alphabétique sur mobile est une erreur d'UI, pas de développement.

Une fiche produit e-commerce

L'image occupe la moitié haute, le prix et le bouton d'achat restent visibles au défilement sur mobile, et les variantes se choisissent avant le bouton, jamais après. La zone de réassurance, livraison et retours, se place juste sous le bouton parce que c'est là que l'hésitation se produit.

Un écran d'application mobile

La zone atteignable au pouce commande tout le reste. Les actions principales vont en bas de l'écran, les actions destructrices ailleurs. Les cibles tactiles font au moins 44 points de côté selon les recommandations d'Apple. Le sujet est développé dans notre article sur la création d'une UI mobile.

Sept principes à appliquer dès la prochaine maquette

Ces principes ne demandent aucun outil particulier. Ils se vérifient sur une maquette existante en dix minutes.

• Une action principale par écran. Deux boutons de même poids visuel créent une hésitation, et l'hésitation coûte des conversions.
• Un espacement sur une grille fixe. Choisissez un pas de 4 ou 8 pixels et tenez-vous-y. C'est le changement qui rend une interface professionnelle le plus vite.
• Un contraste texte sur fond d'au moins 4,5 pour 1 sur le texte courant, seuil du niveau AA des règles WCAG. Le gris clair sur blanc est le défaut le plus fréquent des maquettes qui arrivent chez nous.
• Des libellés qui décrivent l'action, pas le mécanisme. « Envoyer ma demande » vaut mieux que « Valider ».
• Tous les états dessinés, y compris le chargement, l'erreur et l'écran vide.
• Des conventions respectées. La loupe pour la recherche, la corbeille pour la suppression, le panier en haut à droite. Réinventer un symbole connu ne rend pas l'interface originale, seulement plus lente.
• Une cohérence stricte entre écrans. Deux styles de bouton pour la même action à deux endroits du produit sont la marque d'une interface construite sans système.

Ces sept points recoupent des critères d'ergonomie établis, notamment la grille de Bastien et Scapin, référence académique française sur le guidage, la gestion des erreurs et la charge de travail. Notre article sur l'ergonomie d'une interface web reprend ces critères un par un.

L'accessibilité, un cadre légal en France

En France, l'accessibilité numérique ne relève plus du confort. Le référentiel de référence est le RGAA, dont la version en vigueur est la 4.1.2, arrêtée conjointement par le ministre chargé du numérique et la ministre chargée des personnes handicapées. Il compte 106 critères de test, et sa méthodologie est publiée sur le portail officiel de l'accessibilité numérique.

Pour un UI designer, quatre décisions couvrent déjà une large part des critères : un contraste suffisant, un ordre de tabulation logique, un état de focus visible au clavier, et des libellés de champs associés à leur champ. Aucune de ces quatre décisions ne coûte de temps si elle est prise à la maquette. Toutes coûtent une reprise complète si elles sont découvertes après l'intégration.

Le point à retenir pour un dirigeant : le périmètre des organisations concernées s'est élargi et dépasse le seul secteur public. Vérifiez votre situation exacte sur le portail officiel plutôt que sur un article de blog, le nôtre inclus.

Les outils d'UI design en 2026

Figma reste l'outil de référence, et la question de l'outil est de loin la moins déterminante du projet. Un bon designer produit une meilleure interface sur Penpot qu'un mauvais designer sur Figma.

• Figma : fonctionne dans le navigateur, collaboration en temps réel, plan gratuit suffisant pour un petit projet. C'est ce que demandent la quasi-totalité des équipes produit françaises, et c'est le format de livraison attendu par les développeurs.
• Penpot : alternative open source, gratuite, hébergeable sur vos propres serveurs, fichiers stockés en SVG. Le choix pertinent quand la confidentialité ou la maîtrise des fichiers est un critère.
• Sketch : éditeur vectoriel macOS uniquement, très solide, écosystème de plugins riche, mais collaboration moins fluide que Figma.
• Adobe XD : en mode maintenance depuis 2023 et plus vendu en application seule. Ne démarrez pas un nouveau projet dessus.
• Maze : plateforme de test qui rend un prototype Figma testable à distance et transforme les sessions en résultats chiffrés. Utile quand le budget ne permet pas de tests en présentiel.

UI kit ou design system

Un UI kit est une collection de composants prêts à l'emploi. Un design system est ce même ensemble, documenté, versionné et assorti de règles d'usage. Le premier fait gagner quelques jours, le second fait gagner chaque mois qui suit. Nous avons consacré un article à la différence entre UI kit et design system et un autre aux composants qui forment un design system.

Le seuil de bascule, dans notre expérience, se situe autour de trois personnes qui touchent aux maquettes ou de deux produits à maintenir. En dessous, un kit suffit. Au-dessus, l'absence de système se paie en incohérences et en temps de reprise.

Le métier d'UI designer sur le marché français

Le métier se pratique en France sous trois formes : salarié en entreprise ou en agence, indépendant, ou membre d'une équipe externalisée. Chacune répond à un besoin différent.

• En interne : pertinent à partir du moment où le produit demande une charge continue. En dessous, un designer salarié passe une partie de son temps sans sujet prioritaire.
• En freelance : la formule la plus souple pour une mission délimitée. Les plateformes françaises comme Malt et Codeur permettent de comparer les profils, et la facturation se fait au TJM ou au forfait.
• En équipe externalisée : le format que nous pratiquons, avec un abonnement mensuel fixe à partir de 949,90 euros HT par mois pour la formule Prestige, sans engagement. Le comparatif des trois options est dans notre article sur l'équipe design externalisée.

Sur la formation, aucune voie n'est obligatoire. Écoles de design, bootcamps intensifs et autoformation mènent tous au métier. Ce qui est regardé au recrutement, c'est le portfolio : trois projets expliqués, avec le problème de départ et les arbitrages, valent mieux que quinze écrans sortis de leur contexte.

Sur les salaires, les écarts sont importants selon la séniorité, la région et le secteur, et nous préférons ne pas avancer de fourchette que nous n'aurions pas mesurée. Les grilles publiées par l'Apec et les baromètres des écoles de design restent les sources à consulter directement.

Ce qui bloque vraiment en production

Après plusieurs années de production d'interfaces en abonnement, les blocages ne viennent presque jamais du talent du designer. Ils viennent de quatre causes récurrentes.

Le contenu réel arrive trop tard. Une maquette construite avec du faux texte casse dès que les vrais titres arrivent, parce qu'ils font deux fois la longueur prévue. Demander les dix vrais libellés avant de dessiner fait gagner deux allers-retours.

Le brief ne dit pas ce qui compte. Un brief qui liste vingt éléments sans les hiérarchiser produit un écran où rien ne ressort. La question à poser au client est simple : si l'utilisateur ne fait qu'une chose sur cet écran, laquelle ?

Les états limites ne sont pas cadrés. Que se passe-t-il avec zéro résultat, avec deux cents résultats, avec un nom de quarante caractères ? Ces trois questions posées au début évitent la moitié des reprises.

Les validations passent par trop de personnes en même temps. Trois avis contradictoires reçus simultanément allongent le délai bien plus que la complexité de l'écran. Un interlocuteur unique qui arbitre en amont change le rythme du projet.

C'est ce que nous cadrons dans notre service UX/UI : un interlocuteur, un cycle de révisions défini, et des livrables Figma exploitables par les développeurs. Design Elite conçoit les interfaces, mais n'assure ni le développement ni l'intégration, qui restent à la charge de votre équipe technique ou de votre prestataire.

Par où commencer

Si vous partez d'une interface existante, un audit de cohérence donne le meilleur retour immédiat : recensez tous les boutons du produit, tous les styles de titre et toutes les couleurs employées. Le désordre visible sur cette seule liste indique en général la moitié du travail à faire.

Si vous partez de zéro, commencez par les wireframes et le contenu réel avant toute décision visuelle. L'interface définitive se dessine vite quand la structure est stable, et se redessine indéfiniment quand elle ne l'est pas.

FAQ