Projet 6 - 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.

✅ 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 :

  • Phase de recherche

  • Trois moodboards

  • Fiche concept de ton jeu

  • Wireframe

  • Design de l'écran d'accueil de votre jeu

  • Design de la page d'inventaire

  • Design du HUD

  • Design de la pochette de jeu

2 - Présentation

Lien de partage avec droits d'édition de votre présentation (Figma Slides, PowerPoint ou Canva)

Remise et avis

Auto-évaluation

🧭 Objectifs

À la fin de cet atelier, tu auras développé ces compétences :

  • Maîtriser les outils de base de Figma pour créer des écrans de jeu cohérents et organisés.

  • Comprendre les fondements de l’expérience utilisateur (UX) dans le contexte du jeu vidéo.

  • Analyser et concevoir une interface de jeu, adaptée à un univers visuel défini.

  • Appliquer les principes de lisibilité, de hiérarchie visuelle et d’ergonomie dans un contexte interactif.

Tout ton travail sera réalisé dans Figma, mais en gardant à l’esprit que ces interfaces seront plus tard intégrées dans Unreal Engine : tu dois donc penser lisibilité, simplicité et faisabilité technique.

Trouve un exemple de livrable ici

🏗️ L'atelier

Livrable final

Voir les détails dans la théorie ci-dessous.

🎓 La théorie

Recherche et observation

Avant de te lancer dans la création, tu dois observer.
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 jeux vidéo différents (de genres variés si possible). Pour chacun, observe et prends des captures d’écran des éléments suivants :

  1. 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 ?

  2. 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 ?

  3. 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.

Fiche concept

Ta fiche concept doit inclure :

  • 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…

  • Pitch (2–3 lignes) :

    “Dans Astral Forge, le joueur explore une planète mécanique et récupère des fragments d’énergie pour sauver son monde.”

Cette fiche sera présentée au formateur avant de passer à la création du flow d’interface.

Wireframe

Tu sais maintenant quoi créer et dans quel univers.
La prochaine étape est de planifier comment le joueur navigue entre les écrans.

Dans Figma, dessine 3 frames représentant les trois écrans :

  • Accueil

  • HUD

  • Inventaire

Sous chaque frame, liste les actions possibles (Ex : Jouer, quitter, etc.)

Ajoute des zones grises simples pour visualiser la composition (sans couleur ni image)

  • Rectangles pour les boutons

  • Barres horizontales pour la vie et la stamina

  • Cercles ou rectangles pour les éléments interactifs

Ici, ton objectif n'est pas le style, mais la clarté fonctionnelle !


Design des é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 de jeu

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.

Présentation

Tu présenteras ton projet au groupe et au formateur.
Ta présentation (Power Point) doit inclure :

  1. Tes trois moodboards initiaux.

  2. Ta fiche concept de jeu.

  3. Ton flow utilisateur + wireframes.

  4. Tes trois écrans finaux.

🚀 Poursuis tes apprentissages

Voici du contenu supplémentaires facultatif pour continuer d'apprendre :

  • Crée un item qui augmentera ta vie (Ex: un coeur - quand tu le ramasses, ta vie augmente)

  • Item Stamina (soit un boost ou augmenter une stamina qui est basse)

  • Ajouter une map au HUD

🛠️ Ressources

Voici quelques ressources pertinentes :

Atelier précédent

Atelier suivant

Create a free website with Framer, the website builder loved by startups, designers and agencies.