Projet 7 - Initiation à l'engin de jeu
Design d'interface de jeu
L’objectif est de te mettre dans la peau d’un designer d’interface de jeu vidéo. Tu apprendras à observer, analyser, conceptualiser et concevoir des écrans clairs, cohérents et immersifs pour un jeu vidéo.
✅ Remise
📁 Livrable final
1 - Interface de votre jeu
Lien de partage avec droits d'édition de votre projet Figma basé sur ce gabarit qui comprend :
Flowchart (Organigramme)
Phase de recherche
Trois moodboards
Design des écrans (Minimum, Écran d'accueil, HUD et Page d'inventaire)
Design de la pochette de jeu avec la fiche
2 - Présentation
Lien de présentation vers votre Figma Slides
🏗️ L'atelier
Livrable final
Flowchart (Organigramme)
Organigramme représentant le parcours de l'utilisateur sous forme d'écran (UI) de votre jeu, relié par des flèches pour illustrer les intéractions possibles.
Les écrans sont présentés sous forme de wireframe très simples, sans élément de design. Le niveau de détail est minimal, mais permet de comprendre :
Le positionnement des éléments
Les interactions/actions possibles
Recherche
Pour chaque page de ton jeu identifiées dans ton organigramme :
Trouve au moins 3 références d'interfaces existants provenant de jeux différents.
Note ce que tu aimes, ce que tu n’aimes pas à l’aide de commentaires.
Moodboards
Crée trois moodboards représentant chacun une direction artistique possible pour ton jeu. Tes moodboards doivent comprendre au moins :
5 à 10 images d’ambiance (personnages, textures, environnements, menus de jeu existants).
Une palette de couleurs.
1 ou 2 polices de caractères (titre et texte secondaire).
Des exemples d’icônes ou de HUD inspirants.
Quelques items
Écrans de jeu
Crée maintenant l'UI de tes écrans de jeu. Les 3 écrans minimums obligatroirs sont ceux du gabarit :
Écran d'accueil
HUD
Inventaire
Si jamais votre projet ne comprends pas l'une de ces pages, simplement voir avec le formateur quelle autre page sera à réaliser.
Pochette et fiche concept
Crée une pochette pour ton jeu vidéo incluant l’avant, l’arrière et l’intérieur de la pochette.
Vous pouvez choisir la console.
Assurez-vous que les détails de la fiche concept se trouvent sur la pochette de votre jeu.
Réalisez un mockup de la pochette de jeu en 3D.
🎓 La théorie
Flowchart (Organigramme)
Avant de te lancer dans la création, tu dois déjà savoir ce qui est à créer…
Pour ce faire, crée un organigramme qui présente chaque page de ton jeu avec les options, boutons, etc.
Crée ensuite les liens entre les boutons et les pages.
L'idée est de confirmer le flow d'utilisation de votre jeu.
💡 Astuce :
Crée l'organigramme dans FigJam et copie-le ensuite dans ton fichier design. Dans FigJam, utilise l'outil "Section" pour créer les pages et l'outil rectangle pour créer les boutons et les éléments. Relie les éléments avec les flèches en prenant soin de bien les attacher entre eux.
Recherche
Cette étape est essentielle : les meilleurs designers ne commencent jamais avec un écran blanc, mais avec une compréhension claire de ce qui fonctionne.
🎯 Objectif : Identifier les forces et faiblesses d’interfaces existantes pour comprendre ce qui rend une expérience de jeu agréable et intuitive.
Ce que tu dois observer :
Choisis 3 écrans de jeux vidéo différents pour chacune de tes pages (de genres variés si possible). Pour chacun, observe par exemple :
L’écran d’accueil
Quelles informations sont visibles dès le départ ?
Où sont placés les boutons (“Jouer”, “Paramètres”, “Quitter”) ?
Quel ton visuel est utilisé (couleurs, typographie, style graphique) ?
Est-ce que tout est lisible même à distance ?
Le menu d’inventaire
Comment les objets sont-ils présentés ? (grille, liste, icônes…)
Quelle logique de navigation le joueur suit-il ?
Comment les catégories sont-elles différenciées ?
Y a-t-il des effets visuels ou sonores lors des interactions ?
Le HUD
Où sont placées les barres de vie, stamina, score, ou mini-carte ?
Est-ce que ces éléments sont discrets ou très visibles ?
L’interface s’adapte-t-elle à la situation (combat, exploration, pause) ?
💡 Astuce :
Prends des notes directement dans Figma. Observe aussi ce que tu ressens : est-ce clair, confus, excitant, distrayant ? Ton but n’est pas de copier, mais de comprendre les logiques qui fonctionnent.
Moodboards
Maintenant que tu as observé ce qui existe, tu vas imaginer ton propre univers de jeu.
Le moodboard sert à traduire visuellement ton intention artistique avant de concevoir quoi que ce soit.
Tu vas créer trois moodboards différents, comme si tu étais une agence qui présente trois directions possibles à ton “client” (le formateur).
Pour chaque direction, ajoute :
5 à 10 images d’ambiance (personnages, textures, environnements, menus de jeu existants).
Une palette de couleurs.
1 ou 2 polices de caractères (titre et texte secondaire).
Des exemples d’icônes ou de HUD inspirants.
Quelques items 3D
Sous chaque moodboard, ajoute une courte phrase descriptive :
“Une ambiance froide et technologique, avec des interfaces bleutées et lumineuses.”
“Un univers magique et végétal, inspiré de la nature et des jeux de rôle médiévaux.”
Le formateur (ton “client”) choisira une direction visuelle à poursuivre pour la suite du projet.
💡 Conseil important :
Les éléments que tu choisis ici détermineront la lisibilité et la cohérence de tout ton design.
Évite les couleurs trop saturées ou les polices trop décoratives - pense à la fonction avant le style.
Écrans
C’est ici que la magie opère : tu vas transformer ton wireframe en véritables écrans de jeu, cohérents, esthétiques et fonctionnels.
1. Écran d’accueil
Mets en avant le titre du jeu avec ta typographie principale.
Ajoute les boutons essentiels (“Jouer”, “Paramètres”, “Quitter”).
Utilise ton palette de couleurs pour créer une ambiance immédiate.
Pense à la profondeur visuelle (effet de perspective, brume, texture de fond).
Vérifie que les boutons soient lisibles et contrastés.
2. Menu d’inventaire
Crée une grille de 6 à 12 emplacements pour les objets.
Utilise des icônes cohérentes et visibles à petite taille.
Intègre une section d’information (nom, description, rareté).
Garde la hiérarchie : ce qui est utile en premier, décoratif en dernier.
3. HUD
Barre de vie à gauche ou en haut.
Barre de stamina sous la barre de vie.
Laisse de l’espace libre autour du centre de l’écran (zone de gameplay).
Si tu ajoutes un mini-menu, teste sa visibilité avec des formes semi-transparentes.
💡 Conseils :
Teste ton interface en zoomant à 50% pour voir si tout reste lisible.
Vérifie le contraste avec l’outil d’accessibilité intégré de Figma.
Évite les polices trop fines ou les effets de texte flous.
Reste proche de ton moodboard — cohérence avant originalité.
Pochette et fiche concept
Fiche concept :
Titre du jeu : un nom court et évocateur.
Genre : aventure, simulation, horreur, arcade, etc.
Public cible : pour qui est le jeu ?
Style visuel : réaliste, stylisé, cartoon, minimaliste, etc.
Ambiance sonore (facultatif) : douce, énergique, inquiétante, rétro…
Description qui donne envie de jouer à votre jeu :
“Après un naufrage, un vieux pirate se réveille sur une île inconnue. Sans équipage, ni carte, il découvre que cette terre abrite un secret : des champignons luminescents, et parmi eux, un unique champignon d’or légendaire.
Au fil de son exploration, il devra :
Ramasser, observer et cataloguer des espèces de champignons.
Découvrir les ruines d’un ancien équipage disparu.
Fabriquer de petits outils à partir de bois flotté et de pierres.
Suivre les indices laissés par un ancien pirate naturaliste.
Tout cela dans une atmosphère zen, pleine d’humour et de mystère.”
Pochette
Crée une pochette pour la console de ton choix en te basant sur une pochette existante pour définir le format.
Crée ensuite un mockup de la pochette avec les outils en ligne.
Vous devez designer l'extérieur (avant et arrière) et l'intérieur. Inspirez-vous de pochettes existantes pour voir ce qui devrait se trouver sur votre pochette.
Assure-toi d'intégrer la fiche concept sur ta pochette !
Interactivité
Crée des composantes qui permettront à tes boutons d'avoir un hover state, crée des liens entre les boutons et les pages, ajoute des overlay pour simuler l'ouverture de ton inventaire ou de menus de confirmation par exemple !
Présentation
Tu présenteras ton projet au groupe et au formateur.
Ta présentation Figma Slides doit inclure tout ce que tu as fait cette semaine !
🚀 Poursuis tes apprentissages
Voici du contenu supplémentaires facultatif pour continuer d'apprendre :
Crée les autres écrans de ton jeu pour avoir un prototype complet et fonctionnel.
🛠️ Ressources
Voici quelques ressources pertinentes :
SketchFab (Modèles 3D)
GameUiDataBase (Interfaces de jeu)
Coolors.co (palettes de couleurs)
Noun Project (icônes)
Google Fonts (polices)