UI Design

L’UI design, ou design d’interface utilisateur (User Interface Design en anglais, « interface design » dans les recherches), est la discipline qui conçoit l’aspect visuel et interactif d’un produit numérique : site, application, logiciel. Elle décide de ce que l’utilisateur voit et manipule, du bouton jusqu’à la grille de la page.

Ce que couvre l’UI design

• La mise en page : grille, marges, espacements, alignements, organisation des blocs.
• La hiérarchie visuelle : ce qu’on voit en premier, en deuxième, en dernier, grâce à la taille, au contraste, à la couleur et à la position.
• La typographie : familles, tailles, interlignes, longueur de ligne.
• Les couleurs : palette, rôles (action, alerte, succès), contraste.
• Les composants : boutons, champs, menus, cartes, onglets, fenêtres modales.
• Les icônes et les images, dans un style cohérent.
• Les micro-interactions : le petit mouvement qui confirme un clic ou signale une erreur.

Les états d’un composant, ce qu’on oublie le plus

Un bouton ne se dessine pas une fois : il existe au repos, au survol, au clic, au focus clavier, désactivé, en chargement, parfois en erreur. Il en va de même pour un champ de formulaire (vide, rempli, actif, invalide, en lecture seule) et pour une liste (vide, en chargement, pleine, en erreur). Les états sont l’endroit où une interface rassure ou frustre. Une maquette qui ne montre que le cas idéal laisse au développeur le soin d’inventer le reste, et le résultat s’en ressent.

Les principes qui structurent une bonne interface

• Hiérarchiser. Une action principale par écran, bien visible ; les actions secondaires se font plus discrètes.
• Rester cohérent. Un même élément a le même aspect et le même comportement partout. C’est le rôle du design system.
• Donner du retour. Chaque action produit un signe visible : un état, un message, une transition.
• Soigner la lisibilité. Taille de texte suffisante, contrastes assez forts, lignes de longueur raisonnable.
• Faire de l’espace. Les marges et les espacements ne sont pas du vide perdu : ils regroupent et séparent.
• Retirer plutôt qu’ajouter. Chaque élément a un coût d’attention ; ce qui ne sert pas l’objectif de l’écran est en trop.

Du wireframe à la livraison au développement

L’UI design intervient après la structure. Le wireframe fixe où vont les éléments, la maquette leur donne leur apparence, le UI kit rassemble les composants réutilisables, et le prototype permet de tester l’enchaînement. Vient enfin la livraison au développement : les composants, leurs états, les variables de couleur et d’espacement, et le comportement responsive sur chaque taille d’écran. Plus cette livraison est précise, moins l’intégration produit de surprises.

Site web, application mobile, logiciel : des conventions qui diffèrent

Une interface de site s’adapte à un écran dont la taille varie du téléphone au grand moniteur, et se lit souvent en survolant. Une application mobile suppose le geste du pouce, des zones de toucher plus généreuses et des conventions de plateforme : Apple publie ses Human Interface Guidelines, Google son Material Design. Un logiciel métier, lui, affiche beaucoup d’information dense à des utilisateurs qui s’en servent huit heures par jour : on y privilégie l’efficacité à la démonstration visuelle. Connaître le contexte d’usage change donc la taille des éléments, la place de la navigation et le niveau de détail acceptable.

UI design et accessibilité

Une interface belle mais illisible a échoué. Quelques repères issus des règles d’accessibilité du W3C (WCAG, consultées en octobre 2026) : un contraste minimal de 4,5:1 entre le texte courant et son fond (niveau AA), une zone cliquable d’au moins 24 par 24 pixels CSS dans WCAG 2.2, un focus clavier visible, et une information jamais portée par la couleur seule (un champ en erreur ne devient pas simplement rouge). Ces contraintes se traitent dès la maquette, pas au moment de la recette. Notre article sur la couleur pour les personnes daltoniennes donne des exemples concrets, et la fiche accessibilité web pose le cadre.

Les outils de l’UI designer

Figma est devenu la référence pour dessiner les interfaces et travailler à plusieurs en temps réel ; Sketch, Framer et Penpot (open source) existent aussi. Pour s’inspirer d’interfaces réelles, des bibliothèques comme Mobbin rassemblent des captures d’applications. Sur Webflow, l’UI design se matérialise directement dans l’éditeur visuel et les composants réutilisables : on dessine dans Figma, puis on reprend les variables et les composants dans Webflow pour que le site en ligne ressemble à la maquette.

Le métier d’UI designer

L’UI designer travaille avec le UX designer, qui définit les parcours et la structure, et avec les développeurs, à qui il livre les composants. Il maîtrise la typographie, la couleur, la mise en page et les outils, mais surtout la cohérence à grande échelle : un produit réel compte des centaines d’écrans et d’états. Dans les petites équipes, le même profil porte souvent l’UX et l’UI, et se rapproche du UX design sans s’y confondre.

Et l’IA dans tout ça ?

Les outils de design proposent désormais de générer un premier jet d’interface à partir d’une description. C’est utile pour explorer des pistes, moins pour tenir un produit dans la durée : cohérence entre les écrans, contraste, états, adaptation à la marque restent des choix à faire et à vérifier. Nous détaillons ce que ces outils changent dans notre article sur Figma AI en 2026.

Pour concevoir ou refondre une interface de site ou de produit, voir notre expertise Webdesign sur mesure et notre pôle UX/UI et Product design.