Le designer de l’interface de Metaphor: ReFantazio n’avait jamais travaillé sur un jeu vidéo. Il venait du web.
Ce détail dit beaucoup. Menus, jauges, notices, cartes : les meilleures interfaces de jeux résolvent les mêmes problèmes que vos sites, avec plus d’audace. Hiérarchiser l’information, guider sans bloquer, répondre à chaque action.
La Paris Games Week ouvre ses portes du 22 au 25 octobre 2026 à Paris Expo, porte de Versailles. Nous en profitons pour décrypter 15 interfaces de jeux récents, de Persona 5 Royal à Balatro, avec pour chacune une idée concrète à appliquer à un site.
La game UI désigne l’interface d’un jeu vidéo : menus, HUD (les informations affichées pendant la partie), cartes, inventaires et notices. Elle répond aux mêmes questions qu’un site web : quoi montrer, quand, et comment guider sans interrompre. C’est une source d’inspiration directe pour les webdesigners.
On distingue 4 types d’interface : diégétique (dans le monde du jeu), non diégétique, spatiale et méta.
Nos 15 exemples vont de Persona 5 Royal et Pentiment pour la typographie à Dead Space et Tunic pour l’interface intégrée au décor.
5 réflexes à transposer sur un site : identité typographique, information en contexte, onboarding progressif, code couleur fixe, retour visuel immédiat.
Game UI : les 4 types d’interface de jeu
Les designers de jeux classent les interfaces selon deux questions : l’élément existe-t-il dans l’histoire, et est-il placé dans l’espace 3D du jeu ? Cette grille vient d’un mémoire de l’université Chalmers, « Beyond the HUD », d’Erik Fagerholt et Magnus Lorentzon. Elle a son équivalent direct sur le web.
Type
Définition
Exemple en jeu
Équivalent web
Diégétique
L’interface existe dans le monde du jeu, le personnage la voit
La jauge de vie au dos de l’armure de Dead Space
Une information affichée dans le contenu, comme un message d’erreur sous le champ concerné
Non diégétique
Superposée à l’écran, hors de l’histoire
Le score de Balatro
Barre d’outils, tableau de bord, en-tête fixe
Spatiale
Placée dans l’espace du jeu, mais invisible pour le personnage
La traînée lumineuse qui guide le joueur dans Fable III
Info-bulle ou annotation accrochée à un élément
Méta
Un effet d’écran qui traduit l’état du personnage
Les traces de sang à l’écran quand on est blessé, dans Call of Duty: Modern Warfare 2
Un état global : bandeau d’alerte, écran grisé pendant un chargement
À retenir : avant de dessiner un composant, demandez-vous s’il doit vivre dans le contenu ou par-dessus.
Typographie et identité : 5 interfaces qui font affiche
Ces cinq jeux traitent leurs menus comme des affiches : la typographie et la couleur racontent l’histoire autant que les personnages.
1. Persona 5 Royal
Atlus · Sega · 2019 au Japon, 2020 dans le reste du monde · PC, consoles
L’interface la plus citée par les designers. Masayoshi Suto, son lead UI designer chez Atlus, s’est inspiré des pochettes des Sex Pistols et de leurs lettres découpées façon demande de rançon. Rouge, noir, blanc, angles vifs : chaque écran se reconnaît au premier coup d’œil.
Le prix à payer est assumé. Katsura Hashino, directeur de la série, explique que chaque menu est un programme à part, avec son propre design, et que c’est « vraiment pénible à faire ».
À piquer pour vos sites : une identité typographique forte peut porter un site événementiel ou une landing page de lancement. Gardez-la pour les titres et les transitions, pas pour les formulaires.
2. Metaphor: ReFantazio
Atlus (Studio Zero) · Sega · 11 octobre 2024 · PC, consoles
Son lead interface designer, Koji Ise, venait du web, des applications et de la publicité. Pour ce premier jeu, il a étudié la peinture médiévale et repris le coup de pinceau de Léonard de Vinci. Les typographies s’inspirent de la peinture japonaise et des clips de paroles de J-pop.
Résultat : des titres immenses, des lettres qui se posent comme une couronne sur la tête du héros, et des animations qu’il décrit comme des « accélérateurs d’émotion ».
À piquer pour vos sites : dans un parcours où il ne se passe pas grand-chose, comme un tunnel de commande ou un configurateur, les transitions sont l’action. Soignez-les comme un contenu.
3. Pentiment
Obsidian Entertainment · Xbox Game Studios · 15 novembre 2022 · PC, consoles
Le jeu remplace le doublage par la typographie. La fonderie Lettermatic a dessiné une écriture de copiste pour les personnages lettrés, une écriture plus rude pour les paysans, et des caractères d’imprimerie pour les premiers livres. Les répliques s’écrivent lettre par lettre, et la police d’un personnage change quand le héros change d’avis sur lui.
Le jeu de caractères dépasse 2 700 glyphes, avec une police plus lisible activable dans les options d’accessibilité.
À piquer pour vos sites : la typographie peut porter un sens, par exemple distinguer la voix de la marque et celle des clients dans des témoignages. Prévoyez toujours une version lisible.
4. Hi-Fi Rush
Tango Gameworks · Bethesda, puis Krafton · 25 janvier 2023 · PC, consoles
Tout bouge en rythme avec la musique, interface comprise. Le directeur du jeu, John Johanas, voulait que l’interface et ses animations montrent ce lien avec la bande-son. La direction artistique s’interdit les dégradés et tout ce qui paraît en 3D, pour un rendu de bande dessinée.
À piquer pour vos sites : donnez un tempo commun à toutes vos micro-animations, avec la même durée et la même courbe. L’interface paraît plus cohérente, même si personne ne sait dire pourquoi.
Un jeu de course en vue subjective où les armes sont des cartes. Son directeur, Ben Esposito, revendique une esthétique Y2K « utopique ». Chaque carte associe l’illustration d’une arme et un motif abstrait qui suggère son pouvoir.
La lisibilité passe avant tout : les portes sont toujours rouges et toujours sur le chemin principal, le lierre vert indique la bonne direction.
À piquer pour vos sites : réservez une couleur à l’action principale et ne l’utilisez jamais ailleurs. Vos visiteurs, comme les joueurs, apprennent le code en trois écrans.
Dans le décor : 5 interfaces intégrées au monde du jeu
Ces jeux cachent leur interface dans l’univers : sur une armure, dans une notice, un carnet ou le vent. Sur un site, l’équivalent est l’information affichée dans le contexte plutôt que dans une barre à part.
6. Dead Space
Motive Studio · Electronic Arts · 27 janvier 2023 · PC, PS5, Xbox Series
L’exemple d’école de l’interface diégétique. La santé et l’énergie s’affichent au dos de l’armure d’Isaac, les menus et l’inventaire apparaissent en hologrammes dans le décor, et rien ne met le jeu en pause. Le directeur créatif de Motive parle de « tout le principe du sans HUD, où tout est diégétique ».
À piquer pour vos sites : affichez l’information là où le regard est déjà. Une erreur sous le champ concerné, un stock à côté du bouton d’achat : c’est la même logique.
7. Tunic
Andrew Shouldice · Finji · 16 mars 2022 · PC, consoles
Pas de tutoriel en pop-up : on reconstitue la notice du jeu page par page, avec ses cartes, ses astuces et une écriture inventée. Son créateur s’est inspiré des notices énigmatiques des jeux NES et a refusé les tutoriels plein écran, qu’il juge intrusifs.
À piquer pour vos sites : remplacez la visite guidée en cinq pop-ups par des aides qui apparaissent au moment où l’utilisateur en a besoin.
8. Dordogne
Un Je Ne Sais Quoi et Umanimation · Focus Entertainment · 13 juin 2023 · PC, consoles
Un jeu français, conçu par des studios girondins, entièrement peint à l’aquarelle par Cédric Babouche. L’héroïne collecte des photos et des sons, puis choisit ceux qu’elle colle dans son carnet de souvenirs.
À piquer pour vos sites : laissez l’utilisateur composer sa propre trace, par exemple une liste de favoris ou un moodboard. On revient plus volontiers sur ce qu’on a construit soi-même.
9. Inscryption
Daniel Mullins Games · Devolver Digital · 19 octobre 2021 · PC, consoles
Un jeu de cartes joué à la première personne, assis à une table, dans une cabane. Pour que les cartes restent lisibles en basse résolution, Daniel Mullins a supprimé tout le texte, sauf le nom, et recouvert les portraits d’icônes quand il le fallait.
À piquer pour vos sites : quand la place manque, remplacez le texte par des icônes, mais gardez toujours un libellé court. Une icône seule se lit mal.
10. Ghost of Tsushima
Sucker Punch Productions · Sony Interactive Entertainment · 17 juillet 2020 · PS4, PS5, PC
Ni boussole, ni mini-carte permanente : le vent indique la direction. Son directeur créatif, Jason Connell, voulait « garder l’écran aussi propre que possible ». Des options permettent d’alléger encore l’interface.
À piquer pour vos sites : proposez un mode lecture sans menu collant ni bandeau. Le contenu peut guider, comme le vent, si la hiérarchie visuelle est claire.
Lisibilité et retours visuels : 5 interfaces qui guident
Ici, l’interface sert d’abord à comprendre : ce qui vient de se passer, ce qui reste, ce qu’on peut faire.
11. Balatro
LocalThunk · Playstack · 20 février 2024 · PC, consoles, mobile
Un jeu de poker où chaque carte jouée fait grimper un score à l’écran, jetons multipliés par le multiplicateur, avec un léger effet d’écran cathodique. Apple lui a remis un Apple Design Award 2025 dans la catégorie « Delight and Fun ».
Notre lecture : le plaisir vient de la réponse immédiate à chaque geste. On voit le calcul se faire.
À piquer pour vos sites : montrez le calcul, pas seulement le résultat. Un récapitulatif de panier qui s’anime quand on applique une remise rassure plus qu’un total qui change en silence.
Annoncé en 2019 et attendu six ans, le jeu tient son interface en haut à gauche : quelques masques pour la vie et une bobine de soie pour l’énergie, dessinés dans le style du jeu. Tout le reste de l’écran va à l’action.
À piquer pour vos sites : une jauge peut tenir en trois éléments si elle est dessinée dans votre langage graphique. Une barre de progression générique se remarque, une jauge à votre image s’oublie.
13. Hades II
Supergiant Games · version 1.0 le 25 septembre 2025 · PC, Switch, Switch 2, puis PS5 et Xbox
Supergiant a recruté un illustrateur dédié à l’interface. L’offre d’emploi, publiée en décembre 2022, demandait des concepts d’écrans de menu, des éléments de HUD et « des centaines d’icônes » d’un style cohérent, livrées en calques prêts pour l’animation. Le jeu a reçu le prix du meilleur jeu d’action aux Game Awards 2025.
À piquer pour vos sites : traitez vos icônes comme un système, avec une grille, une épaisseur de trait et un style, et préparez-les pour l’animation dès le départ.
14. Clair Obscur: Expedition 33
Sandfall Interactive (Montpellier) · Kepler Interactive · 24 avril 2025 · PC, PS5, Xbox Series
Le RPG français de Sandfall mêle tour par tour et réflexes : on esquive et on pare les attaques en temps réel. Son univers s’inspire de la Belle Époque et de l’Art déco. Côté menus, l’équipe voulait qu’il se passe « toujours quelque chose à l’écran, même quand on navigue dans les menus ».
À piquer pour vos sites : un écran d’attente ou un état vide peut être vivant, sans en faire trop. Une animation discrète vaut mieux qu’un écran figé ou qu’un spinner seul.
15. Cyberpunk 2077
CD Projekt Red · CD Projekt · 10 décembre 2020 · PC, consoles
Une interface très dense, et la preuve qu’on peut la reprendre. La mise à jour 2.0 du 21 septembre 2023 a refait le journal de quêtes « plus épuré », le téléphone et les menus de compétences. Elle a aussi simplifié les info-bulles avec des barres de statistiques, et fait dézoomer la mini-carte selon la vitesse.
À piquer pour vos sites : une refonte d’interface n’a pas besoin d’attendre la prochaine version du site. Simplifiez les info-bulles, remplacez les chiffres bruts par des barres comparatives, et mesurez.
Comment appliquer la game UI à un site web ?
Prenez les principes, pas l’esthétique : un site n’est pas un jeu, et ses visiteurs n’ont pas choisi de jouer. Voici 5 réflexes tirés de notre sélection.
Une identité typographique pour les moments forts (Persona 5 Royal, Metaphor). Titres, transitions, pages d’événement, mais pas les formulaires.
L’information là où le regard se trouve (Dead Space). Messages d’erreur, stocks et aides au plus près de l’élément concerné.
Un onboarding progressif (Tunic). Des aides contextuelles plutôt qu’une visite guidée plein écran.
Un code couleur fixe pour l’action principale (Neon White). Une couleur, un sens, partout.
Un retour visuel à chaque action (Balatro, Hi-Fi Rush). Un même tempo pour toutes les animations, et toujours une option pour réduire les animations.
À retenir : un site gagne à emprunter la clarté des jeux, pas leur surcharge.
HUD : définition
Le HUD, pour heads-up display ou affichage tête haute, regroupe les informations affichées par-dessus l’action pendant une partie : vie, munitions, carte, score. Il fait partie de la game UI, qui comprend aussi les menus et les écrans hors partie. Le terme vient de l’aviation, où il désigne les données projetées dans le champ de vision du pilote. Pour les bases, voir notre définition du design UI.
La game UI est l’interface utilisateur d’un jeu vidéo : menus, HUD, cartes, inventaires, écrans de chargement et tutoriels. Elle informe le joueur et l’aide à agir sans l’interrompre, comme une interface web aide un visiteur.
Le HUD désigne seulement les informations affichées pendant l’action, comme la vie ou le score. L’UI englobe tout : le HUD, mais aussi les menus, les réglages et les écrans hors partie.
C’est une interface qui existe dans le monde du jeu et que le personnage peut voir, comme la jauge de vie au dos de l’armure de Dead Space. Sur un site, l’équivalent est une information affichée dans le contenu plutôt que dans une barre séparée.
Le site Interface In Game rassemble des captures d’interfaces de jeux, classées par jeu. Pour des exemples appliqués au web, consultez nos 20 animations d’interfaces.
Oui pour les principes : hiérarchie, retour visuel, aide contextuelle, code couleur. Non pour la surcharge : un site doit rester rapide, accessible et compréhensible sans apprentissage, et toujours respecter la préférence de réduction des animations.
